Grid.Mvc Ajax JQuery Uncaught TypeError

时间：2018-04-23 15:27:03

标签： jquery ajax asp.net-mvc grid.mvc

我遇到了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)

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

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

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

这是带网格的视图

@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（）

Edit4

我解决了这个问题。在包含网格的父页面中，有一个div为class＆＃34; grid-mvc＆＃34;在网格本身之前。这就是剧本无法运作的原因。

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

1 个答案:

答案 0 :(得分：0)

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

// match the objects
MATCH (o1:Obj)
WITH o1.desc AS desc, o1

// put them in ascending order so we can find the smallest
ORDER BY desc,o1.id

// collect them per description
WITH desc, collect(o1) AS objs

// connect 1..n to node 0
UNWIND RANGE(1,size(objs)-1) AS idx
WITH objs[0] AS origin, objs[idx] AS dupe
MERGE (origin)<-[:SAME_AS]-(dupe)
相关问题
最新问题