2012-09-07 19 views
5

私はMVC3を使ってWebサイトを開発しています。私は水平に配置された4つの画像を含む部分的なビューを作成しました。今私は、詳細ビューと私は1つのテキストを表示別のビューがあります。そのテキストにマウスを重ねると、画像の部分図が表示されます。MVC3のテキスト上にマウスオーバーで部分表示を表示する方法は?

これを行う方法?

申し訳ありません私はそれが上記の質問に関連していると思うので、私は同じ質問に別の質問を含めています。だから私の次の問題は -

です。その画像がユーザーに表示され、そのリストから画像を選択すると、これに応じて何らかの操作を実行する必要があります。

私は与えられた答えに取り組んだが、私は表示された画像リストの選択のような他の操作を実行できないことを知りに来た。

これもどのようにするのですか?

答えて

0

JavaScriptを使用する必要があります。おそらくjQuery(javascriptライブラリ)を使用する方が簡単でしょう。

パーシャルビューを隠し要素にラップし、ユーザーがマウスオーバーしたときにこの要素を表示する必要があります。

さらに詳しい情報と例については、http://api.jquery.com/hover/を参照してください。

また、基本的な例についてはこちらをご覧ください:http://jsfiddle.net/49bAz/

+1

ユーザーがマウスでテキストを上書きした場合にのみ部分表示が読み込まれる可能性はありますか? – Priyanka

+0

新しいコンテンツの読み込みと既にページに表示されている隠しコンテンツの表示には違いがあります。あなたは実際に何をしたいですか? –

+0

私は新しいコンテンツをロードしたい – Priyanka

0

はjqueryの

$("#id").mouseover(function() { 
    $.ajax({ 
     url: 'url', 
     success: function (response) { 
     $(response.responseText).appendTo($('body')); 
    } 
    }); 
}); 
0

てみてくださいまた、(画像を識別するパラメータ付き)AJAXを使用して、マウスのホバー上のアクションを呼び出すために決めることができます。 Ajaxコールで部分ビューが返され、divでラップして必要な方法でプレビューすることができます。部分ビューの内容を取得し、moveover上でそれらを表示するために、いくつかのツールチップライブラリ

3

使用jQueryを使用したりhover:たとえば

$("#container").mouseover(function() { 
    $.ajax({ 
    url: "@Url.Action("YourPartialView")", 
    type: "GET", 
    success: function(data) { 
     var htmlx = data; // the View 

     $("#content").append(htmlx); 
     $("#content").slideDown('slow'); 
     } 
    }); 
}); 

どこ#containerあるテキストを保持領域と#contentは、ユーザーがコンテナの上を移動したときに表示される領域です。

2

あなたがホバーに動的部分ビューをロードする場合は、jqueryのAJAX呼び出し使用してそれを行うことができます。

public ActionResult Action(int imageId) 
{ 
    // get the model for your partial view 
    var model = GetModel(imageId); 

    // you can optionally return different result based on request type 
    if (Request.IsAjaxRequest()) 
    { 
      // update with actual path of your partial view 
      return PartialView("path-to-your-view", model); 
    } 
} 
:あなたはこのと同様の作用を持っている必要がありますあなたのコントローラで

$("img.your-class").mouseover(function() { 

    // get the image ID - modify according to your markup 
    var imageId = $(this).data('image-id'); 

    $.ajax({ 

     // use the imageId from above here 
     url: "add-your-view-url", 

     success: function(data) { 
      $("#target-div-id").html(data); 
     } 

    }); 

}); 

関連する問題