picpost

Share |

ท่านใดที่นำบทความนี้ไปเผยแพร่ที่เว็บหรือบล็อกของท่านกรุณาทำลิงค์กลับมายังบทความต้นฉบับด้วยนะคะ ขอบคุณค่ะ

ขั้นตอนการทำ css popup ใน gridview ด้วย asp.net (เขียนแบบ vb)



By : Admin

Date write : 2009-02-27 10:29:26   Date update : 2009-02-27 10:54:35






จากที่ได้บันทึกการเขียน asp.net ลงในบล็อกของตนเอง เรื่องการคลิกแล้วเปิด popup ใน Gridview แบบใช้ css
------------------------------------------------------------------------------------------------

อ้างอิงจากบล็อกหน้านี้ http://fayjaa.wordpress.com

------------------------------------------------------------------------------------------------


ก็มีคนสงสัยว่าทำยังไง ก็เลยทำเป็นขั้นเป็นตอนมาให้ จากที่ติดน้องคนหนึ่งบอกว่าจะเขียนให้ตั้งหลายวันก่อน..

เอาล่ะ มาเริ่มกันเลย



ขั้นตอนตามนี้


1. เปิดโปรแกรม microsoft visual studio ขึ้นมา (ตัวอย่างนี้ใช้  visual studio 2008)



2. ไปที่เมนู File > New Website... แล้วตั้งชื่อว่า project_css_popup โปรแกรมจะสร้างไซต์ที่มีไฟล์
Default.aspx, Default.aspx.vb, web.config และโฟล์เดอร์ App_Data มาให้เรา


css popup asp.net


3. ต่อจากนั้นเราจะเพิ่มไฟล์ style sheet ให้ชื่อว่า css.css ดังรูป

popup asp.net




4. เมื่อได้ไฟล์ css.css มาแล้วให้ ใส่โโค๊ดด้านล่างนี้ ลงในไฟล์ css.css
code ::


.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 300px;
    height: 50%;
    padding: 16px;
    z-index:1002;
    overflow: auto;
    background-color:#FFBFBF;
    border-bottom: 2px solid #F9F9F9;
    border-right: 2px solid #F9F9F9;
    border-left:1px solid #EFE4E4;
    border-top:1px solid #EFE4E4;
}

java popup asp.net

ดังรูป เสร็จแล้วก็ save


5. ต่อไปเป็นการประกาศ connectionstring เพื่อติดต่อกับฐานข้อมูล

Dubble click ที่ไฟล์ web.config ขึ้นมา แล้วหาคำว่า <connectionStrings/> ให้ลบทิ้ง แล้ว copy ข้อความข้างล่างนี้ไปวางแทนที่




code::

<add name="popupconn" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=sample_db;Integrated Security=True" providerName="System.Data.SqlClient"/>




6. Dubble click ที่ไฟล์ Default.aspx ก็อปปี้โค๊ดด้านล่าง ไปวางไว้ระหว่าง <head></head>

popup

code::

    <link href="css.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        function showpop(showw){
        document.getElementById('showw').innerHTML=showw;
        document.getElementById('light').style.display='block';

        }

        function hidepop(){
        document.getElementById('light').style.display='none';

    }
    </script>


7. ลาก Gridview มาวาง แล้วเพิ่มคอลัมน์ หรือจะก็อปปี้โค๊ดของ Gridview ด้านล่างแล้ววางไว้ใน Default.aspx

code ::


        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="link_id">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem,"link_name").tostring%>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem,"link_url").tostring%>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a href="javascript:void(0);" onclick="showpop( '<%# DataBinder.Eval(Container.DataItem,"link_detail").tostring%>');">คลิกดูรายละเอียด</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>


8.ก็อปปี้โค๊ดต่อไปนี้วางต่อจากโค๊ดของ Gridview
code ::


<div id=”light” class=”white_content”>
<span id=”showw”></span>
<br />
<a href = “javascript:void(0)” onclick = “hidepop()”>Close</a>
</div>


เสร็จแล้วก็จะได้ดังรูป เมื่อคลิกที่ลิงค์จะแสดง popup ขึ้นมา


asp.net


ถ้าอยากจะให้ popup อยู่ด้านใหนของหน้าจอ ก็สามารถปรับแต่งได้ โดยแก้ในไฟล์ css.css ค่ะ

code ตัวอย่างประกอบ

---------------------------------------------------------------------------------

ดาวน์โหลดที่นี่

---------------------------------------------------------------------------------

เขียนโดย : fayjaa



" ความคิดเห็นใหม่อยู่ด้านบนค่ะ "

 

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

โดย*   Guest  [ Login | สมัครสมาชิกที่นี่]
รายละเอียด*
รหัสป้องกันสแปม*   ขอรหัสใหม่


กรอกตัวอักษรตามรูปด้านบน
   
 
 



แว่นตาแฟชั่น แว่นสายตาแฟชั่น แว่นตามิกกี้เมาส์ แว่นตาแบบ อั้ม พัชราภา แว่นตาแบบ ชมพู่ อารยา แว่นตาทรงกลม แว่นตาแฟชั่น
แว่นแฟชั่น