Question

我正在使用包含多个PartialViews的ASP.NET MVC 3视图。其中一个从互联网获取图像，这取决于其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>

到目前为止这很好，但我无法从我的Model类中操纵Property 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",....)

OR

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

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

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

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

Answer 2

通过使用partial来虚拟地将其合并到页面中。 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都应该在那个框架之外。

通过JavaScript刷新MVC 3 PartialView

2 个答案: