代码之家 › 专栏 › 技术社区 › Stefanvds

带有选择器(ID)的MVC RenderPartial jQuery问题

renderpartial jquery-ui asp.net-mvc jquery

0

Stefanvds · 技术社区 · 14 年前

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

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

我想把渲染部分称为:

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

<a> 元素ID。现在它有一个类,但是如果我的窗体中有多个这样的renderparties,当我将鼠标悬停在1上时,所有对话框都将打开 <

那么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>

3 回复 | 直到 14 年前

1

2

Nick Craver 14 年前

relatively ,如下所示:

首先,也将其更改为类:

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

然后移除 全部的

$(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"

注: .dialog() 将元素移动到 <body>

2

1

Zack 14 年前

我想我理解你的问题。

这是否有助于: 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>

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

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

3

0

Siva Gopal 14 年前

如果要在usercontrol内设置href id,则有一个重载 Html.RenderPartial ViewDataDictionary ,它只不过是ViewData,可以传递给信息弹出.ascx然后设置 href 作为:

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