Question

我有一个控件，我需要将其显示为页面或模态对话框。在page_load事件中，我查看是否设置了modal属性，如果是，我注册一个脚本来调用jqmodal。这是代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (this.Modal)                                         // Show as a modal dialog
    {

        selector.Attributes.Add("class", "jqmWindow");
        selector.Attributes.Add("style", "width:1100px;height:600px;");
        string script = "<script type=\"text/javascript\">$().ready(function() { $(" + "'#" + selector.ClientID + "').jqm({ modal: true }).jqmShow();});</script>";
        //script = "<script type=\"text/javascript\">confirm('hello');</script>";
        ScriptManager.RegisterStartupScript(this,this.GetType(),"duh",script,false);
    }
}

此控件用于具有更新面板的页面。这一切在Firefox和IE中都适用于INITAL页面加载和任何刷新。但是，当我回发时，我在IE和FF中遇到问题：在IE中，代表模态的div（在这种情况下，选择器）向下移动到右边大约500 px。

在Firefox中，每次回发时，div周围的黑暗区域会逐渐变暗。

如果我从主页中删除更新面板（它实际上在母版页中），则此代码可以正常工作。

我试过在回发时没有执行上面的代码，但只是禁用了jqmodal。我真的很难过如果有人可以帮助我，我会很感激。

Answer 1

问题是在PostBack上，jQuery div向下移动到右边。页面加载后的div看起来像这样（正确呈现）：

DIV class="jqmWindow jqmID1" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; HEIGHT: 600px" _jqm="1" jQuery1238701349279="3">

在Async PostBack之后，它看起来像这样（渲染不正确）：

DIV class="jqmWindow jqmID2" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; TOP: 146px; HEIGHT: 600px" _jqm="2" jQuery1238701490978="5">

删除更新面板解决了这个问题......我不知道这是问题所在。

我创建了一个带有一些相关代码的页面的项目。页面是site.master，List.aspx / cs和PartSelector.ascx / cs

// site.master - nothing in codebehind
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://localhost/Scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://localhost/Scripts/jqueryUI/ui/ui.core.js" type="text/javascript"></script>
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager>
    <div>
        <asp:updatepanel id="upmaincontent" runat="server" updatemode="conditional">
            <contenttemplate>
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


// list.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" CodeFile="List.aspx.cs" Inherits="List" Title="Parts Master List" %>
<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" Namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<%@ Register Src="~/Controls/PartSelector.ascx" TagName="PartSelector" TagPrefix="sam"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
    <center>
        <div><center><h3><%= "Part Selector" %></h3></center></div>
        <div>
            <center>
                <sam:PartSelector ID="PartSelector1" runat="server" Modal="true" ActiveOnly="false" />
            </center>
        </div>
    </center>
</asp:Content>




// list.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.Web.DynamicData;
using System.Linq.Expressions;

public partial class List : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            PartSelector1.ActivateSelector("");
        }
    }
}


// PartSelector.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PartSelector.ascx.cs" Inherits="PartSelector" %>

<link href="http://localhost/Scripts/jqModal/jqModal.css" rel="stylesheet" type="text/css" />
<script src="http://localhost/Scripts/jqModal/jqModal.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
    var IsModal = false;                            // Initialize a variable to indicate if the page is to be displayed inside a jqModal dialaog
    $().ready(function() { displayPage(); });       // Execute dispalyPage when the dom is ready

    function displayPage() {
        confirm('displaypage');     
        IsModal = <%= this.Modal ? "true" : "false" %>  // Set IsModal based on a property in codebehind

        if(IsModal)
        {
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(displayPageAsync);     // handle async postbacks
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler); // clean up before starting an async postback
            $("#selector").addClass("jqmWindow");                           // add some css to resize the display to fit the modal dialog
            $("#selector").css({width:"1100px", height: "600px"});
            $("#selector").jqm({ modal: true, onHide: hidejqm }).jqmShow();
        }
    }

    function displayPageAsync(sender, args)
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (prm.get_isInAsyncPostBack() ) {             // Prevent displayPage from being called twice on the initial page load
            confirm('page loaded, async postback.');
            displayPage();
        }
    }

    function beginRequestHandler(sender, args) {
        confirm('begin async postback');
        $("#selector").jqmHide();   // Hide a dialog from last postback 
    }

    function hidejqm(hash) {
        confirm('hidejqm');
        hash.w.fadeOut('2000', function() { hash.o.remove(); });
    }
</script>

<div id="selector">
    <center>
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to postback" OnClick="Postback_Click"></asp:LinkButton><br /><br />
    <asp:LinkButton ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click" CssClass="CommandButton"></asp:LinkButton>
    </center>
</div>




// PartSelector.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq.Expressions;


public partial class PartSelector : System.Web.UI.UserControl
{
    public bool Modal { get; set; }


    public void ActivateSelector(string searchString)
    {
        this.Visible = true;
    }

    protected void CancelButton_Click(object sender, EventArgs e)
    {
        this.Visible = false;
    }

    protected void Postback_Click(object sender, EventArgs e)
    {
        int x = 1;
    }

}

更新面板中jqmodal的问题

1 个答案: