آموزش ASP.Net

آموزش ASP.Net - سرور HTML

کنترل های سرور 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 برای اینکه تحتNET اجرا شود

جدول زیر کنترل کننده های سرور HTML را توضیح می دهد:

نام Control

تگ HTM

HtmlHead

<head>element

HtmlInputButton

<input type=button|submit|reset>

HtmlInputCheckbox

<input type=checkbox>

HtmlInputFile

<input type = file>

HtmlInputHidden

<input type = hidden>

HtmlInputImage

<input type = image>

HtmlInputPassword

<input type = password>

HtmlInputRadioButton

<input type = radio>

HtmlInputReset

<input type = reset>

HtmlText

<input type = text|password>

HtmlImage

<img> element

HtmlLink

<link> element

HtmlAnchor

<a> element

HtmlButton

<button> element

HtmlForm

<form> element

HtmlTable

<table> element

HtmlTableCell

<td>  و<th>

HtmlTableRow

<tr> element

HtmlTitle

<title> element

HtmlSelect

<select&t; element

HtmlGenericControl

تمامی HTML Control ها در لیست نمی باشند

 

مثال

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

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

asp.net server controls

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="htmlserver._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 به آن اضافه شده است.
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ASP.Net

Learn ASP.Net

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...