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

I can populate this in my View running a submit to Controller.

我可以在运行提交到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>

I am trying to keep from submitting and roundtripping the whole View: I can use ajax to call JSON Action Result with test button click. It brings back the correct number of rows, but I don't know how to populate the "ul". I can empty the "ul" in the JSON response, which tells me the code runs, but not sure how to loop through the responsObject and script the "li" tags.

我试图阻止提交和往返整个视图:我可以使用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////
        }

In the controller, here is the JSON ActionResult

在控制器中,这是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;


    }

3 个解决方案

#1

Option 1 : You can iterate the JSON and fill the respective elements of the table like :

选项1:您可以迭代JSON并填充表的相应元素,如:

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

Option 2 : You can use AngularJS; use ng-repeat for the rows like

选项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);
}

#3

After trying both answers to my questions and futzing around I found the only way I could get my code to work as soon as possible was to script a table in the Controller's JSONResult and send it as a string and set the innerHtml of a Div with it.

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

In the Immediate window I was able to figure out the contents of the list() returned from my stored procedure. I was able to loop through and populate an html table.

在立即窗口中,我能够找出从我的存储过程返回的list()的内容。我能够遍历并填充html表。

I would attribute my success to the fact that I could set a break point and then question the list object I was sending back. I was able to get the row Count, and syntax for each field: stores[i].AccountID. . . .stores.Count and so on.

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

I couldn't figure this out for the JSON object that came back in the View's response and I couldn't stop at runtime in the javacript code in the view either. I was able to use JSON.stringify(value) to get the whole row: (I know the stuff is in there, I just can't see loopin inside of a loop inside a JSON jQuery block to mess with it.. . .If I could ever figure out the syntax.

我无法想象在View的响应中返回的JSON对象,我也无法在运行时在视图中的javacript代码中停止。我能够使用JSON.stringify(value)来获取整行:(我知道那些东西在那里,我只是在JSON jQuery块里面的循环内部看不到它来弄乱它... ...如果我能弄清楚语法。

Here is what stringify shows for my responseObject:

这是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.

I'm no stranger to HTML tables and tweaking them with "Edit" "Delete" columns, all possible now. Guess it is just plain scripting but I'm not planning on returning many rows and don't even think a JSON object is faster than a string.

我对HTML表格并不陌生,并使用“编辑”“删除”列调整它们,现在都可以。猜猜它只是简单的脚本,但我不打算返回很多行,甚至不认为JSON对象比字符串更快。

But mainly, this answer is more of solution to my problem, which the question outlines even though someone out there could explain how to loop inside a loop to get 8-10 columns per row out of the JSON response/list returned. My guess is that someone that smart is busy at work and not reading my questions. lol

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

I don't want to upset the Overflow gods so please advise if this answer is not appropriate. And post an answer too if you want.

我不想打扰溢出的神,所以请告知这个答案是否合适。如果你愿意,也可以发一个答案。

Here is my controller's code with the html string scripting:

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

#1