Question

我有这个infoflyout.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<script type="text/javascript">
    $(document).ready(function () {
        $("#flyoutdialog").dialog({ autoOpen: false });

        $('#opener').click(function () {
            $("#flyoutdialog").dialog('open');
            return false;
        });
    });
</script>
<a class="flyouticon" href="#">
    <img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" /></a>

<div id="flyoutdialog" title="<%: Model.Title %>">
    <p>
        <%: Model.Message %></p>
</div>

这应该可以帮助我使表格更容易理解。

我想要的是一个表格背后的问号图标。当用户悬停时，会打开带有一些额外信息的对话框。徘徊在事物上以及打开和关闭的jquery，我相信我能搞清楚。

我想将renderpartial称为：

<% Html.RenderPartial("infoflyout", new {Title="This is the title", Message="You have to fill in a date, dummy!"}); %>

问题是，如何为<a>元素提供ID。现在它有一个类，但是如果我的表单中有多个这样的renderpartials，当我将鼠标悬停在1 <a>上时，所有对话框都会打开

MVC可以呈现我可以使用的ID吗？或者我可以改变jQuery代码以使其工作，或者我不应该使用renderpartial吗？

编辑：额外的问题

下一个（）不起作用。这是现在的JS文件：

$(document).ready(function () {
    $(".flyoutdialog").dialog({ autoOpen: false });

    $('.flyouticon').click(function () { return false });

    $('.flyouticon').hoverIntent({
        over: function () {
            // alert("over");
            alert($(this).attr('class')); //gives me flyouticon
            alert($(this).next(".flyoutdialog").attr('class')); //undefined
            alert($(this).next().html()); //null
            $(this).next(".flyoutdialog").dialog('open'); //no dialog shows.
        },
        timeout: 500,
        out: function () {
            // alert("and out");
            $(this).next(".flyoutdialog").dialog('close');
        }
    });
});

renderpartial：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<a href="#" class="flyouticon">
    <img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" /></a>
<div class="flyoutdialog" title="<%: Model.Title %>">
    <p>
        <%: Model.Message %></p>
</div>

HTML

    <div class="editor-label">
        <label for="Postcode">Postcode</label>
    </div>
    <div class="editor-field">
        <input id="postcode" name="postcode" type="text" value="" />
<a href="#" class="flyouticon">
    <img src="/img/help.png" alt="Flyout" width="16" /></a>
<div class="flyoutdialog" title="This is the title">
    <p>

        You have to fill in a date</p>
</div>

    </div>

Answer 1

你可以使用一个类，但渲染找到你想要的弹出窗口relatively，如下所示：

首先，将它改为一个类：

<div class="flyoutdialog" title="<%: Model.Title %>">

然后从控件中删除所有脚本，并在外部JS或页面中使用它，但您只需要包含一次：

$(function () {
  $('.flyouticon').each(function() {
    var dlg = $(this).next(".flyoutdialog");
    $(this).click(function() {
      dlg.dialog('open');
      return false;
    });
  });
  $(".flyoutdialog").dialog({ autoOpen: false });
});

You can give it a try here

现在它从您点击的图标转到.next()同级class="flyoutdialog"，因为它是相对的，您不需要不同的ID，您可以包含一次脚本以适用于控件的所有实例。

注意：我们必须在这里以奇怪的方式迭代，因为调用.dialog()会将元素移动到<body>元素的末尾，所以我们需要保留一个引用为每个锚定它。

Answer 2

我想我理解你的问题。

这有用吗： Html标记

<div class="someCssClass">
    <a class="flyouticon" href="#">
        <img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" />
    </a>

    <div id="flyoutdialog" title="<%: Model.Title %>">
        <p>
            <%: Model.Message %>
        </p>
    </div>
</div>

的JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $("#flyoutdialog").dialog({ autoOpen: false });

        $(".flyouticon").click(function(e){
            $(this).parent().children("#flyoutdialog").dialog('open');
            e.preventDefault();
        });
    });
</script>

Answer 3

如果你想在usercontrol中设置href id，Html.RenderPartial有一个重载接受ViewDataDictionary，它只是ViewData，你可以传递给infoflyout.ascx和然后将href的ID设置为：

<a class="flyouticon" href="#" id='<%=ViewData["HrefId"]%>'>

带选择器的MVC RenderPartial jQuery问题（ID）

3 个答案: