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

Question

I have a partial view that displays in a jquery modal popup window. The view is made up of a dynamically generated list of checkboxes and can contain one to many checkboxes. I am having a problem with trying to post the model back to the controller. The model is a generic list(of T)

Below is the controller action:

   <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

and the view view is like this:

 @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

And the model is as Follows:

    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

I am new to javascript and AJAX so

Answer 1

If you want to pass the model on view to the controller using ajax call you can use

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

You can specify id to form and pass id of the form as

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