asp.net-mvc - 从 Web Api Controller 获取数据后如何渲染局部视图

Question

我想在从 web api 控制器操作中获取数据后渲染部分视图。我想做以下操作：

1. 需要使用 jquery 的 post 方法从 web api 控制器获取数据。

2. 从 web api 获取数据后，需要导航到具有局部视图（用于渲染图表元素）的主视图（例如：“diplay”）。此外，将模型数据传递给局部视图使用 jqplot 绘制图表。

   源代码：

   查询：

    $("#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);
       }
   

   Web 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; }
   }
   

   显示.cshtml：

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

   图表.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);
}