javascript上的.net mvc视图循环仅更新表中的第一行 [英] .net mvc view loop on javascript only updating first row in table

问题描述

我的循环中有2行.

我有2个问题:

1. JavaScript似乎在每次迭代时都在执行；但是，它只将结果填充到第一表行数据中.

1. The JavaScript appears to be executing on each iteration; however, it is only populating the first table row data with the result.

我现在必须在脚本中对JSON对象进行硬编码，但理想情况下，我想从模型数据中使用动态JSON字符串.尽管每当我尝试引用它(@item.requestExample)时，JavaScript都会失败，并且浏览器中的inspect/console显示它正在引用字符串并找到无效的标记.查找&quote;而不是". (我假设这是字符串的HTML表示形式?)如何将其转换为真正的JavaScript对象?我尝试过:

I'm having to hard code the JSON object (for now) in the script, but ideally want to use a dynamic JSON string from my model data. Though whenever I try to reference it (@item.requestExample), the JavaScript fails and the inspect/console in the browser shows that it is referencing the string and finding invalid tokens. Instead of " it is finding &quote;. (I assume this is an HTML representation of the string?) How can I convert that to a true JavaScript object? I've tried:

var obj = JSON.parse('@(HttpUtility.HtmlDecode(@item.requestExample))');

和

var obj = dataString.replace(/"/g, '"');

都没有运气，因为一旦在JavaScript中引用了@item.requestExample，它就会发现无效的令牌并抛出该标志.

both with no luck because as soon as the @item.requestExample is referenced in the JavaScript, it is finds the invalid tokens and throws the flag.

这是我在mvc视图中的完整循环:

Here is my complete loop in the mvc view:

@foreach (var item in Model.list)
{
<tr class="table-info">
    <td>@item.library</td>
    <td>@item.api</td>
    <td>@item.ibmiPgm</td>
    <td> <pre id="uglyPretty"></pre> </td> 

    <script>

        var pretty = document.getElementById("uglyPretty");
        var obj = { "success": 1, "resultMessage": "Success", "list": [{ "custNo": "101", "firstName": "First Name: 101", "lastName": "Last Name: 101", "address1": "Address1: 101", "address2": "Address2: 101", "city": "City: 101", "state": "10", "zip": "101", "routing": "101", "accountNo": "101" }, { "custNo": "102", "firstName": "First Name: 102", "lastName": "Last Name: 102", "address1": "Address1: 102", "address2": "Address2: 102", "city": "City: 102", "state": "10", "zip": "102", "routing": "102", "accountNo": "102" }] };
        document.getElementById("uglyPretty").innerHTML = JSON.stringify(obj, undefined, 2);

    </script>

    <td>
        <button typeof="button" onclick="location.href='@Url.Action(item.api, "", new { api = item.api, jsonRequest = item.requestExample } )'">Consume API</button>
    </td>
</tr>
}

推荐答案

在我看来，您只是想将模型项目中的JSON显示到表格单元格中，对吧?问题是JSON没有格式化，所以您要漂亮地打印它?
如果是这种情况，那么您的工作就会变得比原本需要的困难得多.

It looks to me like you are just trying to display some JSON from your model item into a table cell, right? And the issue is that the JSON is not formatted so you are trying to pretty-print it?
If that is the case, you are making this much harder than it needs to be.

不要只是为了将其重新格式化而尝试将JSON转换为Javascript对象.而是使用C#方法进行重新格式化.当您的问题被标记为json.net 我假设您在项目中安装了 Json.NET .如果是这样，您可以使用以下代码替换所有笨拙的脚本代码:

Don't try to convert the JSON to a Javascript object just to reformat it; instead use a C# method to do the reformatting. As your question is tagged with json.net I'm assuming you have Json.NET installed in your project. If so, you can replace all that clumsy script code with this:

    <td>
        <pre>@Newtonsoft.Json.Linq.JToken.Parse(item.requestExample).ToString()</pre>
    </td>

因此完整的循环看起来像这样:

So the full loop would look like this:

@foreach (var item in Model.list)
{
    <tr class="table-info">
        <td>@item.library</td>
        <td>@item.api</td>
        <td>@item.ibmiPgm</td>
        <td>
            <pre>@Newtonsoft.Json.Linq.JToken.Parse(item.requestExample).ToString()</pre>
        </td>
        <td>
            <button typeof="button" onclick="location.href='@Url.Action(item.api, "", new { api = item.api, jsonRequest = item.requestExample } )'">Consume API</button>
        </td>
    </tr>
}

这篇关于javascript上的.net mvc视图循环仅更新表中的第一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！