c# - 使用获取的 Json 数据返回 Ajax 成功调用中的部分 View

Question

我通过 AJAX 调用 ASP.NET MVC 项目中的 Controller 来获取 JSON 数据。我能够从 Web API 调用中获取 JSON 数据。现在，我想获取 AJAX 调用中返回到 success 函数的 JSON 数据，并将其传递给分部 View ，而不是使用 jQuery 静态附加 JSON 数据。

C# Controller :

[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);

        }


    }
});

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

非常感谢任何帮助!

Answer 1

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

您将希望 Controller 返回 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 方法的返回类型。

然后，您可以将在 AJAX success 函数中使用的 for 循环 移动到 _CompanyFinderResults.cshtml 中，并让 MVC View 引擎 为您完成该处理。

然后调整您的 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 函数 中编写 JavaScript 来构建所需的 HTML，以更新 HTML 中的 div .

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

我不推荐第三个选项，因为它需要大量字符串连接，这将是非常难以管理的代码。但开发起来会更容易，因为您不必像在其他选项中那样与 MVC 框架 进行交互。

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