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

我正在尝试学习asp.net，到目前为止我可以加载其他页面内容而无需使用Ajax.Actionlink和AjaxOptions()进行刷新，但我无法弄清楚如何在提交表单时使用ajax。 我做了很多谷歌搜索但找不到合适的解决方案。 这是我的代码，

控制器页面

 namespace CrudMvc.Controllers { public class HomeController : Controller { sampleDBEntities db = new sampleDBEntities(); // // GET: /Home/ public ActionResult Index() { return View(db.myTables.ToList()); } public PartialViewResult Details(int id = 0) { myTable Table = db.myTables.Find(id); return PartialView(Table); } [HttpGet] public PartialViewResult Create() { return PartialView(); } [HttpPost] public ActionResult Create(myTable table) { if (ModelState.IsValid) { db.myTables.Add(table); db.SaveChanges(); return RedirectToAction("Index"); } return View(table); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } } 

Index视图页面

 @model IEnumerable @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; }   
Index
 
 @Ajax.ActionLink("Add New", "Create", new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "info", InsertionMode = InsertionMode.Replace }) 
 
  @foreach (var item in Model) {  } 
 
 
 @Html.DisplayNameFor(model => model.name) 
 
Action
 
 
 @Html.DisplayFor(modelItem => item.name) 
 
 @Ajax.ActionLink("Details", "Details", new{ id=item.id}, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "info", InsertionMode = InsertionMode.Replace }) 
 
 
 
 

Create视图页面

 @model CrudMvc.Models.myTable @{ ViewBag.Title = "Create"; Layout = "~/Views/Shared/_Layout.cshtml"; } 
Create
 @using (Html.BeginForm()) { @Html.ValidationSummary(true) 
 
myTable
 
 @Html.LabelFor(model => model.id) 
 
 @Html.EditorFor(model => model.id) @Html.ValidationMessageFor(model => model.id) 
 
 @Html.LabelFor(model => model.name) 
 
 @Html.EditorFor(model => model.name) @Html.ValidationMessageFor(model => model.name) 
 
  
 
 }  var form = $('#main'); $.ajax({ cache: false, async: true, type: "POST", url: form.attr('action'), data: form.serialize(), success: function (data) { alert(data); } });  
 @Html.ActionLink("Back to List", "Index") 
 @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

Answer 1

这是完整的例子 –

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

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

现在让我们使用AJAX BEGINFORM创建几个动作来发出GET和POST请求 –

  static List
 details = new List
(); 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"; } 
Ajax
   @using (Ajax.BeginForm("SaveData", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "dane" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) 
 
Details
 
 @Html.LabelFor(model => model.Name) 
 
 @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) 
 
 @Html.LabelFor(model => model.Email) 
 
 @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) 
 
  
 
 } 
 Number of Details :  

现在当页面被渲染时 –

现在当您输入数据并单击“创建”按钮时 –

然后页面将自动更新添加的数量，如下所示 –