在尝试进行基于 ajax 的分页或过滤时，在局部视图中呈现的 WebGrid 将引发““jQuery is not defined””

Posted 2023-03-27

【中文标题】在尝试进行基于 ajax 的分页或过滤时，在局部视图中呈现的 WebGrid 将引发““jQuery is not defined””

【英文标题】：WebGrid rendered inside partial view will raise "“jQuery is not defined”" , when trying to do ajax-based paging or filtering

【发布时间】：2015-04-22 08:53:50

【问题描述】：

我正在开发一个 asp.net mvc5 Web 应用程序。我有以下内容：- 1. 包含@html.Action的主视图，调用一个返回部分视图的动作方法。 2. 在局部视图中，我定义了一个网络网格。 3.如果我在局部视图的 webgrid 中单击诸如“显示详细信息”链接之类的链接，将显示一个模式弹出窗口，并且在该模式弹出窗口内我将有另一个 web 网格。 我面临的问题是，如果我尝试在模式弹出窗口内呈现的网络网格内进行基于 Ajax 的排序或分页，我将收到以下错误：-

"jQuery is not defined".

主视图如下：-

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

而上面的@Html.Action会调用下面的action方法：-

public ActionResult GetStaffSkill(.....)
  


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

以及带有“显示详细信息”链接的部分视图是：-

@model SkillManagement.Models.PagedList

              <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 呈现的部分视图吗？

谢谢

【参考方案1】：

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

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

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