使用獲取的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進行交互，因此開發起來會更容易。

如果您願意，我可以向您展示如何執行這些解決方案。