Question

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

这是我当前的代码

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

Answer 1

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

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

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

Answer 2

您可以使用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/

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

部分视图mvc中的jquery Ui工具提示

2 个答案: