Various Ways to Submit Forms in ASP.NET MVC

Introduction:

In ASP.NET MVC applications, forms play a crucial role in interacting with users and gathering data. Knowing various ways to handle form submissions not only enhances user experience but also improves the overall functionality of your application. This tutorial will explore different techniques for submitting forms in ASP.NET MVC, including traditional form submissions, AJAX requests, and more.

What is Form Submit (Submission)?

The user fills in the form/page and sends the entered details to the server. In the end, we want information; and the user details should be saved on the server.

Following are the ways to submit the form.

  • @Html.BeginForm with hard-code Action.
  • @Ajax.BeginForm with hard-code Action.
  • HTML Input Submit Button using FormAction, FormMethod attributes.
  • Using jQuery set form Action property.
  • Using jQuery AJAX with FormData.
  • Using jQuery AJAX with serializeFormJSON.

@Html.BeginForm

BeginForm is an extension method of @HtmlHelper class and used for creating, rendering the form tag in HTML.

@Ajax.BeginForm

BeginForm is an extension method of @AjaxHelper classes and used for creating, rendering the form tag in HTML. @Ajax.BeginForm Helper method submits the form asynchronously using JavaScript.

HTML Submit Button using FormAction, FormMethod

This FormAction attribute is new in HTML5 using INPUT type “submit”. FormMethod attribute is where we can define the method of submission “POST” or “GET”.

Using jQuery set form Action property

We can change action property using jQuery and submit the form on the desired action.

Using jQuery AJAX with FormData

We can submit the Form using jQuery Ajax with FormData. It's a very simple and fast way to submit the form. FormData is used to create an object and pass the form data. This method or way is not good for more fields forms because we have to assign manually the value of form control to FormData object and property.

Using jQuery AJAX with serializeFormJSON

Using serializeFormJSON will auto pick the value and generate the object that we can get in the POST action method.

In-depth Look at @Html.BeginForm

@Html.BeginForm is an extension method of @HtmlHelper class and used for creating, rendering the form tag in HTML.

Syntax of @Html.BeginForm

The syntax of @Html.BeginForm is as follows:

@using (Html.BeginForm())
{
    // Form elements go here
}

Task

We have to create the following screen and send entered data to the server and store into a database table.

We will be do the following to complete the task,

  • Create Table called CityMaster,StateMaster.
  • Create Asp.Net MVC Project.
  • Create Code First Entity Framework dbContext classes.
  • Create Model CityMasterModel and StateMasterModel.
  • Create an ActionMethod called “CityDetail” inside HomeController.
  • Create view called “CityDetail”.

TABLE STRUCTURE:



CREATING MVC PROJECT IN A VISUAL STUDIO 2022 BY USING SOME SIMPLE STEPS.

STEP 1: Open Visual Studio 2022 or any version of Visual Studio. Then, click on "Create a new Project."

 


STEP 2: In the search bar, look for ASP.NET. Select "ASP.NET Web Application (.NET Framework)" with C# and proceed by clicking on the "Next" button.

 


STEP 3: Provide a name for your project and choose its location. If the checkbox below the Solution Name is selected, uncheck it before clicking on the "Create" button. 


STEP 4: Upon clicking the "Create" button, a new window will appear. Option for "Empty" and in the Advanced section, deselect the "Configure For Https" option while selecting the "MVC" checkbox under "Add Folders & Core References." Finally, click on the "Create" button. 


Right Click on Model Folder  --> Add --> Ado.net Entity Model






























Create a Controller HomeController
Create a new controller called HomeController in the Controllers folder with the following code:

Create Index View :
Right Click on Index Method --> Add View 



Conclusion:
Understanding the various methods of submitting forms in ASP.NET MVC is crucial for developing interactive and efficient web applications. This tutorial covered multiple approaches, including traditional form submissions, AJAX requests, and leveraging jQuery for dynamic form handling.

Related Articles
Coming Soon