Jquery 仅更新页面上的部分视图

我正在使用谷歌的图表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>

功能更改客户（）{
$.ajax({
键入：“GET”，
url:“Reports/GetReportbyCustomer/”，
数据：{customerId:$（“#Customers”）.val（）}，
完成：功能（结果）{
调试器；
}
});
}
@LabelFor（m=>m.CustomerId）
@DropDownListFor（m=>m.Customers，Model.Customers，new{@onchange=“changecouster（）”}）
@Html.Partial（“TotalReport”，Model.printDocuments）

TotaltReports部分视图仅包含图表的构建和要在中查看的图表的

。这里唯一重要的是我使用了

列表

作为模型

---

返回结果时，响应是整个页面的html代码。如何仅刷新我的TotaltReport局部视图？

当您通过selstion custome更改下拉列表时，将调用

ajax

，并将数据发送到

GetReportbyCustomer

控制器
将

ajax数据类型

更改为

dataType:'html'

，则只能加载html部分或完整页面。
然后在

GetReportbyCustomer

controller中

public ActionResult GetReportbyCustomer()
{
    .
    .
    return PartialView("PartialViewPageName", data to page);
}

以

PartialViewPageName

的名称创建一个部分页面
然后html页面将返回到

ajaxsuccess

事件，并加载数据以进行查看

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

鉴于

<div id="content">
    Your data will be loaded here
</div>

您的数据将在此处加载

然后调用一个只返回仅包含您要更新内容的分部的方法。@StephenMuecke因此使用return partialview（）并将内容插入围绕此调用的div@Html.partial（“TotalReport”，Model.printDocuments”）？我不知道您

GetReportbyCustomer（）返回的是什么（您没有显示控制器代码），但假设它是要更新的部分代码，则在ajax成功回调中-
success:function（data）{$（'#content'）.html（data）；}