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

Question

是否可以从 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.StorageBaseUrl}{WellKnownStrings.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 来完成吗？

Answer 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>

结果：