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

Posted 2023-02-26

【中文标题】如何使用 jQuery 填充 <ul> 和从 JSON ActionResult 返回的列表？

【英文标题】：How can I fill <ul> using jQuery and list returned from JSON ActionResult?

【发布时间】：2015-10-17 06:16:12

【问题描述】：

我可以在运行向控制器提交的视图中填充它。

<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 操作结果。 它带回了正确的行数，但我不知道如何填充 “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;


    

【参考方案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 >

【参考方案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);

【讨论】：

value.property_name 返回“未定义”。如果我在 2 个“li”中使用 JSON.stringify(value)，我会得到我想要的整行，但它有字段名称，并且除了值之外还有引号： "AccountID":2,"UserName":"User1" ,"电话":"503-358-5901","电子邮件":"[e-mail]","半径":80,"距离":1.7788856195409057,"城市":null,"州":null," Lat":45.52,"Long":-122.64 "AccountID":3,"UserName":"FredAckStare","Phone":"5039999999","Email":"[e-mail]","Radius" :100,"距离":1.9836792859217536,"城市":null,"州":null,"Lat":45.51,"Long":-122.64

【参考方案3】：

在尝试了我的问题的两个答案并胡思乱想之后，我发现让我的代码尽快工作的唯一方法是在控制器的 JSONResult 中编写一个表并将其作为字符串发送并设置一个用它来划分。

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

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

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

这是 stringify 为我的 responseObject 显示的内容：

"AccountID":2,"UserName":"User1","Phone":"503-358-5901","Email":"[e-mail]","‌​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 表格和使用“编辑”“删除”列调整它们并不陌生，现在一切皆有可能。猜猜这只是简单的脚本，但我不打算返回很多行，甚至不认为 JSON 对象比字符串快。

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

我不想让溢出之神感到不安，所以如果这个答案不合适，请告知。如果您愿意，也可以发布答案。

这是我的控制器的 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;