کاربرای عزیز ، سلام ، حالتون خوبه ؟ سلامتید ؟ با اموزشی در زمینه Asp در خدمت شما هستم امیدوارم که این مطالب براتون مناسب باشه .

سرویس دهنده ی HTML / HTML server

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

جدول زیر server control های HTML را برای شما فهرست کرده است:

Control Name

HTML tag

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

HtmlButton

<button> element

HtmlForm

<form> element

HtmlTable

<table> element

HtmlTableCell

<td> and <th>

HtmlTableRow

<tr> element

HtmlTitle

<title> element

HtmlSelect

<select> element

HtmlGenericControl

All HTML controls not listed

مثال:

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

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

clip_image001

کد 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>

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 به آن اضافه شده است.