返回Ajax成功調用中的部分視圖調用Jeto數據

Question

我通過AJAX調用向ASP.NET MVC項目中的控制器提取JSON數據。我能夠從Web API調用中獲取JSON數據。現在我想將這個JSON數據返回到我的AJAX調用中的success函數，並將其傳遞給部分視圖，而不是使用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); 

} 

注意控制方法的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); 
      } 
     }); 

編輯：所以我相信你有辦法在這裏有3個選項：

你可以有你AJAX調用觸發第二次AJAX調用以檢索PartialView以更新HTML中的div。

2.您可以讓您現有的AJAX調用返回PartialView以更新HTML中的div。

您可以在AJAX調用來構建所需的HTML在你的HTML更新div的success function編寫JavaScript。

我推薦第二個選項，這是我的答案是針對。它似乎是您的目標最有效的解決方案。

我不建議第三個選項，因爲它需要大量的string concatenation，這將是非常難以管理的代碼。但是開發起來會更容易，因爲您不必像在其他選項中那樣與MVC framework進行交互。

我可以告訴你如何做任何這些解決方案，如果你想。