Question

我通过AJAX调用获取JSON数据到ASP.NET MVC项目中的控制器。我能够从Web API调用中获取JSON数据。现在我想在我的AJAX调用中获取返回到success函数的JSON数据，并将其传递给部分视图，而不是使用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);

        }


    }
});

我尝试了一些在控制器中创建模型的方法，以附加此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。

然后，您可以将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);
            }
        });

编辑：所以我相信你有三种方法可供选择：

1。您可以让您的AJAX调用触发第二次AJAX调用，以检索PartialView以更新HTML中的div。

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

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

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

我不建议使用第三个选项，因为它需要大量string concatenation，这将是非常难以管理的代码。但是开发起来会更容易，因为您不必像在其他选项中那样与MVC framework进行交互。

如果您愿意，我可以告诉您如何使用这些解决方案。

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

1 个答案: