Creating Forms in ASP.NET MVC

By
Junaid
-
0
783
Creating Forms in ASP.NET MVC

Let’s learn about the forms, which are widely used to take input from end users. In this post we are going to Creating Forms in ASP.NET MVC. Typically developers are not aware with all the types of forms. Because their major task is to developed the requirement but forms are getting changed according to the requirements.

When I was getting started with website developed in Core PHP I’m also not aware of these types but slowly when I have worked with other professional software engineers I get to know the reasons of each element usage.

There are four types of forms which are commercially used. We are going to experience all the forms which can be differentiate by the process of execution like Synchronous and Asynchronous.

Subscribe YouTube For More Videos | Video is in Hindi – URDU

Four types of forms:

  1. Weakly Typed Synchronous-Forms
  2. Strongly Typed Synchronous-Forms
  3. Strongly Typed AJAX Forms
  4. jQuery with AJAX form data

Before getting into the depth of forms you need to understand the basic structure of any form. It may contain least 3 elements if form is designed to send information.

  • <form> tag
  • <input> tag
  • submit button (which can be input with type submit or simple button with type submit)

Weakly Typed Synchronous Forms

These type of forms are designed to send limited information. Each input field hold a unique name which allow server to receive data. Remember that if name of field is not matched with the parameter of server Action, then it will not allow to bind data.  On other hand until the form execution is not completed you can’t do anything on the web-page. That’s why it’s called weakly typed synchronous form.

Form Code:

<form action="/Form/Index" method="post">
   <input type="text" name="textBoxStringData" />
   <input type="checkbox" name="checkboxData" />
   <input type="number" name="textBoxIntData" />
   <input type="submit" value="Submit" />
</form>

Server Code:

[HttpPost]
public void Index(string textBoxStringData, int textBoxIntData, string checkboxData)
{
    //Do something
}

Strongly Typed Synchronous-Forms

It is same as “Weakly Typed Synchronous Forms” but slight difference. It will not send information in parameters, it’s send information in form of object to server. It will allow you to send direct values instead of primitives. It get advantage because of it’s maintainability. You just need to add razor field and add property in ASP Model then it will automatically bind with that. The best part of using these forms are you even don’t do typo mistakes and all the code is developed in razor which is C# client side code.

Form Code:

@using (Html.BeginForm(“Index", "Form", FormMethod.Post))
{
    @Html.TextBoxFor(m => m.TextBoxStringData)
    @Html.CheckBoxFor(model => model.CheckboxData)
    @Html.TextBoxFor(model => model.TextBoxIntData)

    <input type="submit" value="Submit" />
}

Index is Action Name & Form is Controller Name.

Server Code:

[HttpPost]
public void Index(Models.FormData formData)
{
    //Do something with formData
}

You just need to add Model Class and create dynamic reference, In our case Model is “Models.FormData” and reference is “formData”.

Strongly Typed AJAX Forms

This form is the advanced version of above form. Means if you will submit information the page will not stuck, it will allow to perform other things on the screen which will give ease to end user. You can take example of Facebook, if you are doing chat on the same time you can post status to and that’s because of Asynchronous forms.

Form Code:

@using (Ajax.BeginForm(“Index", "Form", 
	new AjaxOptions { LoadingElementId = "loader", OnSuccess = "onSuccess" }))
{
    @Html.TextBoxFor(m => m.TextBoxStringData)
    @Html.CheckBoxFor(m => m.CheckboxData)
    @Html.TextBoxFor(m => m.TextBoxIntData)

    <input type="submit" value="Submit" />
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

Unobtrusive library is used for the validation of form. Index is the name of Action and Form is the name of Controller.

Server Code:

[HttpPost]
public void Index(Models.FormData formData)
{
    //Do something with formData
}

You just need to add Model Class and create dynamic reference, In our case Model is “Models.FormData” and reference is “formData”.

jQuery with AJAX form data

These kind of forms are used for customized data processing. Like you want to send multiple images from multiple input fields then you need to used these form.

Form Code:

<input type="text" id="text" />
<input type="checkbox" id="checkbox" />
<input type="number" id="number" />

<button onclick="submit()">Post with jQuery AJAX</button>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

    //submit data with jQuery AJAX
    function submit() {
        var data = {
            TextBoxStringData: $('#text').val(),
            TextBoxIntData: $('#number').val(),
            CheckboxData: $('#checkbox').is(':checked')
        };

        $.post("/Form/Index", { formData: data }, 
         function () { alert('Successfully posted to server') });
    }

Server Code:

[HttpPost]
public void Index(Models.FormData formData)
{
    //Do something with formData
}

You just need to add Model Class and create dynamic reference, In our case Model is “Models.FormData” and reference is “formData”.

Conclusion

In this tutorial we have learned about four types of forms and how to Creating Forms in ASP.NET MVC. I have tried to explain in the depth of usage and also shared the video above. If you found any flaw in this piece of content let me know through your precious comments.