时间戳

首页 > 解决方案 > 如何在 Post 方法中获取模型内动态生成的复选框的值

jquery - 如何在 Post 方法中获取模型内动态生成的复选框的值

问题描述

我需要在表单提交时传回一组选中的复选框。问题是，复选框不是模型的一部分，它们是在用户执行某些操作后由 jquery 生成的。复选框在页面上正确出现。如何在发布事件时在我的模型中获取已检查的属性。

 @model Models.MainModule
    @using (Html.BeginForm("Detail", "SomeControllerName", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
          @Html.HiddenFor(m => Model.SubCheckList)
         <div id="CheckList"></div>

        }

用于复选框的 Jquery：

$(document).ready(function () {
        $("#ModID").change(function () {
            var ModId = $('#ModID').val();
            $.ajax({
                type: "GET",
                url: "/SomeController/SomeAction",
                data: { Mid: ModID },
                datatype: "json",
                traditional: true,

                success: function (data) {
                    $('#CheckList').empty();
                    $.each(data, function (key, value) {
                        var li = $('<li><input type="checkbox" name="' + key + '" id="' + value.subID + '"/>' +
                            '<label for="' + key + '"></label></li>');
                        li.find('label').text(value.subName);
                        $('#CheckList').append(li);
                    });
                }
            });

        });
    });

模型类

 namespace Models
    {
        public class MainModule
        {
            public int MainID { get; set; }
            public string MainName { get; set; }
      public List<MyModule> SubCheckList { get; set; }  
        }

 public MainModule()
        {
            this.SubCheckList = new List<MyModule>();
        }       

    public class MyModule
        {
            public int id { get; set; }  

            public string name { get; set; }
        }
    }

控制器代码：

[HttpPost]
  public ActionResult Detail(MyModule myModuleObj)
  {
    GetViewBagData();
     return View();
  }

标签： jqueryasp.net-mvc

解决方案

您可以通过 AJAX 表单提交来完成。

首先根据您的要求为您的表单添加一个名称。例如，“formMainModule”

首先为每个复选框添加一个类“chkBxClass”。这是为了获取稍后检查的复选框值。

在jQuery中

var checkedIds = $('.chkBxClass:checkbox:checked').map(function () { return this.value; }).get().join(','); 

$.ajax({
    type: 'POST',
    data: $('#formMainModule').serialize() + '&checkedIds=' + checkedIds,
    url: '/SomeControllerName/Detail',
    success: function (result) {
             }
    });

在控制器中，

[HttpPost]
public ActionResult Detail(MyModule myModuleObj, string[] checkedIds)
{
     // Here you can add checked ids to your module
}

推荐阅读