javascript - 动态复选框列表不显示数据

Question

我正在尝试在按钮单击事件上生成动态复选框列表。在我的索引页面中它显示数据，但在网站页面中它不显示数据。这是图像。

这是代码，我可以提供更多详细信息。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
@using System.Diagnostics.Eventing.Reader
@using RSDMS.DataAccess.Entities
@using RSDMS.Report.Model
@using RSDMS.ViewModel
@{
        ViewBag.Title = "Report Module";
        Layout = "~/Views/ReportModule/_ReportModule.cshtml";
        var DivisionList = (IEnumerable<VmDivision>)ViewBag.DivisionList;
        var DistrictList = (IEnumerable<VmDistrict>)ViewBag.DistrictList;
    }
<h2 style="color: #317eac; margin-top: -5% !important">General Filter</h2>
<div class="panel panel-info class" style="height: 650px; width: 274px; margin-top: 0 !important">
    <div class="panel-heading" style="background: #1995dc; text-decoration: solid;">Division</div>
    <div class="panel-body">

        <div>

            @using (@Html.BeginForm())
            {
                if (DivisionList != null)
                {
                    foreach (var p in DivisionList)
                    {
                        <table>
                            <tr>
                                <td>
                                   @Html.CheckBoxFor(it => p.IsChecked, new {Style = "vertical-align:3px}", value = p.Id})
                                 </td>
                                <td>
                                    @Html.HiddenFor(it => p.Id)
                                    @Html.DisplayFor(it => p.Name)
                                </td>

                            </tr>
                        </table>

                    }
                }

            }
        </div>

    </div>
</div>
<div class="panel panel-info class" style="height: 650px; width: 274px; margin-top: -670px !important; margin-left: 300px !important;">
    <div class="panel-heading" style="background: #1995dc; text-decoration: solid;">District</div>
    <div id="district" class="panel-body ">

            @using (@Html.BeginForm())
            {
                if (DistrictList != null)
                {
                    foreach (var q in DistrictList)
                    {
                        <table>
                            <tr>
                                <td>
                                    @Html.CheckBoxFor(it => q.IsChecked, new { Style = "vertical-align:3px}", value = q.DistId })
                                </td>
                                <td>
                                    @Html.HiddenFor(it => q.DistId)
                                    @Html.DisplayFor(it => q.DistName)
                                </td>

                            </tr>
                        </table>

                    }
                }
            }

    </div>
</div>
<div class="panel panel-info class" style="height: 650px; width: 274px; margin-top: -670px !important; margin-left: 600px !important;">
    <div class="panel-heading" style="background: #1995dc; text-decoration: solid;">Upazila</div>
    <div class="panel-body">
        <label><strong><input type='checkbox'/>Upazila</strong></label>
    </div>

</div>
<div>
    <input type="button" class="k-button k-primary" id="bttn_Click" value="Filter District" style="width: 22%;" />
</div> 
<div class="col-md-4 col-md-offset-3 text-center">
    <a class="k-button k-primary" style="margin-left: 610px; margin-top: -350% !important; ; width: 30%;" href="@Url.Action("Index", "ReportModule")" title="FILTER">Filter</a>
</div>
<script>
    $(document).ready(function () {

        $('#bttn_Click').click(function () {

            var divisionListVal = null;
            divisionListVal = [];

            $('input:checkbox:checked').each(function () {
                divisionListVal.push($(this).attr('value'));
            });

            $.ajax({
                type: "post",
           url: '@Url.Action("GetDistricts", "ReportModule", new AjaxOptions { HttpMethod = "POST", UpdateTargetId ="#district"})',//"/ReportModule/GetDistricts",
                data: { Id: divisionListVal },
                datatype: "json",
                traditional: true               

            });

        });

    });

</script>

这里是ajax调用GetDistricts的代码-

[HttpPost]

public ActionResult GetDistricts(int[] Id)
        {
            IEnumerable<VmDistrict> DistrictList = null;
            foreach (var Districts in Id.Select(selectedId =>  _districtManager.GetCascadeDistrict(selectedId)))
            {
                DistrictList = from s in Districts
                    select new VmDistrict
                    {
                        DistName = s.Name,
                        DistId = s.Id,
                        IsChecked = false
                    };
            }

            ViewBag.DistrictList=DistrictList;

            return PartialView("Index", "ReportModule");
        }  

Answer 1

This line will help you :)

<label for="@Model.ServiceCategoryCustomers[i].IsChecked" class="checkbox-inline"> @Html.CheckBoxFor(m => m.ServiceCategoryCustomers[i].IsChecked, htmlAttributes: new { value = @Model.ServiceCategoryCustomers[i].Name })@Model.ServiceCategoryCustomers[i].Name</label>