Question

我正在使用Google的图表api创建图表。我有一个与客户的下拉列表，当客户被选中时，我只希望更新我的图表的部分视图，而不是整个网站。因为如果站点刷新，则下拉列表将重置。

这是我的页面下拉部分的代码：

<script type="text/javascript">
    function changeCustomer() {
        $.ajax({
            type: 'GET',
            url: "Reports/GetReportbyCustomer/",
            data: { customerId: $("#Customers").val() },
            complete: function (result) {
                debugger;
            }
        });
    }
</script>
<div id="filters">
    <table>
        <tr>
            <td>@Html.LabelFor(m => m.CustomerId) </td>
            <td colspan="3">@Html.DropDownListFor(m => m.Customers, Model.Customers, new { @onchange = "changeCustomer()" })</td>
        </tr>
    </table>
</div>
<div id="content">
    @Html.Partial("TotalReport", Model.printDocuments)
</div>

TotaltReports局部视图仅包含图表的构建和要查看的图表的<div>。这里唯一重要的是我使用List<PrintDocumentsViewModel>作为模型。

返回结果时，响应是整个页面的html代码。我怎么才能刷新TotaltReport局部视图？

Answer 1

当您通过selstion custome更改下拉列表时，将调用hasGoTabButtonToBeDisplayed()并将数据发送到ajax控制器。
将GetReportbyCustomer更改为ajax dataType，然后只能加载html部分或完整页面然后在dataType: 'html'控制器

GetReportbyCustomer

以public ActionResult GetReportbyCustomer() { . . return PartialView("PartialViewPageName", data to page); }为名创建部分页面然后html页面将返回到PartialViewPageName事件并加载数据以查看

ajax sucess

在视图中

 success: function (result) 
 {
     $('#content').html(data);
 }

仅更新页面上的部分视图

1 个答案: