Question

我有一个部分观点：

@model List<ADE_ATRS.Models.DistrictsSummaryStatistic>
@{
    bool isPrint = (bool)ViewData["isPrint"];
    string printHeader = ViewData["printHeader"].ToString();
    int totalCount = 0;
    if (ViewData["totalCount"] != null)
    {
        totalCount = (int)ViewData["totalCount"];
    }
}
@if (isPrint)
{
    @Styles.Render("~/Print/css")
}
<div class="content">
    @if (isPrint)
    {
        <div>
            <h2>
                @printHeader
            </h2>
        </div>
    }
    <div>
        <table>
            <thead>
                <tr>
                    <th colspan="2">
                        Counts
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Total Count
                    </td>
                    <td style="width: 75px;">
                        @totalCount
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        District
                    </th>
                    <th style="width: 50px;">
                        LEA
                    </th>
                    <th style="width: 75px;">
                        Teachers
                    </th>
                    <th style="width: 75px;">
                        Admins
                    </th>
                    <th style="width: 75px;">
                        Total
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var district in Model)
                {
                    <tr>
                        <td>
                            @district.Name
                        </td>
                        <td>
                            @district.LEA
                        </td>
                        <td class="text-right">
                            @district.TeacherCount
                        </td>
                        <td class="text-right">
                            @district.AdminCount
                        </td>
                        <td class="text-right">
                            @district.TotalCount
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

...这是在标准视图中通过AJAX调用的（脚本在_Layout.cshtml中呈现）：

@{
    ViewBag.Title = "Statistics Reports Summaries";
}
<script type="text/javascript">
    $(document).ready(function () {
        $('.error').fadeIn(2000);
        $(document).ajaxStart(function () {
            $('#loading-districts-summary').toggle('slow');
        });
        $(document).ajaxComplete(function () {

        });

        $.ajax({
            url: '/statistics/_DistrictCountsSummary',
            async: true,
            dataType: 'html',
            success: function (data) {
                $('#loading-districts-summary').toggle('slow');
                $('#districts-data-export').toggle('slow');
                $('#placeholder-districts-summary').html(data);
            }
        });
    });
</script>
<div class="content">
    <h2>
        Statistics Reports Summaries</h2>
    <fieldset>
        <legend>Districts Summary</legend>
        <div id="districts-data-export" class="export">
            @Html.ActionLink("Export to PDF", "Districts_Summary_PDF", true, new { @target = "new" })
            @Html.ActionLink("Export to CSV", "Districts_Summary_CSV")
            <span class="right">
                @Html.ActionLink("View More", "Districts")
            </span>
        </div>
        <div id="placeholder-districts-summary">
            <div id="loading-districts-summary" style="text-align: center; display: none;">
                @Html.Partial("_Loading")
            </div>
        </div>
    </fieldset>
</div>

我不相信需要Controller方法来解决这个问题，但在这里它们只是以防万一：

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult _DistrictCountsSummary(bool? isPrint)
    {
        string printHeader = "Districts Summary Report for " + GenericHelpers.SchoolYearString;
        ViewData.Add("printHeader", printHeader);
        if (isPrint.HasValue && (bool)isPrint)
            ViewData.Add("isPrint", true);
        else
            ViewData.Add("isPrint", false);
        var districts = DistrictsSummaryStatistic.GetDistrictsSummary();
        ViewData.Add("totalCount", DistrictsSummaryStatistic.GetTotalCount(districts));
        return PartialView(districts);
    }

我正在尝试在部分视图中为底部表实现jQuery DataTables，但我的尝试并没有成功。我已尝试在标准视图和部分视图中呈现DataTables的脚本，但脚本未在表上生效。我环顾四周寻找一个很好的例子，但我找不到任何关于如何将DataTables应用于AJAX渲染的局部视图的内容。如果知道某种程度的帮助，我正在使用jQuery 2.0.3。

非常感谢任何帮助！

Answer 1

您的脚本位于document.ready中，但由于您的部分视图已加载，因此脚本不会影响您的部分。我如何解决这个问题是在函数

中放置我想要运行的脚本

function AttachScript(){
    //your script here
}

然后在加载局部视图后调用该函数

$('#placeholder-districts-summary').html(data);
AttachScript();

希望这有帮助。

编辑：

我已经了解到您可以将click事件附加到文档并以这种方式附加脚本

 $(document).on('click', '.clsButton', function(){
     //do something
 });

使用它附加到文档的脚本，即使它在页面加载后加载的部分上也会触发。

如何将jQuery DataTable应用于MVC4中的AJAX呈现局部视图？

1 个答案: