从局部视图MVC jQuery UI的工具提示 [英] jquery Ui tooltip from partial view mvc

问题描述

我不知道是否有可能有一个提示的局部视图显示。我试图设计出拥有一批学生的页面，当我将鼠标悬停在一个学生的一些细节似乎他们，他们的臣民和其他一些细节的清单。我知道我可以把项目的冠军，但我不能让我从那里需要的所有信息，而我的详细信息视图有我需要的信息。在此先感谢

下面是我目前的code

 的IEnumerable＆LT; StudentApp.Models.Student＆GT;@foreach（以型号VAR项）
{＆LT; D​​IV CLASS =COL-MD-2 COL-SM-4＆GT;           ＆LT; IMG标题=@ item.Name，@ item.StudentNo级=IMG IMG响应SRC =@ item.StudentPic/＆GT;＆LT; / DIV＆GT;}    @section脚本
{
  ＆LT;脚本类型=文/ JavaScript的＆GT;
      $（文件）。就绪（函数（）{
          （文档）$ .tooltip（）;
      }）;
   ＆LT; / SCRIPT＆GT;
}
 

下面是我的详细信息视图

 ＆LT; D​​IV CLASS =显示标签＆GT;
     @ Html.DisplayNameFor（型号=＆GT; model.Name）
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =显示字段＆GT;
    @ Html.DisplayFor（型号=＆GT; model.Name）
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =显示标签＆GT;
     @ Html.DisplayNameFor（型号=＆GT; model.StudentNo）
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =显示字段＆GT;
    @ Html.DisplayFor（型号=＆GT; model.StudentNo）
＆LT; / DIV＆GT;@foreach（在Model.Students VAR项）
{
   ＆LT;立GT; @ item.Course＆LT; /李＆GT;
}
 

解决方案

您可以使用的内容选项做任何你需要他们的工具提示的内容。在MVC code可以随时随地在你的页面放置，只要您可以使用jQuery来抓住它（例如，在无脚本标签或类似）：

 的$（document）.tooltip（{
    项目：.myTooltipClass
    内容：函数（）{
        //的.text（）将取消转义包含的任何HTML和正确渲染它;
        //使用的.html（）如果您的内容不包含其他HTML
        返回$（＃无脚本myMvcContent）文本（）。
    }
}）;
 

下面是一个小提琴演示： http://jsfiddle.net/guke50uw/

您也可以使用 $（本）的里面的内容功能，你可以用HTML使用的那数据属性返回不同的项目不同的提示;取决于你的网页的结构。

I'm wondering is it possible to have a partial view display in a tooltip. I'm trying to design a page that has a group of students and when I hover over a student some details appear about them, a list of their subjects and some other details. I know I can put the items in the title, but I can't get all the info I need from there, and my details view has the info I need. Thanks in advance

Here's my current code

IEnumerable<StudentApp.Models.Student>

@foreach (var item in Model)
{  <div class="col-md-2 col-sm-4">

           <img  title="@item.Name, @item.StudentNo " class="img img-responsive" src="@item.StudentPic" />

</div>

}

    @section scripts
{
  <script type="text/javascript">
      $(document).ready(function () {
          $(document).tooltip();
      });
   </script>
}

Here's my details view

  <div class="display-label">
     @Html.DisplayNameFor(model => model.Name)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.Name)
</div>


<div class="display-label">
     @Html.DisplayNameFor(model => model.StudentNo)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.StudentNo)
</div>

@foreach (var item in Model.Students)
{
   <li>@item.Course</li>
}

解决方案

You can use the content option to make the tooltip's contents whatever you need them to be. The MVC code could be placed anywhere in your page, so long as you can use jQuery to grab it (eg. in a noscript tag or some such):

$(document).tooltip({
    items: ".myTooltipClass",
    content: function() {
        // .text() will unescape any contained HTML and render it properly;
        // use .html() if your content doesn't contain additional HTML
        return $("noscript#myMvcContent").text();
    }
});

Here's a fiddle demo: http://jsfiddle.net/guke50uw/

As you can use $(this) inside the content function, you can make use of that with HTML data attributes to return different tooltips for the different items; depends on how your page is structured.

这篇关于从局部视图MVC jQuery UI的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！