Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > .NET Framework > Forum > ขอสอบถามเรื่องการทำ lookup โดยใช้ ModalPopupExtender หน่อยครับผม

ขอสอบถามเรื่องการทำ lookup โดยใช้ ModalPopupExtender หน่อยครับผม

เริ่มหัวข้อใหม่

Guest

คือผมต้องการทำ ModalPopupExtender โดยใช้ AjaxToolKit สองอันในหน้าเพจเดียวครับ อันแรกเป็น ทำเป็น Progress สวยๆเพื่อความสวยงาม ส่วนอีกอันทำเป็น lookup เป็น popup ขึ้นมาครับ ซึ่งปัญหาอยู่ที่อันที่ 2 ครับ ซึ่งอันที่ 2 นั้นเวลผมคลิกให้เป็น popup ขึ้นมา มันจะขึ้นมาทับกับหน้าเพจหลักเลยครับ วานรบกวนพีๆช่วยดูโค้ดให้ผมหน่อยครับ
อันนี้เป็นส่วนของของหน้าหลักที่ฝัง ModalPopupExtender ลงไปครับ

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/masterpage/MasterSiteB.master" CodeFile="test.aspx.cs" Inherits="webpage_product_test" %>


<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<%@ Register src="../../lookup/lookup_fruit.ascx" tagname="lookup_fruit" tagprefix="uc1" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ctpBody" Runat="Server">

