在Asp.Net mvc 4中使用AJAX提交表单

这里是完整的例子-

让我们创建一个简单的模型-

public class Details{    public string Name { get; set; }    public string Email { get; set; }}

现在，让我们创建几个动作，以使用

AJAX BEGINFORM

    static List<Details> details = new List<Details>();     public ActionResult GetMe()    {        return View();    }    public ActionResult SaveData(Details d)    {        details.Add(d);        return Json(details.Count, JsonRequestBehavior.AllowGet);    }

然后让我们创建一个简单的视图，它将托管Ajax.BeginForm（）-

@model RamiSamples.Controllers.Details@{    ViewBag.Title = "Ajax";}<h2>Ajax</h2><script src="~/scripts/jquery-1.8.2.min.js"></script><script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>@using (Ajax.BeginForm("SaveData", new AjaxOptions(){    InsertionMode = InsertionMode.Replace,    UpdateTargetId = "dane"})){    @Html.AntiForgeryToken()    @Html.ValidationSummary(true)    <fieldset>        <legend>Details</legend>        <div > @Html.LabelFor(model => model.Name)        </div>        <div > @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name)        </div>        <div > @Html.LabelFor(model => model.Email)        </div>        <div > @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email)        </div>        <p> <input type="submit" value="Create" />        </p>    </fieldset>}<div id="dane">    Number of Details : </div>

现在，当页面呈现时-

现在，当您输入数据并单击创建按钮时-

然后页面会自动更新，添加数量如下所示-