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

Question

我通过对 ASP.NET MVC 项目中的控制器的 AJAX 调用来获取 JSON 数据。我能够从 Web API 调用中获取 JSON 数据就好了。现在我想在我的 AJAX 调用中获取返回给 success 函数的 JSON 数据，并将其传递给局部视图，而不是使用 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 部分后，我想我看到了一种更简单的方法来完成您想要完成的工作。

您会希望您的控制器返回 PartialViewResult，以便将 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);

}

注意Controller方法的Return Type。

然后您可以将您在AJAX success 函数中使用的for loop 移动到您的_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 调用以检索 PartialView 以更新 HTML 中的 div。

2.您可以让现有的 AJAX 调用返回 PartialView 以更新 HTML 中的 div。

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

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

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

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