要在 ASP .NET Core MVC 中查看的 JavaScript 中的对象数组

Posted 2023-05-08

【中文标题】要在 ASP .NET Core MVC 中查看的 JavaScript 中的对象数组

【英文标题】：Array of object in JavaScript to View in ASP .NET Core MVC

【发布时间】：2021-09-24 08:43:48

【问题描述】：

是否可以从 javascript 中的对象数组中获取数据，到 .cshtml 视图中。

newsObj[]的填充代码；

@foreach (var item in Model.Articles)
        
           @:newsObj.push(
            @:Id:@item.Id,
            @:Title: "@item.Title",
            @:FeaturedImage: "@item.FeaturedImage",
            @:DateFormated: "@item.DateFormated",
            @:Summary: `@item.Summary.Trim()`,
            @:Category: "@foreach (var cat in @item.Category) @(cat.Title+" ") ");

          
        

View 中的代码用于显示来自名为 Articles 的模型的数据：

<div class="novice-list">

                @foreach (var item in Model.Articles)
                

                    <div class="novica-container">
                        <a href="@DataContext.Current.RouteUrlManager.GetModuleLink("article", null, "details", item.Id, item.Title)">
                            <div class="media">
                                @
                                    string slika = string.Empty;
                                    if (item.Id > 166 || item.Id == 159)
                                    
                                        slika = $"WellKnownStrings.StorageBaseUrlWellKnownStrings.ArticleImageContainer/item.FeaturedImage";
                                    
                                    else
                                    
                                        slika = "https://kompasxnet.blob.core.windows.net/images/" + item.FeaturedImage;
                                    
                                
                                <div class="slika" style="background-image: url(' @slika ');">
                                </div>
                                <div class="media-body">
                                    @*<a href="#">content</a>*@
                                    <div class="meta">
                                        <span class="published">@item.DateFormated</span>
                                        <span class="category @foreach (var cat in @item.Category)  @(cat.Title+" ")">
                                            @foreach (var cat in @item.Category)
                                            
                                                <span class="cat @cat.Title">@cat.Title</span>
                                            
                                        </span>
                                    </div>
                                    <h2>@item.Title</h2>
                                    <p>@item.Summary</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                
            </div>

这种方法的原因是过滤，在 JS 的帮助下，我将原始数组过滤到另一个数组。现在我必须在视图中显示过滤后的数组。可以用 replaceWith() 或 mybe 用 innerHTML 来完成吗？

【问题讨论】：

为什么不尝试调用action过滤数据，然后刷新模型数据，这样页面数据就会被刷新。如果你想使用innerHTML，你需要将整个生成的html代码更改为<div class="novice-list">.

newsObj[] 在 JS 中借助 indexof() 进行过滤。所以我过滤的数据在 newsObjFiltered[] 中，然后这些值必须传递给视图。你是什​​么意思？

当你过滤文章时？我的意思是调用一个控制器动作并将模型传递给它，然后更改模型.文章，动作返回带有过滤后的模型.文章的视图。

无法更改型号。基本上该页面目前每页有 4 篇文章，我在这些文章上方创建了一个过滤器。问题是过滤器只过滤显示的文章而不是整个集合。我无法更改控制器，这就是我的解决方案朝这个方向发展的原因。我现在进入最后一步，将过滤后的数据从所有文章传递到视图。这就是我卡住的地方

你的"@DataContext.Current.RouteUrlManager.GetModuleLink("article", null, "details", item.Id, item.Title)"和$"WellKnownStrings.StorageBaseUrlWellKnownStrings.ArticleImageContainer/item.FeaturedImage";是什么。可以分享一下它的数据吗，我可以尝试用innerHTML分享一个demo。或者你可以给我一个示例数据。跨度>

【参考方案1】：

我把<div class="novice-list">改成<div class="novice-list" id="div1">，这是我的js：

<script>
    var newsObj = [];
    $(function () 

        @foreach (var item in Model.Articles)
    
       @:newsObj.push(
        @:Id:@item.Id,
        @:Title: "@item.Title",
        @:FeaturedImage: "@item.FeaturedImage",
        @:DateFormated: "@item.DateFormated",
        @:Summary: `@item.Summary.Trim()`,
        @:Category: "@foreach (var cat in @item.Category) @(cat.Title+" ") ");


    
        console.log(newsObj);
        var html = "";
        for (var i = 0; i < newsObj.length-1; i++) 
            html += "<div class='novica-container'><a href ='/about-us/news/" + newsObj[i].Id + "/" + newsObj[i].Title + "'><div class='media'>";
            if (newsObj[i].Id > 166 || newsObj[i].Id == 159) 
                html += "<div class='slika' style='background-image: url(' https://fhr.blob.core.windows.net/article-image/" + newsObj[i].FeaturedImage+"');'>";
             else
            
                html += "<div class='slika' style='background-image: url(' https://kompasxnet.blob.core.windows.net/images/" + newsObj[i].FeaturedImage + "');'>";

            
            html += "</div><div class='media-body'><div class='meta'><span class='published'>" + newsObj[i].DateFormated + "</span><span class='category " + newsObj[i].Category + "'>";
            for (var j = 0; j < newsObj[i].Category.trim().split(" ").length; j++)
            
               
                html += "&nbsp;<span class='cat " + newsObj[i].Category.trim().split(" ")[j] + "'>" + newsObj[i].Category.trim().split(" ")[j]+"</span>";
            
            html += "</span></div><h2>" + newsObj[i].Title + "</h2><p>" + newsObj[i].Summary + "</p></div></div></a></div>";

        
        document.getElementById("div1").innerHTML = html;
    )

</script>

结果：

【讨论】：

所以要注意的是，您将所有值赋予变量 html，然后在内部 html 的帮助下将其插入页面。新添加的 ID =div1 有什么意义。我不能只使用 innerHtml 的类吗？我现在将尝试实现它，并让你知道它是如何工作的。谢谢大家的帮助，你是真正的mvp??

您好，如果我的回答对您有帮助，可以标记为回答吗？谢谢。

我做到了 :) 再次感谢。你能支持我的问题吗，我试图摆脱我的禁令。我删除了一个帖子，现在我在这里的操作受到限制..