Wednesday, 28 February 2018

Generate HTML control using Razor

Generate HTML control using Razor

MVC Razor is a powerful technique to generate HTML controls. So I have created this post to demonstrate you to how can you generate simple HTML controls using razor code.

Textbox

Razor        

@Html.TextBox("Test",null, new { placeholder=@Model.FullName, @class = "form-control",@onclick="test()" })

Generated Code

        <input class="form-control" id="Test" name="Test" onclick="test()" placeholder="Amit" type="text" value="">

Drop Down List

Razor

@Html.DropDownList("MySkills", new List<SelectListItem
   new SelectListItem{ Text="C Language", Value = "1" }, 
   new SelectListItem{ Text="C++", Value = "2" }, 
   new SelectListItem{ Text="Core Java", Value = "3" }, 
   new SelectListItem{ Text="C#", Value = "4" }, 
   new SelectListItem{ Text="Visual Basic", Value = "5" }, 
   new SelectListItem{ Text="HTML", Value = "6" }, 
   new SelectListItem{ Text="Java Script", Value = "7" }, 
   new SelectListItem{ Text="LINQ", Value = "8" }, 
   new SelectListItem{ Text="MVC", Value = "9" }, 
   new SelectListItem{ Text="GOOGLE ANALYTICS", Value = "10" }, 

}, new  {@class="form-control" })  


HTML Code :

<select class="form-control" id="MySkills" name="MySkills">
    <option value="1">C Language</option>
    <option value="2">C++</option>
    <option value="3">Core Java</option>
    <option value="4">C#</option>
    <option value="5">Visual Basic</option>
    <option value="6">HTML</option>
    <option value="7">Java Script</option>
    <option value="8">LINQ</option>
    <option value="9">MVC</option>
    <option value="10">GOOGLE ANALYTICS</option>
</select>