Updated March 30, 2023
Introduction to ASP.NET MVC Form
ASP.NET MVC Form is the most important and essential thing that most programmers learn. ASP.NET MVC Form is one of the components in the MVC Framework which is suggested to work with Forms. MVC is divided into three ways which focused on the separation of concerns. MVC provides the convenient based, easy set-up and designing of applications and forms and provides the modern, responsive UI Framework in a quick manner.
ASP.NET MVC Form
The main purpose of ASP.NET MVC is the separation of content from the data processing and presentation from the content. MVC stands for Model-View-Controller. MVC separates applications into three components.
- Model- Model is used to represent the business logic and shape of the data. Model objects store and retrieve the model state in the database. It maintains the data of the application.
- View – View is used to represent the user interface it displays the data by using the model to the user and allows to alter the data.
Controller – Controller has mainly used to handle the request of the user.
Let’s see the flow of user requests in ASP.NET MVC
Let’s understand the flow of MVC structure,
Initially, the user enters the URL in the browser. Once entering the URL it passes to the server and makes a call to the controller. Then the controller uses desired View and Models to create the responses and it sends them back to the user. The controller handles the request of the user so the essential thing is to create the controller first.
Create ASP.NET MVC Form
ASP.NET MVC is stateless, initially, it talks to the controller and the controller handles the request and fetches the desired data from the model, and transfers the data to view, and finally, the view is used to display the data to the end-user. Let’s create the form fields by using the Model class and send the data from View to Controller using Model class objects in ASP.NET MVC.
Model
Let’s create the Model Class named with PersonModel it contains four attributes they are the ID of the Person, Name of the Person, Gender of Person, and City of the Person.
public class PersonModel
{
public int Person_ID { get; set; }
public string Person_Name { get; set; }
public string Person_Gender { get; set; }
public string Person_City { get; set; }
}Controller
In Controller class there will be two Action Methods name of Index which one handling for GET operation and another for handling for the POST operation. The Action Method for the POST operation accepts the PersonModel class as a parameter of objects and the value posted from the Form inside the View is retrieved through the parameter. Let’s create the Controller Class as follows,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_Form
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(PersonModel person)
{
int person_Id = person.Person_ID;
string person_name = person.Person_Name;
string person_gender = person.Person_Gender;
string person_city = person.Person_City;
return View();
}
}
}View
Once creating the Model and Controller Class next to add the View for Controller while adding the View for Controller we need to choose the desired Model class here we choose the PersonModel class which we created already,
In the View, the model class PersonModel is declared for the view. The View consists of the HTML form which is developed using Html.BeginForm method with following parameters,
- ActionName – here the Action name is Index
- ControllerName- here the name of the Controller is Home
- FormMethod- here it specifies Form Method which is called GET or POST, here it will be set to POST.
Here in the View model class PersonModel is declared as View and the View consists of the HTML Form which is developed using the Html.BeginForm method with the parameters,
@model Form_Post_MVC.Models.PersonModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="center">Person Details</th>
</tr>
<tr>
<td>PersonId: </td>
<td>
@Html.TextBoxFor(m => m.Person_ID)
</td>
</tr>
<tr>
<td>Name: </td>
<td>
@Html.TextBoxFor(m => m.Person_Name)
</td>
</tr>
<tr>
<td>Gender: </td>
<td>
@Html.DropDownListFor(m => m.Person_Gender, new List<SelectListItem>
{ new SelectListItem{Text="Male", Value="M"},
new SelectListItem{Text="Female", Value="F"}}, "Please select")
</td>
</tr>
<tr>
<td>City: </td>
<td>
@Html.TextBoxFor(m => m.Person_City)
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
}
</body>
</html>Let’s see the Form in output screen,
ASP.NET MVC Form Typed
ASP.NET MVC Form is most important and essential thing which most of programmer to learn. Likewise, the MVC Form also a very essential thing that mostly programmer do their stuff. There are four various methods to create the ASP.NET MVC Forms with easy way, they are as follows,
• Weakly Typed (Synchronous type)
• Strongly Typed (Synchronous type)
• Strongly Typed AJAX (Asynchronous type)
• HTML, AJAX and JQuery
ASP.NET MVC Form Example
Let’s see the above form with their fields,
In the user interface view, there will be textbox field and submit buttons, it contains three textbox fields created for getting the values for ID of the person, name, and city of the person by using the Html.TextBoxFor method. For getting the Gender value of the person, DropDownList with options available with the help of Html.DropDownListFor function. There will be submitting button at the end of Form once the button is clicked the total Form gets submitted.
For the textboxes, the code will be as follows,
Getting the user ID
@Html.TextBoxFor(m => m.Person_ID)
Getting the user Name
@Html.TextBoxFor(m => m.Person_Name)
Getting the user Gender
@Html.DropDownListFor(m => m.Person_Gender, new List<SelectListItem>
{ new SelectListItem{Text="Male", Value="M"},
new SelectListItem{Text="Female", Value="F"}}, "Please select")
Getting the User City
@Html.TextBoxFor(m => m.Person_City)
For Submit button, once getting the entire form values finally submit the form.
<input type="submit" value="Submit"/>
Conclusion
In this article we have created the new ASP.NET MVC Form with Form fields and with submitting data to the controller and also we have seen the various types of form methods. Hope the article helps you to create a simple form in MVC.
Recommended Articles
We hope that this EDUCBA information on “ASP.NET MVC Form” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
