使用获取的 Json 数据返回 Ajax 成功调用中的部分视图

Question

我正在通过对 ASP.NET MVC 项目中的控制器的 AJAX 调用来获取 JSON 数据。我能够从 Web API 调用中获取 JSON 数据就好了。现在我想将这个 JSON 数据返回给success我的 AJAX 调用中的函数，并将其传递给局部视图，而不是使用 jQuery 静态附加 JSON 数据。

C# 控制器：

[HttpGet]
[Route("company-info/companyinfogetapidata")]
[AllowAnonymous]
public ActionResult CompanyInfoGetApiData(string name, int CompanyCode, string city, string state, int zip)
    {

        HttpClient client = new HttpClient();

        client.BaseAddress = new Uri("URL_BASE");
        client.DefaultRequestHeaders.Accept.Clear();
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

        var request = client.GetAsync("URL_PATH");                
        var json = request.Result.Content.ReadAsStringAsync().Result;

        JObject o = JObject.Parse(json);

        JToken ApiData = o["results"];

       // Here is where I want to insert pieces of the JSON data into the model and then pass it into the partial view
        CompanyResultsModel getfetcheddata = new CompanyResultsModel();

        getfetcheddata = Newtonsoft.Json.JsonConvert.DeserializeObject<CompanyResultsModel>(json);


        return PartialView(@"~/Views/Shared/companies/_companyResults.cshtml", getfetcheddata);

    }

编辑：我在下面创建了一个新模型 CompanyResultsModel:

namespace Companies.Models
{
    public class CompanyResultsModel
    {
        public string companyName { get; set; }
    }
}

AJAX 调用：

$.ajax({
    type: "GET",
    url:"../companyinfogetapidata",
    dataType: "json",
    data: {DATA HERE},
    error:function(e){alert("nope"+e);},
    success: function (xhr_request) {

        var fetched_data = xhr_request["results"];

        var i;

        var iLength = fetched_data.length;

        for (i = 0; i < iLength; i++) {
            // This was the original jQuery way I was appending the JSON data
            // $("#CompanyFinderResultsContainer").append("<p>Name:&nbsp;" + fetched_data[i].name + "</p>");
            // I want to call a Partial View and Pass along the JSON data from this success function
            // I am thinking of making a call like this                            
            @Html.Partial("_CompanyFinderResults", Model);

        }


    }
});

我尝试遵循几种在控制器中创建模型的方法来附加此 JSON 数据，但我不太确定这是否是最佳方法。

任何帮助是极大的赞赏！

Answer 1

编辑您的 AJAX 部分后，我想我看到了一种更简单的方法来完成您想要完成的工作。

您将希望您的控制器返回 aPartialViewResult以便HTML与您的前端通信：

[HttpGet]
[Route("company-info/companyinfogetapidata")]
[AllowAnonymous]
public PartialViewResult CompanyInfoGetApiData(string name, int CompanyCode, string city, string state, int zip)
{

    HttpClient client = new HttpClient();

    client.BaseAddress = new Uri("URL_BASE");
    client.DefaultRequestHeaders.Accept.Clear();
    client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

    var request = client.GetAsync("URL_PATH");                
    var json = request.Result.Content.ReadAsStringAsync().Result;

    JObject o = JObject.Parse(json);

    return PartialView(@"_CompanyFinderResults.cshtml", Model);

}

请注意Return TypeController 方法的 。

然后，您可以将for loop您在AJAX success函数中使用的函数移动到您的函数中，_CompanyFinderResults.cshtml并让函数为您MVC View Engine进行处理。

然后调整你的AJAX success函数来处理返回的PartialViewData：

     $.ajax({
            type: "GET",
            url:"../companyinfogetapidata",
            dataType: "json",
            data: {DATA HERE},
            error:function(e){alert("nope"+e);},
            success: function (partialViewData) {
                $('#your-div-to-hold-partial-view').html(partialViewData);
            }
        });

编辑：所以我相信您在这里有 3 种方法可供选择：

1.您可以让您的 AJAX 调用触发第二个 AJAX 调用以检索 aPartialView以更新div您的 HTML 中的 a。

2.您可以让现有的 AJAX 调用返回 aPartialView以更新divHTML 中的 a。

3.您可以在success functionAJAX 调用中编写 JavaScript来构建所需的 HTML 以更新 HTML 中的 a div。

我推荐第二个选项，这就是我的答案所针对的。它似乎是实现您目标的最有效解决方案。

我不推荐第三个选项，因为它需要很多string concatenation非常难以管理的代码。但是开发起来会更容易，因为您不必MVC framework像在其他选项中那样与 交互。

如果您愿意，我可以向您展示如何执行这些解决方案中的任何一个。