リフレッシュMVC 3 PartialViewはJavaScriptを

Question

を経由して、私はいくつかのPartialViewsを含むASP.NET MVC 3のビューを持っています。そのうちの1人は、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のパラメータ変数が変更されていることです。 これまでのところ、アラートボックスに設定した値が表示されるため、動作します。 は、私は今、彼らは私が変更 パラメータに依存して@Model.Headerなど@Model.ImageUrlが更新されるようにPartialViewをリロードします。 どうすればいいですか？ ああところで、私は...

乾杯、
サイモンJavaScriptに全く新たなんだ

EDIT：
[OK]を、2つの答えは、上記の少しを助けるでしたが、私はのようにこれまでのところ良いです

@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> 

が、私はプロパティを操作するために管理することはできません：それは難しいのようなものだ本当のJavaScriptのnoobのは...
私が今持っていることですmy Modelクラスの。したがって、@Model.Parameter = anyValue;のコールは機能しません。
JavaScriptでこれを行うにはどうすればよいですか？

EDIT 2： [OK]を、私は最終的にチャームが提案した方法で解決しました。 JSONの方法。
しかし、すべての可能なURLとヘッダはDictionary<string, string>に格納されているように、私は私のViewModelを変更し、すべての最初の。それから私の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ページを更新するには2つの方法があります。

1）全ページの更新は、（あなたは、単にコントローラのアクションを呼び出すには、更新されたパラメータで新しいビュー）

2）AJAXの更新を形成しています。 Javascriptはあなたが使っているサーバーのことについて何も知らない。 MVC \ ASP> NET、何でも。だからあなたが必要なのは、新しい部分ビュー値を返すコールコントローラです。ここでは、

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

としてサーバーから部分値を返し、その後、あなたは

ようにするJsonResult経由で更新されたデータを返すことができ

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

OR

のようにjQueryを使っていくつかのコンテナに返されたHTMLを割り当てることができます

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

してJSで好きなページをフォーマットします。あなたはJsonを取得して、それを解析し、あなたが好きなすべてのページデータを手動で設定します。

MVC 3で長時間（1と2のみ）動作しませんでした。しかし基本的なことは同じだと思います。 幸運を祈る！

Answer 2

部分的にを使用することによって、ページに実質的にマージされます。 Webブラウザは、ページのその部分が部分的なものであったことを知らない（MVCはすべてのサーバー側を処理するので）。私がページの特定のセクションを更新する必要があるときに私が過去に行ったことは、部分的な値だけを返す別個のアクションを作成することです。部分的には、<head>タグまたは<body>タグを含める必要はなく、コンテンツのみです。次に、クライアント側で、AJAXのデータ。

たとえば、MyAJAXPartialsというコントローラを作成し、MyPartialという名前のこのセクションのアクションを作成します。次に、そのアクションを通常のビュー（部分的なものではない）にレンダリングさせますが、上記のコードと同じコードを使用します。

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

を繰り返しますが、代わりに部分を使用しての、メインページに：onclick="..."を使用すると、jQueryのを（そしてあなたがテーブルにIDを与える）を使用している場合は、あなたが行うことができ、結合アクションを行うための好ましい方法ではありません

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

次に、あなたが変更する必要があるたびに（再び、私はあなたがjQueryのを持っていると仮定）、<div>タグ付きコンテンツを形成し、それをcontentAreaなどのIDを与え、次のJavaScriptを使用してフレームを構築新しいURLを要求することによって、そのフレームのコンテンツをリロードするだけです。たとえば、/MyAJAXPartials/MyPartialを要求する代わりに、/MyAJAXPartials/MyPartial/Value1とすることができます。 JavaScriptはすべてそのフレームの外側にある必要があります。