Html.ActionListのツールチップにMVC3ビューを表示するにはどうすればよいですか？

は、私は、リンクのツールチップウィンドウ内の「詳細」ビューを表示するツールチップウィンドウを表示したい：Html.ActionListのツールチップにMVC3ビューを表示するにはどうすればよいですか？

@Html.ActionLink("Details", "Details", new { id=item.Id })

私はこれをどのように実現するのですか？

出典

2011-12-21 InfoLearner

をレスターのJavaScriptでvar param = $(this).attr("param");スニペットされなければなりませんまたは軽量のjavascript/jQueryを使用してツールヒントのような効果を生成することはできますか？ –

jqueryは – InfoLearner

ツールチップを実装しやすくするためのCSSアプローチが見つかりました。 Hereが例です。また、あなたは、いくつかのjQueryを使用する必要があり、一度に動的に代わりにすべてのあなたのツールチップをロードしたい場合は

.info { 
    position:relative; 
    z-index:24; 
} 

.info:hover { 
    z-index:25; 
} 

.info span { 
    display: none 
} 

.info:hover span { 
    display:block; 
    position:absolute; 
    top:2em; left:2em; width:15em; 
    border:1px solid #000; 
}

：あなたのケースでは、あなたがするCSSを定義し

最後に

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".tooltip").bind("mouseenter", function() { 
      $(this).unbind("mouseenter"); 
      var param = {id: "$(this).attr('itemid')"}; 
      $(this).load("/Details/Details", param); 
     }); 
    });

、次のようにあなたがそれを使用することができます。

<span class="info"> 
    @Html.ActionLink("Details", "Details", new { id=item.Id }) 
    <span class="tooltip" itemid=item.Id></span> 
</span>

出典

2011-12-21 18:00:23 Lester

itemid = item.Idはスパンタグで引用符で囲む必要があります。 iveは引用符を削除/追加しようとしました。これは機能しません。マウスの上にマウスを置くと、長い黒い線しか表示されません – InfoLearner

@ KnowledgeSeeker 'itemid =" @ item.Id "'を試してみてください。また、あなたの質問では、コードブロックの前にコードを含めませんでしたが、私は 'item'が既に定義されていると仮定しています。 – Lester

アイテムは既に定義されています。私はリンク上にマウスを置いたときに私が見ているすべての行です。 "item.Id"は今そこにあります。私が行きたいと思っているURLは5で詳細アクションです、詳細/詳細、paramがロード機能にそこにいるのですか？ – InfoLearner

をほとんどすべてのHTML要素はtitle attributeを持つことができ、ほとんどのブラウザは、ツールチップとして、この属性を表示します。

だからあなたのようなもの、属性値の設定を可能にActionLink overloadsのいずれかを使用したい：

@Html.ActionLink("Details", "Details", new {id=item.Id}, new { title = "this is your tooltip" })

出典

2011-12-21 18:04:16 chris

ツールチップにMVC3ビューを表示するにはどうすればよいですか？ – InfoLearner

ツールヒントで部分的な表示をレンダリングするには、非表示のdivでレンダリングし、必要なときに表示する必要があります。いくつかのアイデアについてはhttp://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/を見てください。 – chris

あなたは厳密にネイティブツールチップを使用しますか

出典

2012-11-28 15:27:57

Html.ActionListのツールチップにMVC3ビューを表示するにはどうすればよいですか？

答えて

関連する問題