AngularJS Form Helper For ASP.NET MVC

What is meant by HTML helper?

According to MSDN, HTML helper “Supports the rendering of HTML controls in a view.” The HtmlHelper class provides the methods, which help you to create HTML controls programmatically. All HtmlHelper methods generate HTML and return the result as a string.

Generally, HTML helpers are written in C# or VB.NET (in .NET Framework) and that helps the developers to write a long HTML in short Razor code (Like @html.textbox()).

Introduction

All ASP.NET developers are familiar with HTML helper. Lots of HTML helpers (HTML strings, jQuery validation, script and style wrappers) are available online. This helper is especially designed for an AngularJS model and form validation support.

How it works

Before proceeding towards setup, let's understand how an Angular form helper works on ASP.NET Razor page. Here, a simple signup page is written in Razor using an Angular form helper. The output is rendered in Plain html with Angular validation and model attributes.

SignUp.cshtml(Razor page)

<div ng-app="myApp">
<div ng-controller="SignUpCtrl">
@using AxSoft.Angular.Net
@model Angular.Form_Helper.Models.Person
@using (var form = Html.BeginAngularForm("personForm", "save", "person", new { @class = "form-horizontal ng-cloak" }))
{
<div class="control-group" @form.NgClassError(m => m.FirstName)>
@form.Label(m => m.FirstName)
<div class="controls">
@form.TextBox(m => m.FirstName, new { autofocus = "" })
@form.ValidationsFor(mbox => mbox.FirstName, ValidationMode.FormSubmitted)
</div>
</div>
<div class="control-group" @form.NgClassError(m => m.LastName)>
@form.Label(m => m.LastName)
<div class="controls">
@form.TextBox(m => m.LastName)
@form.ValidationsFor(m => m.LastName, ValidationMode.FormSubmitted)
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-primary" type="button" ng-click="personForm.$submitted=true">Save</button>
<button class="btn" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
} </div></div>

Person Model

public class Person
{
[Required]
[StringLength(25)]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[StringLength(25)]
[Display(Name = "Last Name")]
public string LastName { get; set; }
}

Plain Angular/HTML code

<div ng-app="myApp" class="ng-scope">
<div ng-controller="SignUpCtrl" class="ng-scope">
<form autocomplete="off" class="form-horizontal ng-dirty ng-valid-parse ng-valid-required ng-valid ng-valid-maxlength" id="personForm" method="POST" name="personForm" ng-submit="save(personForm)" novalidate=""> <div class="control-group" ng-class="{ 'error': (personForm['person.FirstName'].$invalid) && (personForm.$submitted) }">
<label class="control-label" for="person_FirstName">First Name</label>
<div class="controls">
<input autofocus="" id="person_FirstName" name="person.FirstName" ng-maxlength="25" ng-model="person.FirstName" required="" type="text" class="ng-valid-maxlength ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required">
<span class="help-inline ng-hide" ng-show="(personForm['person.FirstName'].$error.maxlength) && personForm.$submitted">The field First Name must be a string with a maximum length of 25.</span><span class="help-inline ng-hide" ng-show="(personForm['person.FirstName'].$error.required) && personForm.$submitted">The First Name field is required.</span>
</div>
</div>
<div class="control-group" ng-class="{ 'error': (personForm['person.LastName'].$invalid) && (personForm.$submitted) }">
<label class="control-label" for="person_LastName">Last Name</label>
<div class="controls">
<input id="person_LastName" name="person.LastName" ng-maxlength="25" ng-model="person.LastName" required="" type="text" class="ng-not-empty ng-dirty ng-valid-parse ng-valid-required ng-touched ng-valid ng-valid-maxlength">
<span class="help-inline ng-hide" ng-show="(personForm['person.LastName'].$error.maxlength) && personForm.$submitted">The field Last Name must be a string with a maximum length of 25.</span><span class="help-inline ng-hide" ng-show="(personForm['person.LastName'].$error.required) && personForm.$submitted">The Last Name field is required.</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-primary" type="button" ng-click="personForm.$submitted=true">Save</button>
<button class="btn" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</form>
</div></div>

Setup

Download project from here.

Step 1

Add AxSoft.Angular.NET project into your existing project or just add AxSoft.Angular.Net40.dll file from the zip (if you add .DLL file as the reference, please skip these steps).

ASP.NET

ASP.NET

Your Solution Explorer likes it.
ASP.NET

Step 2

Build your solution and add AxSoft.Angular.Net40.dll file to your project.

ASP.NET

Summary

HTML helper is a robust class to render HTML templates and more intellisense support. At the same time, it’s not adopted with the latest client side technologies (Angular, TypeScript). This kind of new helpers improve HTML helpers and reduce the time of the coding in plain HTML.