来自部分视图 mvc 的 jquery Ui 工具提示答案

【问题标题】：jquery Ui tooltip from partial view mvc来自部分视图 mvc 的 jquery Ui 工具提示
【发布时间】：2015-01-11 05:29:49
【问题描述】：

我想知道是否可以在工具提示中显示部分视图。我正在尝试设计一个包含一组学生的页面，当我将鼠标悬停在一个学生上时，会出现一些关于他们的详细信息、他们的科目列表和其他一些详细信息。我知道我可以将项目放在标题中，但我无法从那里获得我需要的所有信息，而我的详细信息视图包含我需要的信息。提前致谢

这是我当前的代码

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

这是我的详细信息视图

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

【问题讨论】：

标签： asp.net-mvc jquery-ui jquery-ui-tooltip

【解决方案1】：

您可以使用the content option 来制作您需要的工具提示内容。 MVC 代码可以放置在页面中的任何位置，只要您可以使用 jQuery 来抓取它（例如，在 noscript 标记或类似标签中）：

$(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();
    }
});

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

由于您可以在content 函数中使用$(this)，您可以将其与HTML 数据属性一起使用，为不同的项目返回不同的工具提示；取决于您的网页结构。

【讨论】：

【解决方案2】：

我会使用工具提示的 open 方法并在那里通过 AJAX 设置工具提示对象的内容：

$(document).ready(function () {
    $(document).tooltip({ open: function(event, ui) {
        $(ui.content).load("[url for returning view contents]");
    }
});

您可能需要使用工具提示的实例属性或可能通过 open 函数的 ui 参数来检索您的学号或其他标识符以正确查询您的部分视图，但这应该有助于您继续。

【讨论】：