Question

我可以在运行提交到Controller的View中填充此内容。

<h4>Stores In Area</h4>
<ul>
    @foreach (var account in Model)
    {

        <li>
            @Html.ActionLink(account.UserName, "StoreAccountDetails", new { id = account.AccountID })
            @Html.Encode(account.Phone)
            @Html.Encode(account.Email)
            @Html.Encode(account.Radius)
            @Html.Encode(account.Distance)
            @Html.Encode(account.City)
            @Html.Encode(account.State)
          </li>

    }
</ul>

我试图避免提交和往返整个视图：我可以使用ajax通过单击测试按钮来调用JSON Action Result。它会返回正确的行数，但我不知道如何填充 “ul”。我可以清空JSON响应中的“ul”，它告诉我代码运行，但不知道如何遍历responsObject并编写“li”标记脚本。

        function retrieveStores(thisLat, thisLng) {
            alert("inside retrieveStores, " + thisLat + ":::" + thisLng);  //THIS WORKS
            $.ajax({
                url: "/Stores/GetStores/",
                data: {lat: thisLat, lng: thisLng},
                type: 'POST',
                success: handleResultResponse,  //THIS WORKS
                error: function (xhr) { $('#lblNotice').text("there are no stores in this area . . . yet"); }
            });
        }

        //handles data back from ajax call for Stores
        function handleResultResponse(responseObject) {

            alert(responseObject); //THIS RETURNS 4 "object Object"s separated by commas
            alert("inside handleResultResponse ul empty is next"); //THIS WORKS
            $("ul").empty(); //THIS WORKS AND EMPTY'S THE ONLY UL (I will probably give it an id).

//BELOW HERE IS WHERE I DON'T KNOW HOW TO LOOP THROUGH THE <ul> AND FILL IT WITH <li>'s.
///LOOP THROUGH responeObject BUILDING <il>s HERE////
        }

在控制器中，这是JSON ActionResult

[HttpPost]
public JsonResult GetStores(float lat, float lng)
{

//THIS BELOW RETURNS 4 ROWS
        var stores = _db.GetDistanceFromLatLongs2(lat, lng).ToList();

        var results = new JsonResult();


        if (stores.Any())
        {

            results = new JsonResult { Data = stores };
        }


        return results;


    }

Answer 1

选项1： 您可以迭代JSON并填写表格的相应元素，如：

  $.getJSON(url, function(data) {
    $.each(data, function(key, val) {
      var row= '<tr><td>' + val.your_property + '</td></tr>';
      $('#table').append(row);
    });
  });

选项2 ：您可以使用 AngularJS ;将ng-repeat用于

等行

<tr ng-repeat="item in items">
  <td ng-repeat="(key, val) in item">
    {{key}}: {{val}}
  </td >
</tr >

Answer 2

function handleResultResponse(responseObject) {
    var _liHTML = "",
        _ul = $("ul"); //should provide id

    $.each(responseObject, function(index, value){
        _liHTML += "<li>" + value.property_name + "</li>";
    });

    _ul.html(_liHTML);
}

Answer 3

在尝试了我的问题的两个答案后，我发现我能尽快让代码工作的唯一方法是在Controller的JSONResult中编写一个表并将其作为字符串和集合发送带有它的Div的innerHtml。

在立即窗口中，我能够找出从我的存储过程返回的list（）的内容。我能够循环并填充一个html表。

我认为我的成功归功于我可以设置一个断点，然后质疑我发回的列表对象。我能够得到行Count，以及每个字段的语法：stores [i] .AccountID。。。 .stores.Count等。

对于在View的响应中返回的JSON对象，我无法理解这一点，我也无法在运行时在视图中的javacript代码中停止。我能够使用JSON.stringify（value）来获取整行：（我知道那些东西在那里，我只是不能在JSON jQuery块里面的循环中看到loopin来搞乱它......如果我能找出语法。

以下是stringify为我的responseObject显示的内容：

{"AccountID":2,"UserName":"User1","Phone":"503-358-5901","Email":"xxx@xxx.com","‌Radius":80,"Distance":1.7788856195409057,"City":null,"State":null,"Lat":45.52,"Lo‌ng":-122.64} {"AccountID":3,"UserName":"FredAckStare","Phone":"5039999999","Email":"www@sss.c‌om","Radius":100,"Distance":1.9836792859217536,"City":null,"State":null,"Lat":45.‌51,"Long":-122.64} – and so on.

我对HTML表格并不陌生，并使用＆＃34;编辑＆＃34; ＆＃34;删除＆＃34;列，现在都可以。猜猜这只是简单的脚本，但我并没有计划返回很多行，甚至不认为JSON对象比字符串更快。

但主要是，这个答案更多地解决了我的问题，即使有人在那里可以解释如何在循环内循环以从JSON响应/列表返回中获得每行8-10列，这个问题概述了。我的猜测是聪明的人正在忙于工作，而不是在阅读我的问题。洛尔

我不想让Overflow之神感到不安，所以请告知这个答案是否合适。如果你愿意，也可以发一个答案。

这是我的控制器代码，其中包含html字符串脚本：

public JsonResult GetStores(float lat, float lng)
{

    var stores = _db.GetDistanceFromLatLongs2(lat, lng).ToList();

    var results = new JsonResult();

    if (stores.Any())
    {
        string htmlString = "<table><thead><th>AccountID</th><th>UserName</th><th>Phone</th></thead>";
        var i = 0;
            while(i < stores.Count)
            {
                htmlString += "<tr>";
                htmlString += "<td>" + stores[i].AccountID + "</td>";
                htmlString += "<td>" + stores[i].UserName + "</td>";
                htmlString += "<td>" + stores[i].Phone + "</td>";
                htmlString += "</tr>";
                i++;
            }

        htmlString += "</table>";

        results = new JsonResult { Data = htmlString};
    }

    return results;
    }
}

如何使用jQuery和JSON ActionResult返回的列表填充<ul>？

3 个答案: