使用AJAX和javascript将动态列表模型发布回控制器

Posting back a dynamic list model to controller using AJAX and javascript

本文关键字:模型 布回 控制器 列表 动态 AJAX javascript 使用      更新时间:2023-09-26

我有一个部分视图,显示在jquery模式弹出窗口中。该视图由一个动态生成的复选框列表组成,可以包含一到多个复选框。我在尝试将模型发布回控制器时遇到问题。该模型是(T)的通用列表

以下是控制器的动作:

   <HttpPost>
    Function CertBodiesListPostBack(ByVal Model As List(Of DataModels.DataModels.CertBodyVM)) As JsonResult
        ViewBag.CourseId = Model(0).courseId
        Data_Manager.CertifyBody.SaveCertBody(Model(0).courseId, Model)
        Return Json(New With {.success = True})
    End Function

视图如下:

 @Modeltype List(Of DataModels.CertBodyVM)
 @Code
 End Code
<link href="@Url.Content("~/Content/jquery-ui-1.10.3.custom.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
   $(document).ready(function () {
    $("#btnUpdate").click(function () {
        $('#waitMessage').show();
        $.ajax({
            url: '@Url.Action("CertBodiesListPostBack", "Admin")',
            type: 'POST',
            data: JSON.stringify('@model'),
            dataType: "json",
            context: $(this),
            success: function (result) {
                $('#waitMessage').hide();
                $("#dialog-edit").dialog().dialog('close');
            },
            error: function (result) {
                alert('There was an error processing the request!!');
            }
        });
        return false;
    });
   });
 </script>
<style>
 #waitMessage {
  background:  url('../../Content/Images/animated-processing.gif')  scroll no-repeat center;
  height: 100px; width: 100px;
  position: fixed; left: 50%; top: 50%; z-index: 1000;
  margin: -25px 0 0 -25px;
  }
 </style>
 <div id="waitMessage" class="dataContainer" style="display: none;">
  <p>Saving Note</p>
 </div>
 @Using Html.BeginForm()
 @<fieldset><legend></legend>
 <table>
    <tr>
    <th>Certifying Bodies</th>
    </tr>
 @For i As Integer = 0 To Model.Count - 1
         Dim y As Integer = i
         Dim d As String = Model(y).certName
     @<tr><td style="text-align: left">@Html.CheckBoxFor(Function(model) model(y).certSelected)@Html.Label(d)@Html.HiddenFor(Function(model) model(y).certBodyId)@Html.HiddenFor(Function(model) model(y).courseId)</td></tr>
   Next
   </table>
   <input type="button" value="Save" id="btnUpdate" name="cmd" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
    <input type="button" value="Cancel" id="btncancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
    </fieldset>   
    End Using

模型如下:

    Public Class CertBodyVM
    Private _certName As String
    Public Property certName() As String
        Get
            Return _certName
        End Get
        Set(ByVal value As String)
            _certName = value
        End Set
    End Property
    Private _certSelected As Boolean
    Public Property certSelected() As Boolean
        Get
            Return _certSelected
        End Get
        Set(ByVal value As Boolean)
            _certSelected = value
        End Set
    End Property
    Private m_certBodyId As Integer
    Public Property certBodyId() As Integer
        Get
            Return m_certBodyId
        End Get
        Set(ByVal value As Integer)
            m_certBodyId = value
        End Set
    End Property
    Private m_CourseId As Integer
    Public Property courseId() As Integer
        Get
            Return m_CourseId
        End Get
        Set(ByVal value As Integer)
            m_CourseId = value
        End Set
    End Property
End Class

我是javascript和AJAX的新手,所以

如果您想使用ajax调用将视图中的模型传递给控制器,可以使用

data: $('form').serialize()

您可以指定表单的id,并将表单的id作为传递

   data: $('#myform').serialize()