如何在JavaScript asp.net中序列化表格 [英] How can I serialize a form in JavaScript asp.net

问题描述

我正在使用一些JavaScript来发布表单，但是我不想提交每个表单字段，有没有一种方法可以将其序列化为.net中的对象，以便它将所有表单内容都包含进来.

 部分脚本{< script>函数确认编辑(){swal({标题:"MIS"，文字:案例创建您的案例编号为"+ $(#Id").val()，图标:警告"，按钮:是的，angersMode:真，}).then((willUpdate)=> {如果(willUpdate){$ .ajax({网址:"/tests/edit/"+ $(#Id").val()，类型:"POST"，数据: {ID:$(#Id").val()，名称:$(#Name").val()}，dataType:"html"，成功:功能(){swal(完成！"，已成功编辑！"，成功").then((success)=> {window.location.href ="/tests/index"；});}，错误:函数(xhr，ajaxOptions，thrownError){swal(错误更新！"，请重试"，错误")；}});}});}</script>} 

解决方案

请参考以下方法将表单数据提交给操作方法:

1. 使用

   如我们所见，我们可以以表单甚至嵌套实体的形式获取元素的值.

   注意:只有< 成功的控件被序列化为字符串.由于没有使用按钮提交表单，因此没有序列化提交按钮的值.为了使表单元素的值包含在序列化的字符串中，该元素必须具有name属性.仅当复选框和单选按钮的值被选中时，才包括它们的值("radio"或"checkbox"类型的输入).来自文件选择元素的数据未序列化.

   2. 创建一个JavaScript对象，并将其发布到action方法.

   按如下所示更改JavaScript脚本:

     $(function(){$(#summary").click(function(){console.log(呼叫摘要")；event.preventDefault();//创建一个对象来存储输入的值.var OrderViewModel = {};//使用jquery来获取输入的值.OrderViewModel.OrderId = $("input [name ='OrderId']").val();OrderViewModel.OrderName = $(" input [name ='OrderName']").val();var包= []；//var count = $(#packages> .form-group").length;//您可以使用它来检查包裹数$(#packages> .form-group").each(function(index，item){var包= {}package.Pid = $(item).find("input [name ='Packages [" +索引+] .Pid']").val();package.PackageTitle = $(item).find("input [name ='Packages [" +索引+] .PackageTitle']").val();packages.push(package);});//添加嵌套实体OrderViewModel.Packages =软件包；$ .ajax({类型:"POST"，url:"/Home/Showsummary"，//记住将控制器更改为您自己的控制器.数据:OrderViewModel，成功:功能(数据){console.log(数据)$('#page_3').html(data);}，失败:功能(响应){console.log(response.responseText);}，错误:功能(响应){console.log(response.responseText);}});});}); 

   通过使用上面的代码，我还可以获得提交实体，您可以引用它.

   I am using some javascript to post my form but I dont want to have to submit each form field is there a way I can serlize this to an object in .net so that it will bring in all the form contents.

   section Scripts {
       <script>
       function confirmEdit() {
               swal({
                   title: "MIS",
                   text: "Case Created your Case Number is " + $("#Id").val(),
                   icon: "warning",
                   buttons: true,
                   dangerMode: true,
               }).then((willUpdate) => {
                   if (willUpdate) {
                       $.ajax({
                           url: "/tests/edit/" + $("#Id").val(),
                           type: "POST",
                           data: {
                               Id: $("#Id").val(),
                               Name: $("#Name").val()
                           },
                           dataType: "html",
                           success: function () {
                               swal("Done!", "It was succesfully edited!", "success")
                                   .then((success) => {
                                       window.location.href = "/tests/index"
                                   });
   
                           },
                           error: function (xhr, ajaxOptions, thrownError) {
                               swal("Error updating!", "Please try again", "error");
                           }
                       });
                   }
               });
           }
       </script>
       }
   

   解决方案

   Please refer to the following methods to submit the form data to action method:

   1. using the serialize() method to serialize the controls within the form.

      @model MVCSample.Models.OrderViewModel
      
       <h4>OrderViewModel</h4>
       <hr />
       <div class="row">
           <div class="col-md-4">
               <form asp-action="Showsummary" asp-controller="Home" method="post" class="signup-form">
                   <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                   <div class="form-group">
                       <label asp-for="OrderId" class="control-label"></label>
                       <input asp-for="OrderId" class="form-control" />
                       <span asp-validation-for="OrderId" class="text-danger"></span>
                   </div>
                   <div class="form-group">
                       <label asp-for="OrderName" class="control-label"></label>
                       <input asp-for="OrderName" class="form-control" />
                       <span asp-validation-for="OrderName" class="text-danger"></span>
                   </div>
                   <div id="packages">
      
                       @for (int i = 0; i < Model.Packages.Count; i++)
                       {
                       <div class="form-group">
                           <label asp-for="@Model.Packages[i].Pid" class="control-label"></label>
                           <input asp-for="@Model.Packages[i].Pid" class="form-control" />
                           <span asp-validation-for="@Model.Packages[i].Pid" class="text-danger"></span>
                           <br />
                           <label asp-for="@Model.Packages[i].PackageTitle" class="control-label"></label>
                           <input asp-for="@Model.Packages[i].PackageTitle" class="form-control" />
                           <span asp-validation-for="@Model.Packages[i].PackageTitle" class="text-danger"></span>
                       </div> 
                       }
      
                   </div> 
               </form>
           </div>
       </div>
       <div>
           <input type="button" id="summary" value="Summary" />
           <div id="page_3">
           </div>
       </div>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       <script>
           $(function () {
               $("#summary").click(function () {
                   console.log("calling summary");
                   event.preventDefault();  
                   $.ajax({
                       type: "POST",
                       url: "/Home/Showsummary",  //remember change the controller to your owns.
                       data: $("form.signup-form").serialize(), 
                       success: function (data) {
                           console.log(data) 
                       },
                       failure: function (response) {
                           console.log(response.responseText);
                       },
                       error: function (response) {
                           console.log(response.responseText);
                       }
                   });
      
               });
           });
       </script>
      

   Code the the action method:

      [HttpPost]
       public PartialViewResult Showsummary(OrderViewModel model)
       {
           try
           {
               //...
               return PartialView("OrderSummary", model);
           }
           catch
           {
               return PartialView("OrderSummary", model);
           }
       }
   

   After clicking the button, the result like this:

   As we can see that, we could get the element's value in the form and even the nested entity.

   Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

   2. Create a JavaScript object, and post it to action method.

   Change the JavaScript script as below:

   $(function () {
       $("#summary").click(function () {
           console.log("calling summary");
           event.preventDefault();
           //create a object to store the entered value.
           var OrderViewModel = {};
           //using jquery to get the entered value.
           OrderViewModel.OrderId = $("input[name='OrderId']").val();
           OrderViewModel.OrderName = $("input[name='OrderName']").val();
   
           var packages = []; 
           //var count = $("#packages>.form-group").length; //you could use it to check the package count            
           $("#packages>.form-group").each(function (index, item) {
               var package = {}
               package.Pid = $(item).find("input[name='Packages[" + index + "].Pid']").val();
               package.PackageTitle = $(item).find("input[name='Packages[" + index + "].PackageTitle']").val();
               packages.push(package);
           });
           //add the nested entity
           OrderViewModel.Packages = packages;
   
           $.ajax({
               type: "POST",
               url: "/Home/Showsummary",  //remember change the controller to your owns.
               data: OrderViewModel,  
               success: function (data) {
                   console.log(data)
                   $('#page_3').html(data);
               },
               failure: function (response) {
                   console.log(response.responseText);
               },
               error: function (response) {
                   console.log(response.responseText);
               }
           });
   
       });
   });
   

   By using the above code, I could also get the submit entity, you could refer to it.

   这篇关于如何在JavaScript asp.net中序列化表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！