آموزش اجرای HTML به صورت Server Side در ASP.NET

کنترل های سرور html در اصل همان کنترل های استاندارد و متداول html هستند که جهت ایجاد امکان پردازش سمت سرور بهینه سازی شدند. کنترل های html از قبیل تگ های header، تگ های anchor و المان های input گرچه توسط سرویس دهنده (server) پردازش نمی شوند اما برای نمایش به مرورگر فرستاده می شوند.

با افزودن خصیصه های runat="server" و id، کنترل های نام برده به server control تبدیل می شوند.

به عنوان مثال کنترل input را در نظر بگیرید:

کد:

< input type="text" size="40"/ >

می توان آن را با افزودن خصیصه های id و runat به server control تبدیل کرد:

کد:

<input type="text" id="testtext" size="40" runat="server">

 

مزایای استفاده از server control های HTML
اگرچه کنترل های سرور ASP.NET قادر به انجام تمامی کارهایی که کنترل های سرور HTML انجام می دهند هستند، با این وجود استفاده از کنترل سرور HTML در مواردی که ذیل نام برده شده بسیار سودمند بوده و به شما توصیه می شود:

• استفاده از جداول ایستا (static table) در طرح کلی (layout)
• تبدیل صفحه HTML برای اینکه تحت ASP.NET اجرا شود.

​

 

مثال:

مثال زیر یک جدول ساده ی HTML برای layout انتخاب می کند. این جدول برای دریافت ورودی از کاربر (مانند اسم، شهر، آدرس و غیره ... .) چندین کادر (box) بکار می گیرد. این جدول همچنین یک کنترل button دارد که با کلیک روی آن داده ها و اطلاعات کاربر در آخرین سطر (row) جدول به نمایش گذاشته می شود.

صفحه ی مورد نظر در design view ظاهری مشابه مثال زیر خواهد داشت:

​

 

کد content page استفاده از المان table HTML را برای طرح کلی (layout) نشان می دهد.

کد:

< %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HTML_server.Default" % >
< !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" >
    < title >Untitled Page< /title >
    < style type="text/css" >
        .style1 {
            width: 156px;
        }
 
        .style2 {
            width: 332px;
        }
    < /style >
< /head >
< body >
    < form id="form1" runat="server" >
        < div >
            < table style="width: 54%;" >
                < tr >
                    < td class="style1" >Name:< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtname" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >Street< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtstreet" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >City< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtcity" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >State< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtstate" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >< /td >
                    < td class="style2" >< /td >
                < /tr >
                < tr >
                    < td class="style1" >< /td >
                    < td id="displayrow" runat="server" class="style2" >< /td >
                < /tr >
            < /table >
        < /div >
        < asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click" / >
    < /form >
< /body >
< /html >

کد:

< %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HTML_server.Default" % >
< !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" >
    < title >Untitled Page< /title >
    < style type="text/css" >
        .style1 {
            width: 156px;
        }
 
        .style2 {
            width: 332px;
        }
    < /style >
< /head >
< body >
    < form id="form1" runat="server" >
        < div >
            < table style="width: 54%;" >
                < tr >
                    < td class="style1" >Name:< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtname" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >Street< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtstreet" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >City< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtcity" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >State< /td >
                    < td class="style2" >
                        < asp:TextBox ID="txtstate" runat="server" Style="width: 230px" >
                        < /asp:TextBox >
                    < /td >
                < /tr >
                < tr >
                    < td class="style1" >< /td >
                    < td class="style2" >< /td >
                < /tr >
                < tr >
                    < td class="style1" >< /td >
                    < td id="displayrow" runat="server" class="style2" >< /td >
                < /tr >
            < /table >
        < /div >
        < asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click" / >
    < /form >
< /body >
< /html >

 

Code behind کنترل button:

کد:

protected void Button1_Click(object sender, EventArgs e)
        {
            string str = "";
            str += txtname.Text + "< br / >";
            str += txtstreet.Text + "< br / >";
            str += txtcity.Text + "< br / >";
            str += txtstate.Text + "< br / >";
            displayrow.InnerHtml = str;
        }

 

به مسائل زیر توجه کنید:

برای layout از تگ های استاندارد HMTL استفاده شده است.

داده ها در آخرین سطر جدول HTML نمایش داده شده اند. برای پردازش سمت سرور یک خصیصه ی ID و runat به آن اضافه شده است