Alternative methods for Creating Forms in asp.net MVC 5

Recently, I came across three different ways to create forms in asp.net MVC 5, which are:

Using traditional HTML forms tag
Using Html Helper Methods
Using Ajax Helper Methods

Note: This article assumes the reader is familiar with: Basic form creation in HTML. The MVC architecture in asp.net

Traditional Html Form Tags

Using the traditional form tag, we can collect user input which can be sent to the server for processing. Using this method, we rely on using the form tag alone in our view. For example:

<form action="controllers/controllername/actionname" method="post">
    <label for="fullname">Full Name</label>
    <input type="text" name="fullName"/>
    <label for="phoneNumber">Phone Number</label>
    <label type="text" name="phoneNumber"/>
    <input type="submit" value="submit"/>
</form>

The above code snippet gets rendered as a basic form in our browser which we can process however we want.

Using Html Helper Methods

The Helper class in asp.net MVC contains a static method called BeginForm which can be used to create forms in the browser. Along with other helper methods in the class, we can easily create a form. for example:

    @using(Html.BeginForm(string actionName, string controllerName, FormMethod method)){
}

You are expected to have created a Model, a Controller, and an Action to handle the submission of the form. The above code is the equivalent of an opening and closing form tag. Note that the opening and closing curly braces are important as it calls the Dispose() method of the IDisposable interface. The Html.BeginForm method contains about 12 overloads for use(reference links would be made available).

Using other helper methods, we can recreate the first snippet posted like this:

    @using(Html.BeginForm(string actionName, string controllerName, FormMethod method)){
        <div class="form-group">
        @Html.LabelFor(c => c.FullName, "Full Name")
        @Html.TextBoxFor(c => c.FullName, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.FullName, "Invalid Full name")
    </div>

        <div class="form-group">
        @Html.LabelFor(c => c.PhoneNumber, "Phone Number")
        @Html.TextBoxFor(c => c.PhoneNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.PhoneNumber, "Invalid Phone Number")
    </div>
}

While you get the same rendered form as the traditional HTML tag, the helper methods also provide inbuilt Validation for HTML helpers' textboxes and they are quite easy to use and simple to understand.

Using Ajax Helper Methods

Using Ajax Helper methods for creating forms is very similar to using Html helper methods. Firstly, you need to have jquery.unobstrusive.ajax.js script library in your project which can be installed from your NuGet package manager console using the

*Install-Package jquery.unobstrusive.ajax.js*

command and add a reference to the minified version of the script using the script tag in the _layout page. Now that you have the package installed, you now use Ajax Helper methods to create forms. A major difference between the Html helper methods and the Ajax helper methods is that the HTML helper calls the controller action method synchronously thereby refreshing the entire page while the Ajax helper calls the controller action asynchronously thereby refreshing the part of the page displaying updated info. The Ajax.BeginForm method contains about 11 overloads which you can pick from. Unlike the Html helper class, there are limitations to the number of methods under the Ajax helper class, which is why both helpers methods can be used within each other. The example below explains it better:

@using(Ajax.BeginForm(string actionName, string controllerName, AjaxOptions ajaxOptions))
{
     <div class="form-group">
        @Html.LabelFor(c => c.FullName, "Full Name")
        @Html.TextBoxFor(c => c.FullName, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.FullName, "Invalid Full name")
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.PhoneNumber, "Phone Number")
        @Html.TextBoxFor(c => c.PhoneNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.PhoneNumber, "Invalid Phone Number")
    </div>
}

So, which should you use?

From my little experience, I don't think there's a "right-way, wrong-way" to do it. You can use whatever you're comfortable with but it's advisable to pick one and stick to it in order to avoid any conflicts that may arise later.

Thank you for reading my article, I do hope you found it useful. Feel free to drop any questions you have in the comment section below and I'll respond as soon as possible.

stackalloc