如何将表单数据发送到控制器以发出 ajax 请求以将数据保存在 Db 中答案

【问题标题】：How to send form data to controller to make an ajax request for saving data in Db如何将表单数据发送到控制器以发出 ajax 请求以将数据保存在 Db 中
【发布时间】：2013-10-21 07:04:26
【问题描述】：

我正在开发一个 ASP.net MVC 2.0 应用程序。

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

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

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

请帮忙。

我正在使用强类型视图。

【问题讨论】：

标签： c# jquery ajax asp.net-mvc forms

【解决方案1】：

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

在视图中

  @model ViewModel

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

                <input type="button" value="Save" onclick="SaveDemo();" />

             }

java脚本保存功能

   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);
    }

【讨论】：

@User.Thanks 如何在控制器操作方法中接收该数据？
通过使用view对象的强绑定类型，可以接收数据。

【解决方案2】：

试试这个，

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

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 });
        }

【讨论】：

【解决方案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);
}

【讨论】：