如何在从Web Api控制器获取数据后渲染局部视图Api控制器

Question

我想从Web api控制器操作获取数据后渲染局部视图。 我想要做如下操作：

1. 需要从使用POST方法从jQuery的网络API控制器获取数据。

2. 从Web API获取数据后，需要导航到具有局部视图（用于呈现图表元素）的主视图（例如：“diplay”）。此外，传递模型数据以部分视图使用jqplot绘制图表。

   源代码：

   的Jquery：

   $("#show").click(function (e) { 
        e.preventDefault(); 
        var jsondata = $("#filtercontent").text(); 
         var jlist; 
         $.ajax({ 
          type: "POST", 
          url: '/api/CreateReports/', 
          data: "=" + jsondata, 
          success: function (json) { 
           jlst = $.toJSON(json);           
          } 
         }); 
         $.post("/reports/display", { Data: jlst }, 
         function (data, textStatus) { 
         htmldatafordisplay = data; 
         if (textStatus != "success") { 
          result = "false"; 
          alert("Error"); 
         } 
         window.location.replace("display"); 
         }); 
   

   控制器动作：

   [HttpPost] 
       public ActionResult Display(string jsonData) 
       { 
        var mdata = new DataModel(); 
        List<DataModel> personData; 
        JavaScriptSerializer jss = new JavaScriptSerializer(); 
        personData = jss.Deserialize<List<DataModel>>(jsonData); 
        return View("display",personData); 
       } 
   

   网络ApiContorller行动：

   [HttpPost] 
   public IEnumerable<ReportData> Post([FromBody]string value) 
   { 
       var data = value.ToString(); 
       var model = new ReportData(); 
       string query = "select id, name ,value from table"; 
       var objdata = GetResult(query).ToList(); 
       return objdata; 
   } 
   

   数据模型：

   public class Report 
   { 
       public int Id { get; set; } 
       public string Name { get; set; } 
       public int Value{ get; set; } 
   } 
   

   Display.cshtml：

   @model List<JobInsight.Web.Models.DataModel> 
   <div>Welcome to our sitet</div> 
   <div>@{Html.RenderPartial("Chart", @Model);}</div> 
   

   Chart.cshtml：

   <div id="chart" class="jqplot-target barChart"> 
   </div> 
   <script> 
        var json = Json.Encode(Model); 
        var dataSlices = []; 
        var ticks = []; 
        $.each(json, function (entryindex, entry) { 
         dataSlices.push(entry['Value']); 
         ticks.push(entry['Name']); 
        }); 
   
   
         var plot1 = $.jqplot('chart', [dataSlices], { 
         seriesDefaults: { 
          renderer: $.jqplot.BarRenderer, 
          rendererOptions: { 
           barWidth: null, 
           fillToZero: true, barDirection: 'horizontal' 
          }, 
          pointLabels: { show: true, location: 'e' } 
         }, 
         legend: { 
          show: false 
         }, 
         axes: { 
          xaxis: { 
           pad: 0, 
           tickOptions: { formatString: "%'d" } 
          }, 
          yaxis: { 
           renderer: $.jqplot.CategoryAxisRenderer, 
           ticks: ticks, 
           tickOptions: { showGridline: false }, 
          } 
         }, 
         noDataIndicator: true 
         }); 
         </script> 
   

Answer 1

如果你想呈现一个完全不同的看法，然后$.post是行不通的。您需要将您的数据在<form>中发布到服务器，然后期待完整的页面

但是，我不明白为什么必须使用jQuery从Web API获取数据，然后再次将其发送到服务器以获取一个看法。你可以在一个电话中完成所有这些。

创建一个新的控制器动作

public ActionResult DisplayReport(string jsonData) 
{ 
    // call Web Api here and fetch data 
    // store the returned data in result 
    return view('display', result); 
}