آموزش ایجاد textArea با HtmlHelper در ASP.Net MVC

آموزش ایجاد textArea با استفاده از HtmlHelper در ASP.Net MVC :

در این درس به آموزش ایجاد یک TextArea با استفاده از کلاس HtmlHelper در صفحات ASP.Net MVC Razor پرداخته ایم. کلاس HtmlHelper دارای دو متد ویژه برای ایجاد یک المنت <textarea> (کادر متن چند خطی) در یک Razor View به شرح زیر است :

• TextArea
• ()TextBoxFor

به صورت پیش فرض، این متدها یک کادر متن چند خطی textarea را با دو سطر (rows=2) و بیست ستون (cols=20) کاراکتر ایجاد می کند. در کد مثال عملی زیر، کلاس Student Model را با متدهای TextArea() و ()TextAreaFor به کار برده ایم :

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public string Description { get; set; }
}

آموزش کار با متد ()TextArea در ASP.Net MVC :

متد Html.()TextArea طیق ساختار کلی زیر، یک کادر متن textarea را با نام (name)، مقدار (value) و خواص html تعیین شده، ایجاد می کند :

MvcHtmlString Html.TextArea(string name, string value, object htmlAttributes)

تابع ()TextArea دارای چندین حالت مختلف فراخوانی با پارامترهای مختلف (overload) است که می توانید برای آشنایی با آن ها به سایت MSDN رجوع کنید. متد ()TextArea یک متد loosely typed (بدون التزام به نوع متغیر داده ای) است، زیرا پارامتر name از نوع متن string است. برای مثال، پارامتر name می تواند نام یک خاصیت یا property متعلق به شی model object باشد. متد ()TextArea خاصیت یا Property تعیین شده جهت آن را به کادر متن textarea متصل می کند. بنابراین به صورت اتوماتیک، مقدار (value) خاصیت model را نمایش داده و یا متن درون خود را به آن ارسال می کند.
در کد مثال عملی زیر، نحوه تعریف یک کادر متن textarea را با استفاده از متد ()TextArea در یک Razor View و کد خروجی تولید شده توسط آن را نشان داده ایم :

@model Student
@Html.TextArea("Description", null, new { @class = "form-control" })  

<textarea class="form-control"
          id="Description"
          name="Description"
          rows="2"
          cols="20">This is value</textarea>

در کد مثال فوق، پارامتر اول ()TextArea خاصیت “Description” کلاس Student Model است، که به عنوان name و id کادر متن textarea قرار خواهد گرفت. پارامتر دوم متد نیز مقدار (value) ای است که بایستی در کادر متن textarea نمایش داده شود. البته در این مثال مقدار آن تهی یا null تعیین شده، زیرا متد ()TextArea به صورت خودکار مقدار خاصیت Description را از مدل خوانده و در کادر متن نشان می دهد. پارامتر سوم هم به عنوان نام کلاس کنترل کادر متن قرار می گیرد. خواص HtmlAttributes از نوع داده ای شی یا object Type هستند. بنابراین در هنگام تعریف، می توان آن ها را به صورت شی ناشناس و بدون نوع داده ای تعریف کرده و سپس با استفاده از کاراکتر @ ، نام هر خاصیت را با مقدار آن، تعیین نمود. از طرف دیگر، هماند کد زیر، می توانید هر نام دلخواه دیگری را برای کادر متن نیز تعیین کنید. ولی در آن صورت، دیگر به model متصل نمی شود :

@Html.TextArea("myTextArea", "This is value", new { @class = "form-control" })  

<textarea class="form-control"
          cols="20"
          id="myTextArea"
          name="myTextArea"
          rows="2">This is value</textarea>

آموزش کار با متد ()TextAreaFor در ASP.Net MVC :

متد ()TextBoxFor یک تابع strongly typed (تابعی که در آن بایستی نوع داده ای متغیرها به صراحت تعیین شده و مقدارهای ارسالی متناسب با نوع داده ای پارامترها باشند) می باشد. این متد با استفاده از یک lambada expression یک کادر متن چندخطی <text area> را برای خاصیت تعیین شده در model object، تولید می کند.
به عبارت دیگر، متد ()TextAreaFor یک خاصیت تعیین شده متعلق به یک model object را به کنترل text area متصل می کند. در نتیجه و به صورت اتوماتیک، مقدار خاصیت model object را در textarea متصل شده، نمایش داده و یا مقدار ورودی در کادر متن را به خاصیت مدل، ارسال می کند.
ساختار کلی استفاده از متد ()TextBoxFor به صورت زیر است :

MvcHtmlString TextAreaFor(<expression<func<tmodel,tvalue>> expression, object htmlAttributes) 

برای دریافت اطلاعات کامل درباره overload های مختلف این متد به سایت MSDN مراجعه نمایید. کد زیر نحوه تعریف و ایجاد یک کادر متن <textarea> را با استفاده از Razor در یک MVC View نشان می دهد :

@model Student
@Html.TextAreaFor(m => m.Description, new { @class = "form-control" })   

                        
<textarea class="form-control"
          cols="20"
          id="Description"                        
          name="Description"
          rows="2"></textarea>

در کد مثال فوق، پارامتر اول یک lambada expression است که خاصیتی که می خواهیم به المنت <textarea> متصل شود را تعیین می کند. در این مثال، خاصیت Description را تعیین کرده ایم. بنابراین مدل یک المنت <textarea> با نام و id معادل مقدار name این خاصیت، ایجاد می کند. همچنین مقدار (value) خاصیت Description را خوانده و در کنترل نمایش می دهد.