单击事件未在部分视图内的WebGrid中的链接上触发

时间:2018-08-23 12:26:12

标签: javascript jquery asp.net-mvc-4 razor

我有一个局部视图,其中WebGrid中有一个链接可以打开一个对话框模式框。 以前,我在非局部视图上运行时,代码运行良好。 但是,当我将相同的代码转移到局部视图时,单击事件不起作用。

请参阅WebGrid的第4列,那里的click事件不会触发并进入脚本代码。我尝试将警报放在函数声明的开头进行检查,但javascript无法正常工作。 相同的代码正在使用非局部视图,但在此处不起作用。

以下是我的部分视图的代码:

    @model LpResources.Models.ATMCRM.ATMCRMProcedureDetails

    @{   var grid = new WebGrid(
         canPage: true,
         rowsPerPage: 30,
         canSort: true,
         ajaxUpdateContainerId: "result"
     );
      grid.Bind(Model.GetReviewDetails, autoSortAndPage: true, rowCount: Model.GetReviewDetails.Count());
      grid.Pager(WebGridPagerModes.All);
     }

     <html>
     <head>
        <link href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <meta name="viewport" content="width=device-width" />
        <title>SDMDesk</title>
     </head>
     <body>
   <div class="row">
    <div class="col-md-1 col-sm-1 col-xs-1 "></div>
    <div class="col-md-10 col-sm-10 col-xs-10 ">
        <div class="panel  panel-primary">
            <div class="panel-heading" style="text-align:left">
                <h3 class="panel-title">Work-done Details</h3>
            </div>
            <div class="panel-collapse collapse in" role="tabpanel">
                <div class="panel-body">
                    <div class="table-responsive" style="text-align: left">
                        @grid.GetHtml(tableStyle: "table table-hover table-bordered",
                             headerStyle: "text-align: center",
                             mode: WebGridPagerModes.All,
                             firstText: "<< First",
                             previousText: "< Prev",
                             nextText: "Next >",
                             lastText: "Last >>",
                                columns: grid.Columns(
                                grid.Column("CALLTICKETNUMBER", " CallTicket Number"),
                                grid.Column("CALLTICKETDATE", "CallTicket Date"),
                                grid.Column("CUSTOMERNAME", "Customer"),

                                grid.Column(header: "Action",
                                            format: @<text><a data-value='@item.CALLTICKETNUMBER' href='javascript:void(0)' class='btnEdit'>Review</a></text>)))

                        <div id="dialog" title="edit view" style="overflow: hidden;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<hr />
     </body>
     </html>
     @section Scripts{
         <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
         <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

         <script type="text/javascript">
    $(function () {
        var url = '@Url.Action("GetDetailByTicket", "BankingService")';
        var CALLTICKETNUMBER = 0;
        $(document).on('click', '.btnEdit', function () {
            CALLTICKETNUMBER = $(this).attr("data-value");
            $('#dialog').dialog('open');
        });
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Review Call Ticket',
            modal: true,
            open: function (event, ui) {
                // Load partial view _GridEditPartial
                $(this).load(url, { CALLTICKETNUMBER: CALLTICKETNUMBER });
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
});   
</script>
}

0 个答案:

没有答案