画像の1つがクリックされたときに、パーシャルビュー内の画像のリストを更新するにはどうすればよいですか？

Question

設定された順序でサムネイル画像の数を読み込むウェブページに部分的なビューが含まれています。サムネイルをクリックすると、残りのウェブページをリロードせずに、クリックされたサムネイルが最初のイメージになり、残りのリストが順番にリストにリロードされます。

My PartialViewには、サムネイルをロードし、それぞれUrl.Actionを割り当てる次のコードが含まれています。

<% foreach (var image in (ImageModel)ViewData.Model) { %> 
    <a href='<%= Url.Action("ImageList", "ImageView", new { imageFolderName = image.Folder, imageFile = ImageHelper.GetImageName(image.Path) }, null) %>'> 
    <img src="/images/<%= image.Path %>" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt="" /></a> 
<% }%> 

私のコントローラは、最初に含むページがロードされた部分ビューをロードするためのActionResultを持っています。私はまた、PartialViewResultを返すメソッドを含んでいました。

パブリッククラスImageViewController：私は（「イメージリスト」、「イメージリスト」にUrl.Actionを設定した場合、コントローラ

public ActionResult ImageView(string imageFolderName, string imageFile) 
    { 
     return View(new ImageModel(imageFolderName, imageFile)); 
    } 

    public PartialViewResult ImageList(string imageFolderName, string imageFile) 
    { 
     return PartialView(new ImageModel(imageFolderName, imageFile)); 
    } 

...サムネイルがまさに私が望むように更新されますが、ページ全体ではなく更新されます

Url.Actionを（ "ImageList"、 "ImageView" ...に設定すると、含まれているページの一部の表示が更新される代わりに、そのページがなくなり、部分ページがそれは、空の白いWebページに正しい順序ですべてのサムネイルが表示されることです。

私はnoobです。このシナリオに適用される方法で、jQueryやAjax Q、AについてPartialViewsを理解できませんでした。

PartialViewが含まれているページ内の部分的な表示を更新するのではなく、新しいWebページを読み込む場合、PartialViewを返すコントローラメソッドは何ですか？

そして、これがどのように行われるかを示す資料や説明はありますか？

Answer 1

リンクは一般的にページ全体をリフレッシュさせるため、ページの一部だけをリフレッシュするためにajaxを使用する必要があります。

私は次のことをやって行くだろう：

これは、ほぼ同じコードになり、ここでの変更は、それはあなたの元ImageViewアクションを呼び出すことです。そして、私はimageと呼ばれるCSSクラスを追加しました。また、私は（おそらくあなたがすでに持っていること）の画像を囲むdivを追加し、今、あなたはクリックイベントをフックするいくつかのjQueryを使用する必要がありますallmypics

<div id="allmypics"> 
<% foreach (var image in (ImageModel)ViewData.Model) { %> 
    <a class="image" href='<%= Url.Action("ImageView", "ImageView", new { imageFolderName = image.Folder, imageFile = ImageHelper.GetImageName(image.Path) }, null) %>'> 
    <img src="/images/<%= image.Path %>" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt="" /></a> 
<% }%> 
</div> 

それを呼びました。

<script type="javascript"> 
    //use the live method to listen to future clicks 
    $('a.image').live('click', function(e) { 
     e.preventDefault(); // prevent following the link 
     $('#allmypics').load($(this).attr('href')); // load the result of the link into the 'allmypics' element. Use the href attribute of the link as address. 
    }); 
</script> 

私はあなたに理解してもらえるようなコメントを追加しました。

今、私たちは唯一のactionを変更する必要があります。

public ActionResult ImageView(string imageFolderName, string imageFile) 
{ 
    if (Request.IsAjaxRequest()) 
     return PartialView(new ImageModel(imageFolderName, imageFile)); 
    else 
     return View(new ImageModel(imageFolderName, imageFile)); 
} 

コントローラは、Ajaxのリクエストであれば知っているので、それであれば、我々は部分ビューを返します（Imageview.ascxにImageList.ascxの名前を変更することを忘れないでください）、それ以外の場合はページ全体を返します。

さて、これは、ブラウザが（それだけで正常にリンクをたどる）

JavaScriptをサポートしていない場合、いくつかの構文エラーがあるかもしれないので、私はそれをテストしていない動作します。

Answer 2

私が見つけたのは、この状況では部分的な見解は役に立たないということです。私がしたいのは、jQueryを使ってコンテナの一番下にトップサムネイルを追加し、クリックしたサムネイルが一番上になるまでサムネイルのリストを回転させるだけです。

私の見解では、ページが最初に読み込まれるときにサムネイルを読み込みます。

<div id="thumbnails"> 
    <% foreach (var image in (ImageModel)ViewData.Model) { %> 
     <img src="/images/<%= image.Path %>" class="thumbnail" height="<%=(image.Height/4).ToString() %>" width="<%=(image.Width/4).ToString() %>" alt="" /> 
    <% }%> 

</div> 

は、私は

$('.thumbnail').live('click', function() { 

var imageSrc = $(this).attr('src'); 
var n = 0; 

$('img.thumbnail').each(function(n) { 
    if ((imageSrc == $(this).attr('src')) && (n == 0)) { 
     $('div#thumbnails').append(this); 
     return false; 
    } 
    if (imageSrc == $(this).attr('src')) { 
     return false; 
    } 
    else { 
     $('div#thumbnails').append(this); 
    } 
    n++; 
}); 

これは単にDIVから上部サムネイルを切断して停止し、ループを使用して、底部に付加することに努めサムネイルを回転させるためにjQueryのコードを発見しましたサムネイルをクリックすると、クリックされたサムネイルを一番上のサムネイルとして残します。

最初のif文は、クリックされたサムネイルがリスト内の最初のサムネイルであるかどうかをチェックし、サムネイルが1回転する場合、リスト内の最初または2番目のサムネイルをクリックすると、 1。リスト内の他のサムネイルをクリックすると、最初のサムネイルが作成され、それに応じて回転します。