通過 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>

到目前為止這很好，但我無法從我的 Model class 操縱屬性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）整頁刷新（您只需調用 controller 動作，它 forms 新視圖更新參數）

2) AJAX 更新。 Javascript 對您使用的服務器一無所知。 MVC \ ASP> NET，任何東西。 所以你需要調用 controller ，它會返回新的局部視圖值。 在這里，您可以從服務器返回部分值

    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

通過使用部分來將其虛擬地合並到頁面中。 web 瀏覽器不知道頁面的該部分來自部分（因為 MVC 負責服務器端的所有內容）。 當我需要更新頁面的某個部分時，我過去所做的是創建一個單獨的操作，它只返回部分中的值。 部分不需要包含任何<head>或<body>標簽，只需包含內容即可。 然后，在客戶端，AJAX 輸入數據。

例如，創建一個名為 MyAJAXPartials 的 controller 並為此部分創建一個名為 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 都應該在該框架之外。