در این درس قصد داریم تا نحوه ایجاد یک کنترل کادر متن TextBox را با استفاده از سر کلاس HtmlHelper درون یک ASP.Net MVC View آموزش دهیم.
کلاس HtmlHelper دارای دو متد ویژه است که بر روی صفحه یک کادر متن TextBox با کد HTML معادل (<input type=”text”>) تولید می کند. این دو متد در یک razor view عبارتند از textbox() و textboxfor(). متد textbox() یک متد (loosely typed) است، به این معنی که تعیین دقیق نوع متغیر (مثلا عددی یا رشته ای) در آن اجباری نیست و می توان نوع متغیر را تعریف نکرد. در مقابل متد textboxfor() یک متد (strongly method) است که در آن بایستی حتما نوع تمامی متغیرها را تعیین کرده و مقادیر متناسب با نوع آن ها، به عنوان پارامتر به تابع ارسال شود. برای مثال اگر یک متغیر را از نوع عددی int تعریف می کنیم، حتما بایستی عدد از نوع integer بدان ارسال شود.
در کد مثال عملی زیر، در فایل مدل student model، انواع متغیرهای مورد نظر جهت برنامه را تعریف کرده و سپس از متدهای textbox() و textboxfor() استفاده کرده ایم
کد مدل Student Model
|
1
2
3
4
5
6
7
8
9
|
public class Student{ public int StudentId { get; set; } [Display(Name="Name")] public string StudentName { get; set; } public int Age { get; set; } public bool isNewlyEnrolled { get; set; } public string Password { get; set; }} |
متد Html.TextBox() یک المنت کادر متن با کد HTML معادل <input type=”text”> همراه با name، مقدار (value) و سایر خواص مورد نظر HTML تولید می کند.
ساختار کلی استفاده از متد TextBox() به صورت زیر است :
|
1
|
MvcHtmlString Html.TextBox(string name, string value, object htmlAttributes)RedirectToAction("Index");} |
متد TextBox() دارای چندین overload (قابلیت چند حالته جهت فراخوانی با پارامترهای مختلف) است، که می توانید لیست کامل آن ها را در سایت ASP.Net مشاهده نمایید.
متد TextBox() یک تابع (loosely typed) است زیرا پارامتر name یک رشته متنی یا string می باشد. برای مثال، پارامتر name می تواند نام یک خاصیت یا property متعلق به شی model object باشد. متد TextBox() خاصیت یا property تعیین شده جهت آن را به کادر متن textbox متصل می کند. بنابراین به صورت اتوماتیک، متد در value خاصیت model را نمایش داده و یا متن درون خود را به آن ارسال می کند.
نحوه تعریف یک کادر متن TextBox در کد مثال عملی زیر نشان داده شده است :
|
1
2
|
@model Student@Html.TextBox("StudentName", null, new { @class = "form-control" }) |
|
1
2
3
4
5
|
<input class="form-control" id="StudentName" name="StudentName" type="text" value="" /> |
در کد مثال فوق، پارامتر اول، خاصیت “StudentName” مربوط به کلاس Student Model می باشد که به عنوان name و id کادر متن text box به کار می رود. پارامتر دوم تعیین کننده یک مقدار (value) جهت نمایش در کادر متن TextBox می باشد که در این مثال مقدار آن را null یا خالی ارسال کرده ایم. زیرا متد TextBox() به صورت خودکار مقدار خاصیت StudentName را در کادر متن نشان خواهد داد.
پارامتر سوم نیز تعیین کننده کلاس کنترل TextBox خواهد بود. خواص HtmlAttributes از نوع داده ای شی یا Object Type هستند. بنابراین در هنگام تعریف، می توان آن ها را به صورت شی ناشناس و بدون نوع داده ای تعریف کرده و سپس با استفاده از کاراکتر @، نام هر خاصیت با مقدار آن را تعیین نمود.
همچنین می توانید همانند کد زیر، هر نام دلخواه دیگری را نیز برای کادر متن تعیین کنید، ولی در آن صورت دیگر به model متصل نمی شوند :
|
1
|
@Html.TextBox("myTextBox", "This is value", new { @class = "form-control" }) |
|
1
2
3
4
5
|
<input class="form-control" id="myTextBox" name="myTextBox" type="text" value="This is value" /> |
متد کمکی TextBoxFor() یک متد strongly typed (یعنی بایستی نوع پارامتر و متغیرها در آن صراحتا تعیین شده و هر مقدار ارسالی با نوع متغیرها مطابقت داشته باشد) است. این متد یک کادر متن (text input) را برای خاصیت Model Property تعیین شده، با استفاده یک lambada expression، تولید می کند. به عبارت دیگر، متد TextBoxFor یک خاصیت شی مدل (model object property) تعیین شده را به یک کادر متن (text input) در صفحه متصل می کند. بنابراین باعث می شود تا مقدار model property در کادر متن نمایش داده شده و یا مقدار کادر متن را به model property ارسال می کند.
ساختار کلی استفاده از متد TextBoxFor() در MVC Razor به صورت زیر است :
|
1
|
MvcHtmlString TextBoxFor(Expression<func<tmodel,tvalue>> expression, object htmlAttributes) |
برای مشاهده حالات مختلف فراخوانی متد TextBoxFor() بر حسب پارامتر (overload) به مرجع MSDN مراجعه کنید.
|
1
2
|
@model Student@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" }) |
|
1
2
3
4
5
|
<input class="form-control" id="StudentName" name="StudentName" type="text" value="John" /> |
در کد مثال فوق، پارامتر اول متد TextBoxFor() یک lambada expression است که تعیین می کند خاصیت StudentName مدل، به کادر متن متصل شود. این کار باعث تولید یک کادر متن با name و id برابر با نام خاصیت model (در این مثال StudentName)، بر روی صفحه می شود. همچنین مقدار خاصیت value کادر متن برابر با مقدار خاصیت StudentName خواهد شد (در این مثال مقدار John). در تصویر زیر کادر متن تولید شده توسط متد TextBoxFor() نشان داده شده است :