<script type="text/javascript" language="javascript">
    var ModalProgress = '<%= ModalProgress.ClientID %>';
    </script>
    <asp:Panel runat="server" ID="pnlMain">  
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnableScriptGlobalization="True">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="updatePanel" runat="server">
                        <ContentTemplate>
                        <table  border="0" cellpadding="0" cellspacing="0" class="tbl_main">
    <tr height="10px" align="center">
    <td colspan=3></td>
    </tr>
    <tr align="center">
    <td colspan="3" width="95%" bgcolor="white">
    <table  border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr align="center" height="8px" valign="top">
    <td style="height: 8px;width:8px;" alt=""><img src="../../images/left_up.jpg" /></td>
    <td width="100%" class="tdHeader2"></td>
    <td style="height: 8px;width:10px;"  alt="" valign="top"><img src="../../images/right_up2.jpg" /></td>
    </tr>
    <tr>
    <td rowspan="3" class="tdHeader_left"></td>
    <td width="100%" align="center">
    <table border="0" cellpadding="0" cellspacing="0" height="35" width="100%" >
    <tr>
    <td class="tdTitleMenu_l" width="6px"></td>
    <td class="tdTitleMenu_m" width="99%" align="left">
        <table border=0 cellpadding=0 cellspacing=0>
            <tr>
                <td width="10px">
                    </td>
                <td><img src="../../images/menu/03/1product.png" /></td>
                <td width="10px"></td>
                <td class="txt_page_menu_header">สินค้า</td>
            </tr>
        </table>
        </td>
    <td class="tdTitleMenu_r" width="9px"></td>
    </tr>
    </table>
    </td>
    <td width="8px" rowspan="3" style="background-image: url('../../images/l_right_middle.jpg');">
    <img src="../../images/l_right_middle.jpg" /></td>
    </tr>
    <tr height="10px">
    <td></td>
    </tr>
    <tr>
    <td align="center">
    <table border="0" cellpadding="0" cellspacing="0"  width="95%">
    <tr align="center" width="100%">
    <td>
    <fieldset style="width: 99.5%; text-align: center;" align="center" >
    <legend class="txt_box_detail">จัดการสินค้า</legend>
    <table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
    <tr height="10px">
    <td colspan="3">&nbsp;</td>
        <td style="width: 8%; text-align: left;">
            &nbsp;</td>
        <td style="width: 19%; text-align: left">
            &nbsp;</td>
        <td style="text-align: left; width: 21%;">
            &nbsp;</td>
    </tr>
        <tr height="10px">
            <td colspan="3">
            </td>
            <td style="width: 8%">
                &nbsp;</td>
            <td style="width: 19%">
                &nbsp;</td>
            <td style="text-align: left; width: 21%;">
                &nbsp;</td>
        </tr>
    <tr>
        <td style="text-align:right; width: 4%;">
        </td>
        <td style="text-align:left; width: 16%;" class="txt_title_normal">รหัสสินค้า</td>
        <td style="text-align:left; width: 25%;">
            <asp:TextBox ID="txtProductCode" runat="server" Width="177px"></asp:TextBox>
        </td>
        <td style="text-align:left; font-family: Tahoma; width: 8%;">
            &nbsp;</td>
        <td style="text-align:left; font-family: Tahoma; width: 19%;">
            <strong>ระยะเวลาการรับประกัน</strong></td>
        <td style="text-align:left; width: 21%;">
            <asp:TextBox ID="txtProductWARRANTY" runat="server" Width="177px" 
                style="margin-left: 0px;"></asp:TextBox>
        </td>
        <td style="text-align: left;" width="60%">
            <strong>วัน</strong></td>
        </tr>
        
        <tr>
            <td style="text-align:right; width: 4%;">
            </td>
            <td class="txt_title_normal" style="text-align:left; width: 16%;">
                ประเภทสินค้า</td>
            <td style="text-align:left; width: 25%;">
                <asp:TextBox ID="txtProductType" runat="server" Width="177px"></asp:TextBox>
                <asp:ImageButton ID="ImageButton2" runat="server" 
                    ImageUrl="~/images/find.png" Width="16px" />
            </td>
            <td style="text-align:left; font-family: Tahoma; width: 8%;">
                &nbsp;</td>
            <td style="text-align:left; font-family: Tahoma; width: 19%;">
                <b>ราคาขายปลีก</b></td>
            <td style="text-align:left; width: 21%;">
                <asp:TextBox ID="txtProductCost" runat="server" style="font-weight: bold" 
                    Width="177px"></asp:TextBox>
            </td>
            <td style="text-align: left;">
                <b>บาท</b></td>
        </tr>
        
        <tr>
            <td style="text-align: right; width: 4%;">
                &nbsp;</td>
            <td class="txt_title_normal" style="text-align: left; width: 16%;">
                ยี่ห้อ</td>
            <td style="text-align: left; width: 25%;">
                <asp:TextBox ID="txtProBrand" runat="server" Width="177px"></asp:TextBox>
            </td>
            <td style="text-align: left; font-family: Tahoma; width: 8%;">
                &nbsp;</td>
            <td style="text-align: left; font-family: Tahoma; width: 19%;">
                <b>ราคาขายส่ง</b></td>
            <td style="text-align: left; width: 21%;">
                <asp:TextBox ID="txtProductRetail" runat="server" style="font-weight: bold" 
                    Width="177px"></asp:TextBox>
            </td>
            <td style="text-align: left;">
                <b>บาท</b></td>
        </tr>
       
        <tr>
            <td style="text-align: right; width: 4%;">
                &nbsp;</td>
            <td class="txt_title_normal" style="text-align: left; width: 16%;">
                รุ่น</td>
            <td style="text-align: left; width: 25%;">
                <asp:TextBox ID="txtProModel" runat="server" Width="177px"></asp:TextBox>
            </td>
            <td style="text-align: left; font-family: Tahoma; width: 8%; font-weight: 700;">
                &nbsp;</td>
            <td style="text-align: left; font-family: Tahoma; width: 19%; font-weight: 700;">
                <b>ราคาทุน</b></td>
            <td style="text-align: left; width: 21%;">
                <asp:TextBox ID="txtProductWhoresail" runat="server" style="font-weight: bold" 
                    Width="177px"></asp:TextBox>
            </td>
            <td style="text-align: left;">
                <b>บาท</b></td>
        </tr>
        
        <tr>
            <td style="text-align: right; width: 4%;">
                &nbsp;</td>
            <td class="txt_title_normal" style="text-align: left; width: 16%;">
                จำนวนบีทียู</td>
            <td style="text-align: left; width: 25%;">
                <asp:TextBox ID="txtProBTU" runat="server" Width="177px"></asp:TextBox>
            </td>
            <td style="text-align: left; font-family: Tahoma; width: 8%;">
                &nbsp;</td>
            <td style="text-align: left; font-family: Tahoma; width: 19%;">
                <b>สถานะผลิตภัณฑ์</b></td>
            <td style="text-align: left; width: 21%;">
                <asp:DropDownList ID="dropStatus" runat="server">
                    <asp:ListItem Value="A">ทุกสถานะ</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td style="text-align: left; width: 56%;">
                <b></b></td>
        </tr>
        
        <tr>
            <td style="text-align: right; width: 4%;">
                &nbsp;</td>
            <td class="txt_title_normal" style="text-align: left; width: 16%;">
                ตัวแทนจำหน่าย</td>
            <td colspan="4" style="text-align: left;">
                <asp:TextBox ID="txtProBTU0" runat="server" Width="177px"></asp:TextBox>
                <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/images/find.png" 
                    Width="16px" />
            </td>
            <td style="text-align: left; width: 33%;">
                &nbsp;</td>
            <td style="text-align: left;">
                &nbsp;</td>
        </tr>
        <tr>
            <td style="text-align: right; width: 4%;">
                &nbsp;</td>
            <td class="txt_title_normal" style="text-align: left; width: 16%;">
                รายละเอียดสินค้า</td>
            <td colspan="4" style="text-align: left;">
                <asp:TextBox ID="txtProDetail" runat="server" Height="47px" 
                    TextMode="MultiLine" Width="408px"></asp:TextBox>
            </td>
            <td style="text-align: left; width: 33%;">
                &nbsp;</td>
            <td style="text-align: left;">
                &nbsp;</td>
        </tr>
        <tr>
            <td style="text-align: right; width: 4%;">
                &nbsp;</td>
            <td class="txt_title_normal" style="text-align: left; width: 16%;">
                &nbsp;</td>
            <td style="text-align: left; width: 25%;">
                &nbsp;</td>
            <td style="text-align: left; width: 8%;">
                &nbsp;</td>
            <td style="text-align: left; " colspan="2">
                <b>
                
                </b></td>
            
            
        </tr>
        <tr height="14px">
            <td colspan="3">
            </td>
            <td style="width: 8%">
                &nbsp;</td>
            <td style="width: 19%">
                &nbsp;</td>
            <td style="width: 21%">
                &nbsp;</td>
            <td style="width: 33%">
                &nbsp;</td>
            <td style="text-align: left">
                &nbsp;</td>
        </tr>
        </table>
        </fieldset>
        </td>
        </tr>
    <tr>
            <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr height="10px"><td colspan="2">
                </td></tr>
                            <tr height="10px">
                                <td align="right" colspan="2">
                                    <asp:Button ID="btnAddSubProduct" runat="server" Height="30px" 
                                        
                                        Text="เพิ่มข้อมูลสินค้าที่อยู่ภายใต้" Width="171px" 
                                         />
                                </td>
                </tr>
                            <tr><td>
                                &nbsp;</td></tr>
                            <tr><td></td></tr>
                <tr>
               
                    <td colspan="2">
                        <asp:GridView ID="gvProduct" runat="server" AllowPaging="True" 
                            AutoGenerateColumns="False" EmptyDataText="No Data Found" PageSize="20" 
                            Width="100%"
                            >
                            <AlternatingRowStyle CssClass="GridViewRowAlternate" />
                            <RowStyle CssClass="GridViewRow" HorizontalAlign="Center" 
                                VerticalAlign="Middle" />
                            <Columns>
                                <asp:CommandField HeaderText="ค้นหา" SelectImageUrl="~/images/find.png" 
                                    ShowSelectButton="True" ButtonType="Image" />
                                
                                <asp:CommandField DeleteImageUrl="~/images/delete.png" HeaderText="ลบ" 
                                    ShowCancelButton="False" ShowDeleteButton="True" ButtonType="Image" />
                                <asp:BoundField HeaderText="รหัสผลิตภัณฑ์" DataField="PRODUCT_CODE" />
                                <asp:BoundField HeaderText="ประเภทผลิตภัณฑ์" DataField="PRODUCT_TYPE_ID" />
                                <asp:BoundField HeaderText="ยี่ห้อผลิตภัณฑ์" DataField="PRODUCT_BRAND" />
                                <asp:BoundField HeaderText="รุ่นผลิตภัณฑ์" DataField="PRODUCT_MODEL" />
                                <asp:BoundField HeaderText="ระยะเวลาการรับประกัน" 
                                    DataField="PRODUCT_WARRANTY" />
                            </Columns>
                            <EmptyDataRowStyle CssClass="GridViewEmptyData" />
                            <HeaderStyle CssClass="GridViewHeader" />
                            <PagerStyle HorizontalAlign="Right" />
                        </asp:GridView>
                    </td>
                </tr>
                <tr height="10px"><td colspan="2">&nbsp;</td></tr>
                <tr height="10px">
                    <td>
                        &nbsp;</td>
                    <td align="right">
                        <asp:Button ID="btnAdd" runat="server" Text="บันทึก" Width="69px" 
                    Height="30px" />
                <asp:Button ID="btnCancel" runat="server" Text="ยกเลิก" Width="69px" Height="30px" />
                    </td>
                </tr>
                
                </table>
            </td>
        </tr>
        <asp:Panel ID="panelPopup" runat="server" CssClass="modalPopup" Style="display: none">
        <div style="text-align: right">
        <asp:ImageButton ID="imbtnClose" runat="server" ImageUrl="~/images/delete.png" AlternateText="ปิด" />
    </div>
    <uc1:lookup_fruit ID="lookup_fruit" runat="server" />
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID="panelPopup_ModalPopupExtender" runat="server"
    DynamicServicePath="" Enabled="True" TargetControlID="ImageButton3" CancelControlID="imbtnClose"
    PopupControlID="panelPopup" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
        </table>
        </td>
        </tr>
        <tr align="center" height="8px" valign="top">
    <td style="height: 8px;width:8px;" alt=""><img src="../../images/left_down.jpg" /></td>
    <td width="100%" class="tdHeader2_down"></td>
    <td style="height: 8px;width:10px;"  alt="" valign="top"><img src="../../images/right_down2.jpg" /></td>
    </tr>
         
        </table>
        </td>
        </tr>
        </table>
                     
