Question

我正在使用asp.net mvc5 Web应用程序，我正面临一个问题，因为如果我在webgrid中进行ajax分页，则jquery不会加载。我得到了以下。有网格的主视图： -

    @model SkillManagement.Models.PagedList<SkillManagement.Models.Phone>
    @{
        ViewBag.Title = "Phone List";
    }

    <h1>Phone List</h1>
    <div class="well">
       @using (Html.BeginForm("index", null, FormMethod.Get))
        {

            <div style="margin-top:17px;">
                @{
                var grid = new WebGrid(
                            canPage: true,
                            rowsPerPage: Model.PageSize,
                            canSort: true,
                            ajaxUpdateContainerId: "grid");

                grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
                grid.Pager(WebGridPagerModes.All);

                @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
                fillEmptyRows: false,
                tableStyle: "table table-bordered table-hover",
                mode: WebGridPagerModes.All,
                columns: grid.Columns(
                  grid.Column("PhoneId", "ID"),
                 //code goes here
                  grid.Column(header: "Action", canSort: false, style: "action",
                    format: @<text>
                       @Html.Raw("<a data-modal='' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")
                       @Html.Raw("<a data-modal='' href='/phone/edit/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
                       @Html.Raw("<a data-modal='' href='/phone/delete/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
                    </text>)

                ));
                }


            </div>
        }
    </div>


    <!-- modal placeholder-->
    <div id='myModal' class='modal fade in'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div id='myModalContent'></div>
            </div>
        </div>
    </div>
@section scripts{
    @Scripts.Render("~/scripts/appjs/phones.js")
}

和_partial视图将呈现为模式弹出窗口： -

@model SkillManagementTDMGroup.Models.Phone

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="modal-title">Edit Phone</h3>
    </div>


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(m=>m.PhoneId)

        <div class="modal-body">

           //code goes here...
            <input class="btn btn-primary" type="submit" value="Save" />
            <button class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    }
    <script>
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
    </script>

这里是phones.js： -

$(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');

                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            var isValid = true; // assume all OK
            $('form').validate(); // perform validation on the form
            $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
                if (!$(this).valid()) {
                    isValid = false; // signal errors
                    return false; // break out of loop   
                }
            })
            if (!isValid) {
                return false; // exit
            }
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        //location.reload();
                        alert(result.message);
                    } else {

                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

现在当我访问主视图时，模态弹出窗口效果很好，但是如果我在webgrid中做一些分页并且我点击将部分视图渲染为模态弹出窗口，我将得到以下异常： -

Unhandled exception at line 51, column 9 in http://localhost:58652/phone/edit/3

0x800a1391 - JavaScript runtime error: '$' is undefined

在局部视图内的以下脚本部分： -

<script>
            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");
        </script>

Answer 1

这个问题已得到修复，对我来说很好....

＆＃34;如果我在WebGrid中进行基于ajax的分页，模态弹出将不显示＆＃34;

或

＆＃34;当导航到第二页并点击编辑，删除或查看时，它显示正常页面而不是以模态弹出显示＃34;。

更改phones.js中的代码：

这

$("a[data-modal]").on("click", function (e) {

要

$(document).on("click","a[data-modal]", function (e) {

享受编码................

如果我在WebGrid中执行基于ajax的分页，则Modal Popup不会显示

1 个答案: