0

我遇到了 Grid.MVC Ajax 的问题。我找到了一个使用它的项目，我正在尝试将它调整到我的项目中。事实是加载网格时出现错误

Uncaught TypeError: Cannot read property 'length' of undefined
at HTMLDivElement.<anonymous> (<anonymous>:1:382)
at Function.each (jquery-3.3.1.js:354)
at jQuery.fn.init.each (jquery-3.3.1.js:189)
at jQuery.fn.init.gridmvc (<anonymous>:1:95)
at HTMLAnchorElement.gridQuestionInit (<anonymous>:8:23)
at Object.success (jquery.unobtrusive-ajax.min.js:15)
at fire (jquery-3.3.1.js:3268)
at Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398)
at done (jquery-3.3.1.js:9305)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.js:9548)

当我想使用分页或过滤网格功能时，什么也没有发生。排序只是刷新页面，里面没有网格。

我在谷歌上搜索了很多，人们说视图中脚本的顺序和位置很重要，它可以解决这样的问题。

所以我检查了所有脚本链接，将它们与网格放在同一页面上，更改顺序......但是除了有时出现在 gridmvc.js 中的 TypeError 之外没有任何变化。

这是带有网格的视图

@using GridMvc.Html
@using GridMvc.Sorting
@model Grid.Mvc.Ajax.GridExtensions.AjaxGrid<Site_Emission_Generique.Models.question>


<p>
    @Ajax.ActionLink("Créer une nouvelle question", "CreerQuestion", null, new AjaxOptions
    {
        UpdateTargetId = "myModalBody",
        LoadingElementId = "divLoading",
        OnBegin = "onAjaxBegin",
        OnComplete = "onAjaxComplete"
    }, new { @class = "btn btn-primary", @data_toggle = "modal", data_target = "#myModal" })
</p>

@Html.Grid(Model).Named("ast").EmptyText("Aucune donées à afficher").Columns(columns =>
{

    columns.Add(c => c.NumeroQuestion).Titled("Numéro").RenderValueAs(c =>
Ajax.ActionLink(c.NumeroQuestion, "AfficherQuestion", new { id = c.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete"
}, new { @class = "glyphicon-edit", @data_toggle = "modal", data_target = "#myModal" })).Encoded(false).Sortable(true).Sanitized(false).Filterable(true);

    columns.Add(c => c.QuestionAnimateur).Titled("Question");
    columns.Add(c => c.theme.IntituleTheme).Titled("Thème");
    columns.Add(c => c.categorie.IntituleCategorie).Titled("Categorie");
    columns.Add(c => c.typequestion.IntituleTypeQuestion).Titled("Type");
    columns.Add(c => c.statusquestion.IntituleStatusQuestion).Titled("Statut");
    columns.Add(c => c.difficulte.IntituleCourtDifficulte).Titled("Difficulté");
    columns.Add().Titled("Media").RenderValueAs(c => { if (c.MediaImg != null || c.MediaSon != null || c.MediaVideo != null) return "oui"; return "non"; });
    columns.Add().Titled("Source").RenderValueAs(c => { if (c.Source1 != null || c.Source2 != null || c.Source3 != null) return "oui"; return "non"; });

    columns.Add().Encoded(false).Sortable(false).Sanitized(false).Filterable(false).SetWidth(10).RenderValueAs(model =>
Ajax.ActionLink("M", "ModifierQuestion", new { id = model.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete"
}, new { @class = "glyphicon-edit", @data_toggle = "modal", data_target = "#myModal" }));

    columns.Add().Encoded(false).Sortable(false).Sanitized(false).Filterable(false).SetWidth(10).RenderValueAs(model =>
Ajax.ActionLink("S", "SupprimerQuestion", new { id = model.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete",
}, new { @class = "glyphicon-remove", @data_toggle = "modal", data_target = "#myModal" }));

    columns.Add().Encoded(false).Sortable(false).Sanitized(false).Filterable(false).SetWidth(10).RenderValueAs(model =>
Ajax.ActionLink("P", "AfficherProposition", "Home", new { idQuestion = model.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete"
}, new { @class = "glyphicon-remove", @data_toggle = "modal", data_target = "#myModal" }));

}).WithPaging(10).Sortable(true).Filterable(true).WithMultipleFilters().SetLanguage("fr")


<script src="~/Scripts/URI.js"></script>
<script src="~/Scripts/gridmvc.min.js"></script>
<script src="~/Scripts/gridmvc-ext.js"></script>
<script src="~/Scripts/ladda-bootstrap/spin.min.js"></script>
<script src="~/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="~/Scripts/gridmvc.lang.fr.js"></script>

<script>

   function gridQuestionInit() {
        var gridName = 'ast';
        var pagingUrl = '@Url.Action("GridPager","Home")';

       $('.grid-mvc').gridmvc();
       pageGrids[gridName].ajaxify({
            getData: pagingUrl,
            getPagedData: pagingUrl
        });
    }
</script>

编辑： Jquery 3.3.1 链接在我的布局中。

控制器

public ActionResult GetGrid()
{
    var items = db.question.Where(x => x.statusquestion.IntituleStatusQuestion != "Supprimée").OrderByDescending(x => x.idQuestion);
    var grid = gridMvcHelper.GetAjaxGrid<question>((IOrderedQueryable<question>)items);

    return PartialView(GRID_QUESTION_PATH, grid);
}

[HttpGet]
public ActionResult GridPager(int? page)
{
    var items = db.question.Where(x => x.statusquestion.IntituleStatusQuestion != "Supprimée").OrderByDescending(x => x.idQuestion);
    var grid = gridMvcHelper.GetAjaxGrid<question>((IOrderedQueryable<question>)items, page);
    object jsonData = gridMvcHelper.GetGridJsonData(grid, GRID_QUESTION_PATH, this);

    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

我被这个问题困扰了一个多星期。如果您知道如何解决它或任何想法，请分享。

谢谢

Edit2 @War10ck 由 Ajax.ActionLink 呈现的前端 JS 示例

    <a class="glyphicon-edit" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/AfficherQuestion/28">ttttt</a>

   <a class="glyphicon-edit" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/ModifierQuestion/28">M</a>

    <a class="glyphicon-remove" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/SupprimerQuestion/28">S</a>

    <a class="glyphicon-remove" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/AfficherProposition?idQuestion=28">P</a>

编辑3

我试图查看 JQuery 是否找到网格。所以我把 alert(JSON.stringify($('.grid-mvc'))); 之前 $('.grid-mvc').gridmvc();

结果

    {"0":{},"1":{},"length":2,"prevObject":
{"0":
{"location":
{"href":"http://localhost:50866/Home","ancestorOrigins":{},"origin":"http://localhost:50866","protocol":"http:","host":"localhost:50866","hostname":"localhost","port":"50866","pathname":"/Home","search":"","hash":""},"jQuery110201876682714105331":1},"context":
{"location":
{"href":"http://localhost:50866/Home","ancestorOrigins":{},"origin":"http://localhost:50866","protocol":"http:","host":"localhost:50866","hostname":"localhost","port":"50866","pathname":"/Home","search":"","hash":""},"jQuery110201876682714105331":1},"length":1},"context":
{"location":
{"href":"http://localhost:50866/Home","ancestorOrigins":{},"origin":"http://localhost:50866","protocol":"http:","host":"localhost:50866","hostname":"localhost","port":"50866","pathname":"/Home","search":"","hash":""},"jQuery110201876682714105331":1},"selector":".grid-mvc"}

似乎 JQuery 找到了网格。如果我在此行之后尝试它，则不会发生任何事情。所以，我认为数据问题一定是.gridmvc()

编辑4

我解决了这个问题。在包含网格的父页面中，在网格本身之前有一个带有“grid-mvc”类的 div。这就是脚本不起作用的原因。

现在我必须修复另一个错误。没有找到动作 GridPager 但我认为它会更容易解决。

4

1 回答 1

0

从下面的 div 类中删除 grid-mvc

  <div class=" hidden-xs grid-mvc">
        @{
            HtmlGrid<OnlineWeb.Models.usp_Proc_Result> mvcGrid = null;
            GridMvc.Pagination.GridPager pager = new GridMvc.Pagination.GridPager();
        }
于 2018-10-09T13:32:38.207 回答