AspNet MVC4 教育-28:Asp.Net MVC4 Ajax技术部门四舍五入余速Demo

最新推荐文章于 2025-08-22 14:06:47 发布

weixin_34232617

最新推荐文章于 2025-08-22 14:06:47 发布

阅读量91

点赞数

文章标签：测试 javascript json ViewUI

本博客介绍了一个使用Ajax技术实现的DIV除法计算器，包括创建项目、定义模型、控制器方法和视图交互，演示了如何通过前端输入获取整数并执行除法运算，最终展示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A.创建一个Basic项目类型。

B.于Models创建一个文件夹:

DivModel.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace MvcAjaxDivTest.Models
{
    public class DivModel
    {
        [Required(ErrorMessage = "请输入一个整数.")]
        public int Dividend {set; get;}
       [Required(ErrorMessage = "请输入一个整数.")]
        public int  Divisor {set; get;}
        public int? Answer { set; get; }
        public int? Remainder { set; get;}
    }
}

C.创建HomeController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAjaxDivTest.Models;

namespace MvcAjaxDivTest.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Div(DivModel m)
        {
                if (m.Divisor == 0)
                {
                    return Json(new { DivisorTip = "除数不能为0", Answer = "", Remainder = "" }, JsonRequestBehavior.AllowGet);
                }
                return Json(new { DivisorTip= "", Answer = m.Dividend / m.Divisor, Remainder = m.Dividend % m.Divisor }, JsonRequestBehavior.AllowGet);
        }
    }
}

D.创建对应的Home/Index.cshtml:

@model MvcAjaxDivTest.Models.DivModel

@{
    ViewBag.Title = "Ajax Div Test";
}

<h2>Ajax Div Test</h2>
@using (Ajax.BeginForm("Div", "Home", new AjaxOptions {OnSuccess = "ShowResult"}))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>DivModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Dividend)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Dividend)
            @Html.ValidationMessageFor(model => model.Dividend)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Divisor)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Divisor)<span id="DivisorTip"></span>
            @Html.ValidationMessageFor(model => model.Divisor)
        </div>

  <div class="editor-label">
          @Html.LabelFor(model => model.Answer)
    </div>
    <div id="Answer" class="editor-field">
        @Html.DisplayFor(model => model.Answer)
    </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Remainder)
    </div>
    <div  id="Remainder" class="editor-field">
        @Html.DisplayFor(model => model.Remainder)
    </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
@*<script src="/Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>*@
@section Scripts {
@Scripts.Render("~/bundles/jqueryval") 
<script language="javascript" type="text/javascript">
    function ShowResult(data) {
        $("#DivisorTip").html(data.DivisorTip);
        $("#Answer").html(data.Answer);
        $("#Remainder").html(data.Remainder);
    }  
</script>  
}

E.效果示范: