通過JavaScript刷新MVC 3部分視圖

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）和我的視圖模型的參數變量發生變化的一個。 到目前爲止，它的工作，因爲警報框顯示我剛剛設置的值。 我現在想重新加載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

好吧。有2種方式更新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來虛擬合併到頁面中。網頁瀏覽器不知道該頁面的部分來自部分內容（因爲MVC負責處理所有服務器端）。當我需要頁面的某個部分進行更新時，我所做的事情是創建一個單獨的操作，該操作僅返回部分中的值。該部分不需要包含任何<head>或<body>標籤，只是內容。然後，在客戶端，AJAX中的數據。

例如，創建一個名爲MyAJAXPartials的控制器，併爲此部分調用MyPartial（如果我是你，則更改這些名稱）。然後，使該操作呈現一個常規視圖（不是部分視圖），但使用上面發佈的相同代碼。使用onclick="..."不是首選的方式做活動綁定，如果你正在使用jQuery（和你給表的ID），你可以這樣做：

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

同樣，而是採用部分，主頁上建立一個框架，形成具有<div>標籤的內容，給它喜歡的含量 - 面積的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都應該在該框架之外。