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 コードを変更してこれを機能させることはできますか、それとも renderpartial を使用すべきではありませんか?

編集：追加の質問

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ありますhref。

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

于 2010-09-15T10:50:06.340 に答える