asp.net-mvc - Web API コントローラーからデータを取得した後に部分ビューをレンダリングする方法

Question

Web API コントローラー アクションからデータを取得した後、部分ビューをレンダリングしたいと考えています。次の操作を行いたいです。

1. jquery の post メソッドを使用して、Web API コントローラーからデータを取得する必要があります。

2. Web API からデータを取得した後、部分ビュー (グラフ要素をレンダリングするために使用される) を持つメイン ビュー (例: "diplay") に移動する必要があります。また、モデル データを部分ビューに渡します。 jqplot を使用してグラフを描画します。

   ソースコード：

   Jクエリ:

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

   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 からデータを取得し、再度サーバーに送信してビューをフェッチする必要がある理由がわかりません。これらすべてを 1 回の呼び出しで実行できます。

新しいコントローラー アクションを作成する

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