javascript - 通过 JavaScript 刷新 MVC 3 PartialView

Question

我有一个包含多个 PartialView 的 ASP.NET MVC 3 View 。其中之一从互联网获取图像，这取决于其 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来 self 的模型课。所以打电话@Model.Parameter = anyValue;不起作用。
我如何在 JavaScript 中执行此操作？

编辑 2:好的，我终于按照chaZm建议的方式解决了它。 JSON 方式。
但首先我更改了我的 ViewModel，以便所有可能的 URL 和 header 都存储在 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) 整页刷新(您只需调用 Controller 操作，它会形成具有更新参数的新 View )

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

    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)，所以该领域可能会有一些更新。但我认为基本是一样的。祝你好运!