Question

所以我有部分视图的模态，其中是嵌套的WebGrid（用户可以选择的选项列表）和BeginForm（设置选定的值并发布后）。我有一个问题，我的模态窗口在分页后关闭，所以在SO上我被告知以这种方式编写我的代码 - ＆gt;

PartailView（模态）：

@model BTGHRM.Models.HarmingFactorsModel

@{
    var db = new HRMEntities();
    WebGrid grid = new WebGrid(db.CatalogHarmingFactors, canPage: true, canSort: false, rowsPerPage: 5, ajaxUpdateContainerId: "deploymentsGrid1");
}


<div id="deploymentsGrid1">
    @if (db.CatalogHarmingFactors.Any())
    {
        @grid.GetHtml(
        tableStyle: "table",
        headerStyle: "table_HeaderStyle",
        footerStyle: "table_PagerStyle",
        rowStyle: "table_RowStyle",
        alternatingRowStyle: "table_AlternatingRowStyle",
        selectedRowStyle: "table_SelectedRowStyle",
        columns: grid.Columns(

            grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                 @item.Nr
            </text>, style: "p20"),

            grid.Column("Description", @Resources.Localization.description, format: @<text>
                 @item.Description
            </text>, style: "p70"),


            grid.Column("", "", format: @<text>              
                <input id="select_bttnn" class="select_bttn" style="width:78px" type="button" value=@Resources.Localization.select data-nr="@item.Nr" data-description="@item.Description" />
            </text>)
                )
            )
                            }
</div>

<br />

<div class="container">

    @using (Html.BeginForm("AddHarmingFactorToList", "Health", FormMethod.Post))
    {
        @Html.HiddenFor(m => m.EmployeeId)

        @Html.TextBoxFor(m => m.Nr, Model.Nr, new { style = "width:20%", id = "Number1" })
        @Html.TextBoxFor(m => m.Description, Model.Description, new { style = "width:70%", id = "Desc1" })
        <br />
            <br />
                @Html.LabelFor(m => m.Start_date)
                @Html.TextBoxFor(m => m.Start_date, new { id = "datepicker", style = "width:25%" })
                @Html.LabelFor(m => m.End_date)
                @Html.TextBoxFor(m => m.End_date, new { id = "datepicker2", style = "width:25%" })

                <br /><br />
                <input type="submit" value="@Resources.Localization.save" style="width:78px" />
    }
    <button id="closer">@Resources.Localization.back</button>
</div>

和方法：

 public PartialViewResult _GetHarmingFactorPartial()
    {
        int userId = GetUserId("s");
        BTGHRM.Models.HarmingFactorsModel newHarmingFactor = new BTGHRM.Models.HarmingFactorsModel();
        newHarmingFactor.EmployeeId = userId;
        return PartialView("Partial/_HarmingFactorPopUp", newHarmingFactor);
    }

在主视图中调用，如：

@Html.Action("_GetHarmingFactorPartial", "Health")

现在，分页不会关闭整个模态，用户单击该按钮会按照计划将值设置为beginForm字段。但是在我的主视图中嵌套的页面编写脚本停止工作，并且sellect_button没有做任何事情，因为在分页时我在我的模态中获得了新的html。我试图将我的脚本放在每个地方，但无论是在部分脚本的部分视图中，还是在页面的开头，它都不会开始工作。

所以这是脚本：

<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            height: 400,
            width: 600,
            scrollable: false,
            show: {
                effect: "blind",
                duration: 1000
            }
        });
    });

    $(function () { 
        $(".select_bttn").click(function () {
            var nr = $(this).data('nr');
            var description = $(this).data('description');

            $("#Number").val(nr);
            $("#Desc").val(description);
        });
    });
</script>

我该如何解决这个问题？

Answer 1

使用以下代码替换按钮的单击事件逻辑：

  $("body").on('click', '.select_bttn', function () {
    alert("Click fired");
    var nr = $(this).data('nr');
    var description = $(this).data('description');

    $("#Number").val(nr);
    $("#Desc").val(description);
});

分页WebGrid后，脚本停止工作

1 个答案: