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

本文关键字：数据 请求 保存 存在 ajax DB 控制器 表单 | 更新日期: 2023-09-27 18:36:22

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

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

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

由于我使用的是MVC 2.0，所以我不能使用AJax.beginForm。 我需要依靠jquery Ajax方法。

请帮忙。

我正在使用强类型视图。

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

您可以使用 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);
    }

试试这个，

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

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

您可以订阅表单的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);
}
相关文章：