如何将表单数据发送到控制器以生成在Db中保存数据的ajax请求

我正在研究ASP.net MVC 2.0应用程序。

我有一个表单，在输入数据后，用户点击提交。

在这里，我不想做enitre post back而不是我只是想做一个ajax请求将表单数据发送到相应的控制器方法并插入并将响应发送到同一页面。

因为，我使用MVC 2.0，我不能使用AJax.beginForm。 我需要依赖jquery Ajax方法。

请帮忙。

我正在使用强类型视图。

Answer 1

试试这个，

在下面的代码中，我初始化模型并发布该模型。

var returnValue = new Object();//dynamically fill model value with different model entity returnValue.vendorSiteSustainabilityList = VendorSiteSustainability; returnValue.VendorSiteId = '@Model.VendorSiteId'; returnValue.ServiceTypeId = '@Model.ServiceTypeId'; returnValue.HaulerName = $("#HaulerName").val(); returnValue.FacilityName = $("#FacilityName").val(); returnValue.CityId = parseInt($("#CityId").val()); returnValue.StateId = parseInt($("#StateId").val()); returnValue.CoutryID = parseInt($("#CoutryID").val()); var request = $.ajax({ url: '', type: 'POST', cache: false, data: JSON.stringify(returnValue), dataType: 'json', contentType: 'application/json; charset=utf-8' }); request.done(function (msg) { if (msg != null && msg.IsValid != null) { if (msg.IsValid == true) { //write code when your data successfully operated } } }); 

型号声明：

 [Serializable] public class myModel {} 

控制器：

 [HttpPost] public ActionResult SaveAction(myModel model) { if (model != null && ModelState.IsValid) { } return Json(new { IsValid = ModelState.IsValid }); } 

Answer 2

您可以使用JavaScript的序列化方法直接发布数据。

在视野中

  @model ViewModel @using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "FormId" })) {  } 

java脚本保存function

  function SaveDemo() { $.ajax({ url: '', type: 'POST', cache: false, data: jQuery("#FormId").serialize(), success: function (result) { // do accordingly as per your result } }); } 

和控制器保存方法将：

 [HttpPost] public ActionResult Save(ViewModel viewModel) { if (this.ModelState.IsValid) { // save to DB } return this.View(viewModel); } 

Answer 3

您可以订阅表单的submit事件并通过ajax发送数据：

 $('form').submit(function(){ var $form = $(this); if($form.valid()) { var action = $form.prop('action'), method = $form.prop('method'), data = $form.serialize(); $.ajax({ url: action, type: method, data: data, success: function (response) { // success function } }); } return false; // do not forget to return false to prevent the default behaviour }); 

更新：

控制器：

 [HttpPost] public ActionResult Save(YourViewModel viewModel) { if (ModelState.IsValid) { // Save to db } return PartialView("_PartialViewName", viewModel); }