0

我有这个 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。现在它有一个类，但如果我的表单中有多个这样的渲染部分，当我将鼠标悬停在 1 上时，所有对话框都会打开<a>

那么 MVC 可以呈现一个我可以使用的 ID 吗？或者我可以改变 jQuery 代码来完成这项工作，或者我不应该使用渲染部分吗？

编辑：额外的问题

next() 不起作用。这是现在的 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');
        }
    });
});

渲染部分：

<%@ 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>
4

3 回答 3

2

你可以使用一个类，但是渲染找到你想要的相对的弹出窗口，像这样：

首先，也将其更改为一个类：

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

你可以在这里试一试。

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

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

于 2010-09-15T10:41:52.950 回答
1

我想我理解你的问题。

这会有所帮助吗： 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>
于 2010-09-15T10:45:49.907 回答
0

如果要在用户控件中设置 href id，则有一个重载Html.RenderPartial接受ViewDataDictionary，它只是 ViewData，您可以将其传递给 infoflyout.ascx，然后将 id 设置href为：

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

于 2010-09-15T10:50:06.340 回答