[ASP.net WebForm] 解決放在BlockUI裡的UpdatePanel失效，沒有反應

2012-03-10

之前工作上遇到這樣的情形，因為要在BlockUI裡做連動下拉選單

但BlockUI跳出來的區域其實是原本網頁畫面裡的div，DropDownList若PostBack的話，整個畫面會刷新把div洗掉

所以很直覺地用UpdatePanel去包住那些下拉選單做無刷新的效果

但這樣又會產生另一個問題：

裡頭的下拉選單不管怎麼拉，第二層選單資料都沒出來

Sample Code:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="include" TagName="ddlEmployee" Src="~/include/wucddlEmployee.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--引用jQuery核心函式庫--%>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <%--引用blockUI函式庫--%>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(init);

        function init() {

            $("#showDiv").click(function () {
                $.blockUI({ message: $('#block') });
            });
            $('#closeUI').click(function () {
                $.unblockUI();
                return false;
            });
        }
     

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
     
    
    <input id="showDiv" type="button" value="顯示隱藏的div" />

    <!--↓blockUI要顯示的div-->
    <div style="cursor: default; display: none;" id="block">
    <!--裡頭再包一層UpdatePanel-->
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <!--WebUserControl的連動下拉選單，詳細做法可參考喵大的文章：http://www.dotblogs.com.tw/topcat/archive/2008/06/06/4247.aspx-->
            <include:ddlEmployee ID="ddlEmployee1" runat="server" />
            <include:ddlEmployee ID="ddlEmployee2" runat="server" />
            <include:ddlEmployee ID="ddlEmployee3" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
        <a style="float: right;" id="closeUI" href="#close">關閉</a>
    </div>
    </form>
</body>
</html>

解決辦法：

打開blockUI核心函式庫檔案jquery.blockUI.js，修改裡頭的程式碼

找到這行

var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);

body換成form

var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);

再找到這行

els = $('body').children().filter('.blockUI').add('body > .blockUI');

一樣body換成form

els = $('form').children().filter('.blockUI').add('form > .blockUI');

修改完存檔後，再執行一次程式，連動下拉選單就正常了

參考：JQuery BlockUI with UpdatePanel Viewstate Issue

jQuery BlockUI官網

2012.3.10晚上追記該員工資料連動下拉選單的寫法

先宣告介面


using System;
using System.Collections.Generic;
using System.Web;

 
public interface IOrder    
{
     void notifyChange(string id);
}
 

public interface  IPublisher  
{
    //加入訂閱者
     void addOrder(IOrder order);
}

準備一個WebUserControl當做一個DropDownList


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

<asp:DropDownList ID="ddlEmployee" runat="server" AutoPostBack="True" 
    DataSourceID="sdsEmployeeID" DataTextField="EmployeeName"   
    DataValueField="EmployeeID" 
    onselectedindexchanged="ddlEmployee_SelectedIndexChanged">
</asp:DropDownList>
<asp:SqlDataSource ID="sdsEmployeeID" runat="server" 
    ConnectionString="<%$ ConnectionStrings:NWind %>"  
    SelectCommand="Select '-1' As EmployeeID,N'請選擇' As EmployeeName
                   Union All
                   SELECT EmployeeID, EmployeeName
                   FROM Employees 
                   Where (@EmployeeID ='' Or ManagerID=@EmployeeID)
                   ORDER BY EmployeeID ASC">
                   <SelectParameters>
                       <asp:Parameter Name="EmployeeID" Type="String" ConvertEmptyStringToNull="false"   DefaultValue=""   />
                   </SelectParameters>
</asp:SqlDataSource>

WebUserControl的Code-Behind


using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class include_wucddlEmployee : System.Web.UI.UserControl,IPublisher,IOrder
{
    //此發行者擁有的訂閱者
    List<IOrder> myOrders = new List<IOrder>();
    //加入訂閱者
    public void addOrder(IOrder order)
    {
        this.myOrders.Add(order);
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }


    protected void ddlEmployee_SelectedIndexChanged(object sender, EventArgs e)
    {

        foreach (IOrder order in this.myOrders)
	    {
            string EmployeeID = this.ddlEmployee.SelectedValue;
            order.notifyChange(EmployeeID);
	    }
         


    }

    public void notifyChange(string id)
    {
        this.sdsEmployeeID.SelectParameters["EmployeeID"].DefaultValue = id;
    }
}

最後把WebUserControl拉到Default.aspx畫面上


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="include" TagName="ddlEmployee" Src="~/include/wucddlEmployee.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--引用jQuery核心函式庫--%>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <%--引用blockUI函式庫--%>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(init);

        function init() {

            $("#showDiv").click(function () {
                $.blockUI({ message: $('#block') });
            });
            $('#closeUI').click(function () {
                $.unblockUI();
                return false;
            });
        }
     

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
         
    <input id="showDiv" type="button" value="顯示隱藏的div" />
    <div style="cursor: default; display: none;" id="block">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <include:ddlEmployee ID="ddlEmployee1" runat="server" />
            <include:ddlEmployee ID="ddlEmployee2" runat="server" />
            <include:ddlEmployee ID="ddlEmployee3" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
        <a style="float: right;" id="closeUI" href="#close">關閉</a>
    </div>
    </form>
</body>
</html>

回首頁