проблема с jqmodal внутри панели обновления - PullRequest
Новая
       14

проблема с jqmodal внутри панели обновления

1 голос
/ 01 апреля 2009

У меня есть элемент управления, который мне нужно отобразить как страницу или модальное диалоговое окно. В событии page_load я смотрю, установлено ли модальное свойство, и если да, я регистрирую скрипт для вызова 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 для начальной загрузки страницы и любых обновлений. Однако, когда я отправляю пост, у меня возникают проблемы в IE и FF: В IE элемент div, представляющий модальный режим (в данном случае селектор), сдвинут вниз и вправо примерно на 500 пикселей.

В Firefox затемненная область вокруг div с каждым постбэком становится все темнее.

Если я удаляю панель обновления со страницы хоста (на самом деле она находится на главной странице), этот код работает.

Я пытался не выполнять приведенный выше код при обратной передаче, но это просто отключает jqmodal. Я действительно в замешательстве Если кто-то может помочь с этим, я был бы признателен.

1 Ответ

0 голосов
/ 03 апреля 2009

Проблема в том, что в PostBack div jQuery перемещается вниз и вправо. 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;
    }

}
...