In my previous articles I explain the how to render simple text and how to render HTML controls in Asp.Net MVC.
Today I am going to explain how to create simple registration form by using Asp.Net MVC Framework.
As we did previously we have to set up the development environment before going to write any Asp.Net MVC application. Here I am explaining once again.
Open Visual studio 2008 Framework. Go to File -> New -> Project.
Name the project name as SimpleHTMLMVCPage. Delete unnecessary files as mentioned below.
To delete the unnecessary files, Open Solution Explorer and select the files mention below.
App_Data folder, AccountController.cs controller from Controllers Folder, Account folder from Views folder , About.aspx and
Index pages from Home folder in the Views folder and all files from Shared folder in the Views folder.
You can delete above files individually by right click on each file and select Delete.
Open HomeController.cs controller from Controller folder and delete all code inside the HomeController class and place your own code shown below.
public ViewResult Index()
{
return View();
}
In the HomeController class you are returning object type of ViewResult, which means you are giving the MVC Framework to render a View. In Asp.Net MVC Framework Views are responsible for rendering the HTML content.
Now you have to add a view for Index action method. You can Add simple View for Index() method by referring my previous post
By adding the View for Index() method, Asp.Net MVC will creates the Index.aspx page for Home folder of Views Folder.
Add below code in Index.aspx page.
<div>
<p style="color:Red:">Welcome to Your Website</p>
<%=Html.ActionLink("Registration Page","registration")%>
</div>
The above code will displays the link to your registration page. Html.ActionLink is responsible for displaying the link. It takes first parameter as display text of link and second parameter will take target View name.
Stll now you created the your home page, now you have to create your registration page.
Before going to create your registration page, you have to think how can you submit the data to backend.
Create Model class with parameters what you want to display on registration form. Model is responsible for Business login
Asp.Net MVC. Right click on Models folder, Add New Item, select class1.cs and rename it as regs.cs. Add below code to regs.cs
public class regs
{
public string Name { get; set; }
public string Email { get; set; }
public string Password { get; set; }
}
From the above code, you have three parameters Name, Email and Password. That means you are creating registration form with three fileds Name, Email and Password.
Asp.Net MVC supports HTTP GET and HTTP POST methods. HTTP GET method will responsible for displaying initial blank registraion form whenever user clicks on the registration link. HTTP POST method will responsible for receiveing submitted data.
Add below code in your HomeController.cs class.
//responseible for displayiong initial registration form
[AcceptVerbs(HttpVerbs.Get)]
public ViewResult registration()
{
return View();
}
//responsible for submitting data to Success View
[AcceptVerbs(HttpVerbs.Post)]
public ViewResult registration(regs regStatus)
{
return View("Success", regStatus);
}
Include SimpleMVCForm.Models namespace for your HomeController.cs class.
In the above code, first part is responsible for rendering the “registration” View and second part is responsible for submitting data by rendering the new View “Success” View. You are passing regs instance to submit the data by using POST method.
You can wonder how can HTTP POST method will invoke data by taking .Net type , which is totally unknown to HTTP request. This will be done in Asp.Net MVC by “model binding”. It is a good feature of ASP.NET MVC whereby incoming data is automatically parsed and used to populate action method parameters by matching incoming key/value pairs with the names of properties on the desired .NET type.
Add View registration as shown below by right click on registration (GET) action method.
Now you have to add view “Success” to receiving data. You have to create this view in a different format.
Right click on registration(regs regStatus) and select “Add View”. Name the View as Success as shown below.
Check the “Create strongly-typed View” and select SimpleMVCForm.Models.regs, which instance we are passing to submitt data.
Still now you successfully created the two other views; one is for displaying the your registration form and another one is for receiving the data.
Add below code to your registration.aspx View.
<h1>Registration Form</h1>
<% using(Html.BeginForm()) { %>
<p>Your name: <%= Html.TextBox("Name") %></p>
<p>Your email: <%= Html.TextBox("Email")%></p>
<p>Your phone: <%= Html.TextBox("Password")%></p>
<input type="submit" value="Submit" />
<% } %>
Note that you have to give same names for Name, Email and Password fields what you gave in regs.cs.
In the above code, “ using(Html.BeginForm()) {“ will render the HTML <form> object.
Add below code to your Success.aspx page.
<div>
<h1> <%= Html.Encode(Model.Name) %>, Thank you For Registration !</h1>
<p>Your Email: <%=Html.Encode(Model.Email)%></p>
<p>Your Password: <%=Html.Encode(Model.Password)%></p>
</div>
In the Success.aspx page, you are receiveing the all fields what user submitts on registration page. You can store the user data by adding necessary code in Success.aspx.
Download Sourcecode for above, SimpleMVCForm.zip (257.55 kb)