</ContentTemplate>
            
        </asp:UpdatePanel>
       
        <asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
                        <asp:UpdateProgress ID="UpdateProg1" runat="server" DisplayAfter="0">
                            <ProgressTemplate>
                                <table border="0" cellpadding="0" cellspacing="0" 
                                    style="width:100%; height: 40px; vertical-align: middle; text-align: center;">
                                    <tr>
                                        <td class="style18" style="text-align: right">
                                            <img src="../../images/UpdateBar.gif"
                                                style="width: 32px; height: 32px" /></td>
                                        <td  class="txt_processing" style="text-align: left">
                                            &nbsp; Processing...</td>
                                    </tr>
                                </table>
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                        
                    </asp:Panel>
                    
                    <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
                                    BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" /> 
                                       
                    
                            
    
</asp:Panel>



                     
</asp:Content>

อันนี้เป็นส่วนของหน้าที่จะให้เป็น popup ครับ

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="lookup_fruit.ascx.cs" Inherits="lookup_lookup_fruit" %>
<div id="lkContent">
    <div id="lkTitle">
        Lookup Fruit
    </div>
    <div id="lkSearch">
        ค้นหา จาก
        <asp:DropDownList ID="ddlField" runat="server">
            <asp:ListItem>รหัสไม้ผล</asp:ListItem>
            <asp:ListItem>ชื่อไม้ผล</asp:ListItem>
        </asp:DropDownList>
        ข้อความ
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        <asp:Button ID="btnSearch" runat="server" Text="ค้นหา" />
    </div>
    <div id="lkList">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                    Width="100%">
                    <Columns>
                        <asp:CommandField SelectText="เลือก" ShowSelectButton="True" />
                        <asp:TemplateField HeaderText="รหัสไม้ผล" ShowHeader="False" ItemStyle-Width="30%">
                            <ItemTemplate>
                                <asp:Label ID="Label1" Text="001" runat="server" />
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ชื่อไม้ผล" ShowHeader="False" ItemStyle-Width="60%">
                            <ItemTemplate>
                                <asp:Label ID="Label2" Text="ปาล์มน้ำมัน" runat="server" />
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
</asp:UpdateProgress>

ขอบคุณครับ

Tag : .NET, Ajax, Web (ASP.NET), VS 2010 (.NET 4.x)

Date : 2012-07-29 21:41:05

By : iammil

View : 1913

Reply : 2

No. 1

Guest

ใส่ background-color กับ border ใน css มันก็ไม่ใสแล้ว จะดูเป็น popup มากขึ้น

อิอิ โค้ดเยอะ ไม่อ่าน

Date : 2012-07-30 09:33:27

By : อิอิ

No. 2

lungberk

โพสกระทู้ ( 1 )
บทความ ( 0 )

เวลา กดปุ่ม search ในหน้า lookup หน้า lookup มันปิดไป แก้ไขยังไงหรอครับ

Date : 2012-10-24 08:17:16

By : lungberk

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ขอสอบถามเรื่องการทำ lookup โดยใช้ ModalPopupExtender หน่อยครับผม

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02