在asp.net mvc中使用jquery ajax提交post后更新部分视图

我在我的应用程序中处理一个表单，我想使用ajax发布。 发布工作正常，我的控制器收到数据，但我想将成功消息发回我的视图，而不是刷新整个页面。 我是否必须返回包含此信息的部分视图，或者我可以从控制器返回消息？ 我似乎无法弄清楚如何正确地做到这一点。

 
 
 
 @Html.LabelFor(m => m.Id, new { @class = "col-md-3 control-label"}) 
 @Html.TextBoxFor(m => m.Id, new { @class = "form-control", disabled = "disabled", id = "WellId", name = "WellId" }) 
 
 
 @Html.LabelFor(m => m.Name, new { @class = "col-md-3 control-label" }) 
 @Html.TextBoxFor(m => m.Name, new { @class = "form-control" }) 
 
 
 @Html.LabelFor(m => m.Location, new { @class = "col-md-3 control-label" }) 
 @Html.TextBoxFor(m => m.Location, new { @class = "form-control" }) 
 
 
 @Html.LabelFor(m => m.WellNumber, new { @class = "col-md-3 control-label" }) 
 @Html.TextBoxFor(m => m.WellNumber, new { @class = "form-control" }) 
 
 
 @Html.LabelFor(m => m.WellType, new { @class = "col-md-3 control-label" }) 
 @Html.TextBoxFor(m => m.WellType, new { @class = "form-control" }) 
 
 
 @Html.LabelFor(m => m.SpudDate, new { @class = "col-md-3 control-label" }) 
 @Html.TextBoxFor(m => m.SpudDate, new { @class = "form-control" }) 
 
 
  
 
  
 
 
 
 
  $(document).ready(function() { $('#wellform').submit(function () { console.log("wellId = " + $("#WellId").val()); $("#processing_small").show().hide().fadeIn('slow'); $.ajax({ url: '@Url.Action("SaveWellDetails", "WellManagement")', type: "POST", dataType: "json", data: { wellId: $('#WellId').val(), name: $('#Name').val(), location: $('#Location').val(), wellNumber: $('#WellNumber').val(), wellType: $('#WellType').val(), spudDate: $('#SpudDate').val() }, error: function (msg) { $('#wellsavesection').hide().html('
Ouch! ' + msg.statusText + '
').fadeIn('slow'); }, success: function (msg) { $('#wellsavesection').hide().html('
Success! Form Saved.
').fadeIn('slow').delay(1500).fadeOut(); } }); }); });  

这是我的控制器：

 [HttpPost] public ActionResult SaveWellDetails(string wellId, string name, string location, string wellNumber, string wellType, DateTime spudDate) { try { var wellConctract = new WellContract { Id = Convert.ToInt32(wellId), Name = name, Location = location, WellNumber = wellNumber, WellType = wellType, SpudDate = spudDate }; WellService.UpdateWell(wellConctract); } catch (Exception e) { Log.Error(e); return new HttpStatusCodeResult(HttpStatusCode.BadRequest, e.Message); } return Json(new {success = true}, JsonRequestBehavior.AllowGet); } 

Answer 1

只需添加return false; $('#wellform').submit(function () {...的结尾$('#wellform').submit(function () {... （在ajax函数之后，不在其中）它应该可以工作，我在jsfiddle中试了一下。

这样做会阻止表单提交。

Answer 2

您不需要部分视图来执行此操作，您的页面将刷新每个提交，因为它执行常规事件，请尝试添加event.preventDefault() http://api.jquery.com/event.preventdefault/

  $('#wellform').submit(function (ev) { ev.preventDefault(); // put your code below here ..... });