jquery - 在 Bootstrap Popover 内容中渲染部分 View

Question

在我的 MVC View 中，我有以下内容:

<a href="#" tabindex="0" data-toggle="popover" data-trigger="hover" data-container="body" data-html="true" data-content="@Html.Action("Popover","Client")">Simon Jones</a>

这按照我想要的方式工作，加载 Client Controller 中的 Popover 操作返回的部分 View 。但是，我希望能够以最小的努力，无论客户端的名称出现在应用程序中的何处，都会自动添加该弹出窗口。像这样的东西:

<a href="#" class="clientPopover">Simon Jones</a>

在单独的文件中使用 Javascript，链接到每个页面，如下所示:

$(".clientPopover").popover({
    html: true,
    container: 'body',
    trigger: 'hover',
    content: '@Html.Action("Popover","Client")'
    })

我意识到我无法在 Javascript 中使用 HTML Helper，因为我在这里编写了它，但我尝试了多种不同的方法来完成此操作，但没有成功。

关键要求是我可以很容易地指定一个元素应该附加一个弹出窗口，该弹出窗口在其内容中呈现部分 View 。我希望在整个应用程序中使用不同的数据项来实现相同的目标，而不仅仅是客户端，所以我的目标是一个地方来存储每个数据项的弹出窗口的部分 View 的位置(例如客户端、人员、建筑物等)。

编辑: 我简化了我的要求以使这个问题更容易理解，但我现在意识到这导致了一个适用于我的简化问题但不适用于我的实际问题的答案。有人建议我可以将 Popover 内容加载到页面上的隐藏元素中，然后根据需要在 Popover 中显示它。然而，实际上我的页面可能会同时显示许多不同的客户名称(例如在表格中)，并且将鼠标悬停在每个名称上会在弹出窗口中显示该客户的详细信息。我可以使用 Ajax 每次在填充 Popover 之前更新隐藏元素的内容，但我怀疑这是否会非常高效，并且感觉过于复杂。

我最初希望的是，一旦我弄清楚如何调用 Action 来为一个客户端加载 Popover 内容，我就能够扩展该解决方案以传递客户端的 id，以便Popover 的数据是动态加载的。我真的认为这会比看起来更简单!

Answer 1

您可以在服务器端或客户端将您的链接包含在客户端名称中。

在客户端我会这样做:

/* assume there is a main container with your content that has the class .content */ 
var html = $('.content').html();
var linkHtml = '<a href="#" class="clientPopover">Simon Jones</a>';
var newHtml = html.replace(/Simon\s+Jones/gi, linkHtml); 
$('.content').html(newHtml);

这是一个有效的 jsfiddle: http://jsfiddle.net/s9Laumpq/

然而，更聪明的方法是在服务器端执行此操作，因为 JavaScript 方法可能会破坏将事件处理程序附加到代码中某些 html 元素的其他脚本。在 asp.net 中，您需要此函数来执行类似的操作: https://msdn.microsoft.com/en-us/library/xwewhkd1%28v=vs.110%29.aspx

对于第二个问题，您可以将 popover-content 写入主 html 文件中的 javascript 变量中

var popoverContent = '@Html.Action("Popover","Client")';

并在单独的 javascript 文件中使用该变量

$(".clientPopover").popover({
    html: true,
    container: 'body',
    trigger: 'hover',
    content: popoverContent 
});

只要确保变量的赋值发生在包含 javascript 文件之前即可。