在部分视图内渲染的WebGrid将引发“;“jQuery未定义”,当尝试执行基于ajax的分页或过滤时

WebGrid rendered inside partial view will raise "“jQuery is not defined”" , when trying to do ajax-based paging or filtering

本文关键字:执行 分页 ajax 过滤 jQuery 视图 WebGrid 未定义      更新时间:2024-03-06

我正在开发一个asp.net mvc5 web应用程序。我有以下内容:-1.包含@Html.Action的主视图,它调用返回部分视图的操作方法。2.在局部视图中,我定义了一个web网格。3.如果我在部分视图的网络网格中点击一个链接,如"显示详细信息"链接,将显示一个模式弹出窗口,在模式弹出窗口中,我将有另一个网络网格。我面临的问题是,如果我试图在模式弹出窗口中呈现的web网格中进行基于Ajax的排序或分页,我将得到以下错误:-

"jQuery is not defined".

主要视图如下:-

@Html.Action("GetStaffSkill", "Staff", new  {staffmasterdetails = Model.SkillID})

并且上述@Html.Action将调用以下操作方法:-

public ActionResult GetStaffSkill(.....)
  {

      var records = new PagedList<Staff>();
    //codegoes here
      return PartialView("_gridstaff",records);
  }

并且具有"显示详细信息"链接的局部视图是:-

@模型技能管理.模型.页面列表

              <div class="well">

    <div style="margin-top:17px;">
        @{
        var grid = new WebGrid(
                    canPage: true,
                    rowsPerPage: Model.PageSize,
                    canSort: true,
                    ajaxUpdateContainerId: "grid", fieldNamePrefix: "staff");
        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("Skill",canSort:false,format:
             @<text>

<a data-modal='' href="@Url.Action("ShowDetails", "Skill", new {skillmasterDetail= item.StaffID, skillsummaryView=true })   "   title='show detials'>  
Show Details</a>

最后是负责显示模式弹出的脚本:-

$(document).ready(function () {
    $(function () {
        $.ajaxSetup({ cache: false });
        //$("a[data-modal]").on("click", function (e) {
            $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true,
                    backdrop: 'static',
                    draggable: true
                }, 'show').draggable({
                    handle: ".modal-header"
                });
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
              $("input[data-autocomplete-source]").each(function () {
                  var target = $(this);
                    target.autocomplete({
                        source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000, appendTo: $("#myModal")

                   });
                });
            });
            return false;
        });

    });

那么,有人能告诉我如何迫使jQuery保持活跃并理解@Html.Action中呈现的部分视图吗?

感谢

页面代码从上到下执行。JQuery Scripts.Render可能在布局的底部。

要解决这个问题,您可以将其移动到布局cshtml页面的顶部。

但我不知道这是否是更好的解决方案,因为在页面底部渲染脚本可以防止延迟页面显示。