加载ajax成功的部分视图

Question

我正在尝试使用相应的视图动态生成复选框（图片：选择报告）另一个复选框的更改/点击事件（图片：报告类型）。页面加载我使一个复选框为true，并根据它的数据动态生成复选框。 这是此页面的图像： 但是当我点击另一个复选框时，它没有更新面板并显示以前的数据。这是图像：

这是我的索引页

 @using RSDMS.ViewModel
@{
    ViewBag.Title = "Reports";
    Layout = "~/Views/ReportModule/_ReportModule.cshtml";
    var ReportTypeList = (IEnumerable<VmReportType>)ViewBag.ReportType;
}
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

<h2 style="color: #317eac; margin-top: -8% !important">Reports </h2>

<div class="panel panel-info class" style="margin-top: 0 !important;width: 99%">
    <div class="panel-heading" style="background: #1995dc; text-decoration: solid;">Report Type</div>
    <div class="panel-body reportTypeDiv">
        @using (@Html.BeginForm(new { id = "reportType" }))
        {
            if (ReportTypeList != null)
            {

                <table>
                    <tr>
                        @foreach (var p in ReportTypeList)
                        {

                            <td>

                                @Html.CheckBoxFor(it => p.IsCheck, new { Style = "vertical-align:3px", value = p.Id, @class = "checkbox"})

                            </td>
                            <td>
                                @Html.HiddenFor(it => p.Id)
                                @Html.DisplayFor(it => p.Name)
                            </td>



                        }
                    </tr>
                </table>
            }

        }
    </div>

</div>
<div class="panel panel-info class" style="height: 650px; width: 300px">

    <div class="panel-heading" style="background: #1995dc; text-decoration: solid;">Select Report</div>
    <div class="panel-body listReport" id="lstReport">

        @Html.Partial("_ListOfReports")

    </div>
    <div class="CrystalReport">
       <iframe class="CrystalReportViewer1"> </iframe>
    </div>
</div>
<script type="text/javascript">

    $(function () {
        $('.checkbox').change(function () {

            var selectedValue = this.value;

            $('input:checkbox:checked').each(function () {

                if (this.value == selectedValue) {
                    $(this).attr('checked', 'checked');

                } else {
                    $(this).removeAttr('checked');

                }
            });
            $(this).attr('checked', 'checked');

            $.ajax({
                url: '@Url.Action("LoadReports", "Reports", new AjaxOptions { UpdateTargetId = "lstReport" })',
                type: 'POST',
                data: { Id: selectedValue },
                success: function () {

                   swal("ok", " ", "success");
                },
                error: function () {
                    sweetAlert("not ok", " ", "error");
                }
            });


        });
    });

</script>

这是我的部分页面

@using RSDMS.ViewModel

@{
    var ReportList = (IEnumerable<VmReport>)ViewBag.ListOfReports;
}

@using (@Html.BeginForm())
{
    if (ReportList != null)
    {
        foreach (var q in ReportList)
        {
            <table id="selectReport">
                <tr>
                    <td>

@Html.CheckBoxFor(it => q.IsChecked, new { Style = "vertical-align:3px}", type = "checkbox", value = q.ReportId, @class ="checkboxReport" })
                    </td>
                    <td>
                        @Html.HiddenFor(it => q.ReportId)
                        @Html.DisplayFor(it => q.Name)
                    </td>

                </tr>
            </table>

        }
    }
}

这是我的控制器代码

public ActionResult Index()
    {
        var listReportType = new List<VmReportType>  
        {  
             new VmReportType{Id = "A", Name = "A-Road Related", IsCheck = true},  
             new VmReportType{Id = "B", Name = "B- Road+Structure Related", IsCheck = false},  
             new VmReportType{Id = "C", Name = "C- Need, Scheme & Progress Related", IsCheck = false},  
             new VmReportType{Id = "D", Name = "D- GC/RM/etc. Related", IsCheck = false},  
             new VmReportType{Id = "E", Name = "E- RIMMU", IsCheck = false} 
          };
        ViewBag.ReportType = listReportType;
        LoadReports("A");
        return PartialView();
    }

[HttpPost]

public ActionResult LoadReports(string id)
    {
        var reports = _manager.LoadReports(id);
        ViewBag.ListOfReports = reports;

        return PartialView("_ListOfReports", ViewBag.ListOfReports);

    }

这是ajax响应的图像