Asp.net mvc 如何在从Web Api控制器获取数据后呈现局部视图

我想在从web api控制器操作获取数据后呈现部分视图。 我要执行以下操作：

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

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

源代码：

Jquery： 控制器操作： Display.cshtml：

@型号列表
欢迎来到我们的网站
@{Html.RenderPartial（“Chart”，@Model）；}

Chart.cshtml：

var json=json.Encode（模型）；
var数据片=[]；
var=[]；
$.each（json，函数（entryindex，条目）{
push（条目['Value']）；
ticks.push（条目['Name']）；
});
变量plot1=$.jqplot（'chart'，[dataSlices]{
系列默认值：{
渲染器：$.jqplot.blunderer，
渲染器选项：{
barWidth:null，
fillToZero:为真，B方向：“水平”
},
点标签：{show:true，位置：'e'}
},
图例：{
节目：假
},
轴线：{
xaxis：{
pad:0，
选项：{formatString:“%d”}
},
亚克斯：{
渲染器：$.jqplot.CategoryAxisRenderer，
滴答声：滴答声，
勾选选项：{showGridline:false}，
}
},
noDataIndicator:true
});

---

如果要呈现完全不同的视图，则

$.post

不起作用。您需要将

中的数据发布到服务器，然后需要一个完整的页面

但是，我不明白为什么必须使用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);
}

    [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);
    }

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

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

<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>

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