神刀安全网

Introduction To Tag Helpers In ASP.NET Core ( MVC6 )

In ASP.NET 4 ( MVC 5) we haveHtmlHelper to render HTML. It is basically C# code that starts with @ however, it will render as the HTML element on the browser . Tag Helpers are an alternative to HtmlHelper in ASP.NET Core (Formally ASP.NET 5) to generate HTML.

Let’s start by looking the syntax of HtmlHelper and TagHelper . In the following code you can see the HtmlHelper implementation for label and text box.

Html Helpers for label and text box.

@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })         <div class="col-md-10">             @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })         </div>

In the following code you can see the corresponding Tag Helpers for email label and text box.

Tag Helpers for label and text box.

<label asp-for="Email" class="col-md-2 control-label"></label>         <div class="col-md-10">             <input asp-for="Email" class="form-control" />          </div>

In the following code you can see the model property for both approaches.

[Required]         [EmailAddress]         [Display(Name = "Email")]         public string Email { get; set; }

Both of these approaches will generate the same html.

<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" value="">

The tag helpers are just a syntax change with no other benefits. The tag helpers syntax seems more readable compare to HtmlHelper. Visual studio 2015 has nice syntax highlighter and Intellisense for tag helper.

Introduction To Tag Helpers In ASP.NET Core ( MVC6 )

Here is the registration page with Htmlhelper in ASP.NET 4.6 default template.

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) {     @Html.AntiForgeryToken()     <h4>Create a new account.</h4>     <hr />     @Html.ValidationSummary("", new { @class = "text-danger" })     <div class="form-group">         @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })         <div class="col-md-10">               @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })         <div class="col-md-10">             @Html.PasswordFor(m => m.Password, new { @class = "form-control" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })         <div class="col-md-10">             @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })         </div>     </div>     <div class="form-group">         <div class="col-md-offset-2 col-md-10">             <input type="submit" class="btn btn-default" value="Register" />         </div>     </div> }

The registration page using Tag Helpers in ASP.NET Core .

<form asp-controller="Account" asp-action="Register" method="post" class="form-horizontal" role="form">     <h4>Create a new account.</h4>     <hr />     <div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>     <div class="form-group">         <label asp-for="Email" class="col-md-2 control-label"></label>         <div class="col-md-10">             <input asp-for="Email" class="form-control" />             <span asp-validation-for="Email" class="text-danger"></span>         </div>     </div>     <div class="form-group">         <label asp-for="Password" class="col-md-2 control-label"></label>         <div class="col-md-10">             <input asp-for="Password" class="form-control" />             <span asp-validation-for="Password" class="text-danger"></span>         </div>     </div>     <div class="form-group">         <label asp-for="ConfirmPassword" class="col-md-2 control-label"></label>         <div class="col-md-10">             <input asp-for="ConfirmPassword" class="form-control" />               <span asp-validation-for="ConfirmPassword" class="text-danger"></span>         </div>     </div>     <div class="form-group">         <div class="col-md-offset-2 col-md-10">             <button type="submit" class="btn btn-default">Register</button>         </div>     </div> </form>

Another nice thing is we do not need to explicitly add the AntiForgeryToken . The form Tag helper does this automatically. However, we can explicitly turn it off by using

asp-anti-forgery=”false”

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Introduction To Tag Helpers In ASP.NET Core ( MVC6 )

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