HTML Helpers in ASP.NET MVC

Built-In Html Helpers

Standard Html Helpers

HTML elements like as HTML text boxes, checkboxes are used.
 
HTML Element
Example
TextBox
@Html.TextBoxFor(m=>m.Name) 
Output: <input id="Name" name="Name" type="text" value="Name-val" />
TextArea
@Html.TextArea(m=>m.Address , 5, 15, new{})) 
Output: <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
Password
@Html.PasswordFor(m=>m.Password) 
Output: <input id="Password" name="Password" type="password"/>
Hidden Field
@Html.HiddenFor(m=>m.UserId) 
Output: <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
CheckBox
@Html.CheckBoxFor(m=>m.IsApproved) 
Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
RadioButton
@Html.RadioButtonFor(m=>m.IsApproved, "val") 
Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
Drop-down list
@Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"})) 
Output: <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
Multiple-select
Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"})) 
Output: <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>

Strongly Typed HTML Helpers

Based on model properties HTML elements are created.
The strongly typed HTML helpers work on lambda expression. The model object is passed as a value to lambda expression and you can select the field or property from model object to be used to set the id, name and value attributes of the HTML helper.

HTML Element
Example
TextBox
@Html.TextBoxFor(m=>m.Name) 
Output: <input id="Name" name="Name" type="text" value="Name-val" />
TextArea
@Html.TextArea(m=>m.Address , 5, 15, new{})) 
Output: <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
Password
@Html.PasswordFor(m=>m.Password) 
Output: <input id="Password" name="Password" type="password"/>
Hidden Field
@Html.HiddenFor(m=>m.UserId) 
Output: <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
CheckBox
@Html.CheckBoxFor(m=>m.IsApproved) 
Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
RadioButton
@Html.RadioButtonFor(m=>m.IsApproved, "val") 
Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
Drop-down list
@Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"})) 
Output: <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
Multiple-select
Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"})) 
Output: <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>








Comments

Post a Comment

Popular posts from this blog

How to retain the data annotations or class during modify a table in the database

Image
In database-first approach since there is an existing database., The entity classes are automatically created by edmx model.: If we use [MetadataType(typeof(ConceptMetadataSource))] to attach a MetadataSource file which contains all the data annotations like [HiddenInput(DisplayValue = false)] or [Display(Name = "Title")]. The data annotations will be wiped out each time the entity classes are regenerated as the code will be regenerated once we modify a table in the database Solution: All you have to do is create another partial class and use Metadatatype attribute Create a metadata class in models as below…   Create a Partial class for the metadata in models as below… The new partial class can be created in a different folder
Read more

Interview Questions

Difference between GET and POST. Which one is more secure? GET and POST methods are used for the data transfer between the web pages. GET mainly used for small data which is not secure because in case of GET method, the data which we are passing will be visible in the url so we can't keep the secure data which will be visible in the url. There is also limited data which can be passed in case of GET method (max 255 character). POST is used for transferring the huge data between the pages where we can keep the secure data and can transfer it. In case of using the POST method, the data which is transferring between the pages will not be visible so it is more secure than the GET method. Also there is no limit for POST method to post the data to the next page. POST is more secure What are Razor engines? How is it diff from ASP Engines? A. RAZOR engine is the new concept in the MVC 3 which is mainly used to create the views in the MVC applications. It created the cshtml pages for...
Read more

AJAX CONTROL

Image
1.        Goto  web confiq add following controls        < controls >   < add tagPrefix = " ccl " namespace = " AjaxContolToolkit " assembly   = " AjaxContolToolkit " />      </ controls > 2.        Go to  bin folder  ->  include project -> add ajax.dll file from AjaxControl Toolkit 3.        Add  toolsciptmanager  to default.aspx            < asp : ToolkitScriptManager ID ="ToolkitScriptManager1" runat ="server">         </ asp : ToolkitScriptManager > 4.        Create a function < script type = "text/javascript" >     function panelclick()     {    alert( "click" );  ...
Read more