使用获取的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:下面创建了一个新模型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);

}

注意控制器方法的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进行交互，因此开发起来会更容易。

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