通过 JavaScript 刷新 MVC 3 PartialView

Question

我有一个包含多个 PartialViews 的 ASP.NET MVC 3 视图。其中一个从 Internet 获取图像，该图像取决于其 ViewModel 的参数。我想更改 ViewModel 的参数并重新加载 PartialView（仅），以便加载更改参数的图像。

到目前为止，这是我的 PartialView：

@model MyViewModel

<script type="text/javascript">
function changeParameter(newValue) {
    @Model.Parameter = newValue;
    alert(@Model.Parameter);
    ... What now? How do I refresh the PartialView? ...
}
</script>

<h4>@Model.Header</h4>
<table style="background-color: #f8f7f8; width:100%;">
<tr style="line-height:18px; background-color: #d6d6d6;">
    <th style="cursor:pointer" onclick="changeParameter('value1');">Value1</th>
    <th style="cursor:pointer" onclick="changeParameter('value2');">Value2</th>
    <th style="cursor:pointer" onclick="changeParameter('value3');">Value3</th>
    <th style="cursor:pointer" onclick="changeParameter('value4');">Value4</th>
    <th style="cursor:pointer" onclick="changeParameter('value5');">Value5</th>
    <th style="cursor:pointer" onclick="changeParameter('value6');">Value6</th>
    <th style="cursor:pointer" onclick="changeParameter('value7');">Value7</th>
</tr>
</table>
<img src="@Model.ImageUrl" alt="Chart" />

所以问题是我想单击其中一个值 (Value1-7) 并且我的 ViewModel 的 Parameter 变量被更改。 到目前为止它有效，因为警报框显示了我刚刚设置的值。 我现在想重新加载 PartialView 以便 @Model.Header 和 @Model.ImageUrl 更新，因为它们依赖于 我改变的参数。 我怎样才能做到这一点？ 哦，顺便说一句，我对 JavaScript 完全陌生...

干杯，
西蒙

编辑：
好的，上面的两个答案确实有点帮助，但由于我是一个真正的 JavaScript 菜鸟，所以有点难...
我现在拥有的是：

@model MyViewModel
<div id="my-header">
    <h4>@Model.Header</h4>
</div>

<table id="my-table" style="background-color: #f8f7f8; width:100%;">
    <tr style="line-height:18px; background-color: #d6d6d6;">
    <th style="cursor:pointer" id="value1">Value1</th>
    <th style="cursor:pointer" id="value2">Value2</th>
    <th style="cursor:pointer" id="value3">Value3</th>
    <th style="cursor:pointer" id="value4">Value4</th>
    <th style="cursor:pointer" id="value5">Value5</th>
    <th style="cursor:pointer" id="value6">Value6</th>
    <th style="cursor:pointer" id="value7">Value7</th>
    </tr>
</table>

<div id="my-image">
    <img src="@Model.ImageUrl" alt="Chart" />
</div>

<script type="text/javascript">
    $('#my-table th').click(function() {
        alert(this.id);
        @Model.Parameter = this.id;
        $('#my-header').html("<h4>@Model.Header</h4>");
    });
</script>

到目前为止这很好，但我无法从我的模型类中操纵属性Parameter。所以调用@Model.Parameter = anyValue; 不起作用。
如何在 JavaScript 中做到这一点？

编辑 2： 好的，我终于按照 chaZm 建议的方式解决了它。 JSON 方式。
但首先我更改了我的 ViewModel，以便所有可能的 URL 和标头都存储在 Dictionary<string, string> 中。那么我的 PartialView 是：

@model MyViewModel
<div id="my-header">
    <h4>@Model.Header</h4>
</div>

<table id="my-table" style="background-color: #f8f7f8; width:100%;">
    <tr style="line-height:18px; background-color: #d6d6d6;">
    <th style="cursor:pointer" id="value1">Value1</th>
    <th style="cursor:pointer" id="value2">Value2</th>
    <th style="cursor:pointer" id="value3">Value3</th>
    <th style="cursor:pointer" id="value4">Value4</th>
    <th style="cursor:pointer" id="value5">Value5</th>
    <th style="cursor:pointer" id="value6">Value6</th>
    <th style="cursor:pointer" id="value7">Value7</th>
    </tr>
</table>

<div id="my-image">
    <img src="@Model.ImageUrl" alt="Chart" />
</div>

<script type="text/javascript">
    $('#my-table th').click(function() {
        var urls = @Html.Raw(Json.Encode(@Model.Urls));
        var url = urls[this.id];
        $('#my-image').html("<img src='" + url + "' alt='Chart' />");
        var headers = @Html.Raw(Json.Encode(@Model.Headers));       
        var header = headers[this.id];
        $('#my-header').html(header);
    });
</script>

现在一切都按预期进行......
感谢您的努力。

Answer 1

嗯。有两种方法可以更新 MVC 页面。

1) 整页刷新（您只需调用控制器操作，它会使用更新的参数形成新视图）

2) AJAX 更新。 Javascript 对您使用的服务器一无所知。 MVC \ ASP> NET，任何东西。所以你需要的是调用控制器，它会返回新的局部视图值。在这里，您可以从服务器返回部分值

    public PartialViewResult Result()
    {
        return PartialView("Viewname",params);
    }

然后将返回的html分配给带有jquery之类的容器

    $('div').load("/Result",....)

或

您可以通过 JSONResult 返回更新的数据，例如

    public JsonResult Result()
    {
        return Json(GetSomeValidJson());
    }

然后在JS中格式化你喜欢的页面。你得到 Json，解析它并手动设置你喜欢的所有页面数据

我使用 MVC 3 的时间不长（只有 1 和 2），因此该领域可能会有一些更新。但我认为基本是一样的。 祝你好运！

Answer 2

通过使用部分 to 虚拟地将其合并到页面中。 Web 浏览器不知道页面的该部分来自部分（因为 MVC 负责服务器端的所有内容）。过去，当我需要更新页面的某个部分时，我所做的是创建一个单独的操作，该操作仅返回部分中的值。部分不需要包含任何<head> 或<body> 标签，只需包含内容即可。然后，在客户端，AJAX 输入数据。

例如，创建一个名为 MyAJAXPartials 的控制器并为此部分创建一个名为 MyPartial 的操作（如果我是你，我会更改这些名称）。然后，使该操作呈现常规视图（不是部分视图），但使用与您在上面发布的相同的代码。使用 onclick="..." 不是进行动作绑定的首选方式，如果您使用的是 jQuery（并且您给表一个 ID），您可以这样做：

$('#TABLE-ID th').each(function() {
    $(this).click(function() {
        changeParameter($(this).text()));
    });
});

同样，不是使用部分，而是在主页上构建一个带有<div>标签的内容框架，给它一个类似contentArea的id，并使用以下JavaScript（再次，我假设你有jQuery）：

$.get('/MyAJAXPartials/MyPartial', function(data) {
    $('#contentArea').html(data);
    // PUT THE CHANGE PARAMETER CODE I SUGGESTED ABOVE HERE
});

然后，每次您需要更改数据时，只需通过请求新 URL 重新加载该框架中的内容即可。例如，请求的不是/MyAJAXPartials/MyPartial，而是/MyAJAXPartials/MyPartial/Value1。所有的 JavaScript 都应该在该框架之外。