Post
Ask Question

Create a Registration Form in ASP.NET MVC

Introduction

In this program we will learn to create a registration form used ASP.NET MVC tools. MVC is an integrated module and this is built on three separated words Models,Views,Controllers. Models provide the business logic views provide the presentation and controllers handle the request. Now in this ASP.NET MVC application we will create a registration form first we add the class in the models folder. Second we add a controller in the controller folder and last we create the three views named ndex, create and details. The ASP.NET MVC framework is a lightweight highly testable presentation framework that is integrated with existing ASP.NET features such as master pages and membership based authentication. The MVC framework is defined in the System.Web.Mvc namespace and is a fundamental supported part of the System.Web namespace.

Step 1:  Open Visual Studio 2010.

  • Go to file -> New->Projects.
  • Create an ASP.NET MVC 2 Empty Web Application.
  • Name of "manishRegistration".
str.gif

 start.gif

Step 2:  Add a class in the model folder.

  • Right click on the Models folder ->add new items->add class.
  • Name of Class is "manish".
  • In a class define the properties.

addcalaa.gif

classname.gif

Step 3: Define the business logic in a class.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace MnaishRegistration.Models  
  6. {  
  7.     public class Mnaish  
  8.     {  
  9.         public string Email_Id { get; set; }  
  10.         public string passward { get; set; }  
  11.         public string  BirthYear { get; set; }  
  12.         public string IndianZipCode { get; set; }  
  13.         public string Gender { get; set; }  
  14.     }  
  15. } 

Step 4: Add a controller.

  • Right click on the Controllers folder ->add->Controllers.
  • Name of Controllers is "manu".
  • In a controller, define the request.

addcontroller.gif

controllername.gif

Step 5:  Write the code in controller.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MnaishRegistration.Models;  
  7. namespace MnaishRegistration.Controllers  
  8. {  
  9.     public class manuController : Controller  
  10.     {         
  11.      static List<Mnaish> mm = new List<Mnaish>();  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View(mm);  
  15.         }  
  16.         public ActionResult Details(Mnaish mm)  
  17.         {  
  18.             return View(mm);  
  19.         }  
  20.         public ActionResult Create()  
  21.         {  
  22.             return View();  
  23.         }  
  24.          [AcceptVerbs(HttpVerbs.Post)]  
  25.         public ActionResult Create(Mnaish monu)  
  26.         {  
  27.             if (!ModelState.IsValid)  
  28.             {  
  29.                 return View("Create",monu);  
  30.                  }  
  31.             mm.Add(monu);  
  32.             return RedirectToAction("Index");  
  33.         }  
  34.     }  
  35. } 

Step 6:  Add the 3 view.

  • The first view is "index".

addview.gif

innnnnn.gif

indexview.gif

Step 7:  Write the code in index view.

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MnaishRegistration.Models.Mnaish>>" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title>Index</title>  
  6. </head>  
  7. <body bgcolor="#ff9999">  
  8. <h2 style="background-color: #FF8080">manish application</h2>  
  9.     <div style="background-color: #CC3399">  
  10.     <table>  
  11.     <tr>  
  12.         <th></th>  
  13.         <th>  
  14.            Email  
  15.         </th>  
  16.        <th>  
  17. |            Passward  
  18.         </th>  
  19.         <th>  
  20.             BitrhYear  
  21.         </th>  
  22.         <th>  
  23.             INdZipCode  
  24.         </th>  
  25.         <th>  
  26.            Gender  
  27.         </th>  
  28.     </tr>  
  29. <% foreach(var Man in Model) { %>  
  30.     <tr>  
  31.         <td>    
  32.           <%= Html.ActionLink("Details", "Details", Man)%>  
  33.   
  34.         </td>  
  35.         <td>  
  36.             <%= Html.Encode(Man.Email_Id) %>  
  37.         </td>  
  38.         <td>  
  39.             <%= Html.Encode(Man.passward) %>  
  40.         </td>  
  41.         <td>  
  42.             <%= Html.Encode(Man.BirthYear) %>  
  43.         </td>  
  44.         <td>  
  45.             <%= Html.Encode(Man.IndianZipCode) %>  
  46.         </td>  
  47.         <td>  
  48.             <%= Html.Encode(Man.Gender) %>  
  49.         </td>  
  50.     </tr>  
  51. <% } %>  
  52. </table>  
  53. <p>  
  54.     <%= Html.ActionLink("Login Now", "Create") %>  
  55. </p>  
  56. </div>  
  57. </body>  
  58. </html>

Step 8: Add the second view.

  • the second view is" create".

addview.gif

create.gif

creteview.gif

Step 9:  Write the code in create view.

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MnaishRegistration.Models.Mnaish>" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title>Create</title>  
  6. </head>  
  7. <body bgcolor="#ffccff">  
  8.        <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>  
  9. <% using (Html.BeginForm()) {%>  
  10.     <fieldset>  
  11.         <legend>Fields</legend>  
  12.         <p>  
  13.             <label for="Email_Id">Email_Id:</label>  
  14.             <%= Html.TextBox("Email_Id")%>  
  15.             <%= Html.ValidationMessage("Email_Id", "*")%>  
  16.        </p>  
  17.       <p>  
  18.             <label for="Passward">Passward:</label>  
  19.            <%=Html.Password("*") %>  
  20.             <%= Html.ValidationMessage("Passward", "*") %>  
  21.        </p>  
  22.        <p>  
  23.             <label for="BirthYear">BirthYear:</label>  
  24.             <%= Html.TextBox("BirthYear")%>  
  25.             <%= Html.ValidationMessage("BirthYear", "*")%>  
  26.     </p>  
  27.      <p>         
  28.     <label for="IndianZipCode ">IndianZipCode :</label>  
  29.             <%= Html.TextBox("IndianZipCode ")%>  
  30.             <%= Html.ValidationMessage("IndianZipCode ", "*")%>  
  31.     </p>  
  32.     <p>  
  33.             <label for="Gender ">Gender:</label>  
  34.             <%= Html.TextBox("Gender ")%>  
  35.             <%= Html.ValidationMessage("Gender ", "*")%>  
  36.     </p>  
  37.     <p>  
  38.             <input type="submit" value="Login" />  
  39.         </p>  
  40.     </fieldset>  
  41. <% } %>  
  42.     <div>  
  43.         <%: Html.ActionLink("Back to List", "Index") %>  
  44.     </div>  
  45. </body>  
  46. </html> 

Step 10: Add the third view.

  • the third view is "detail"

addview.gif

detail.gif

detailsview.gif

Step 11:  Write the code in Details view.

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MnaishRegistration.Models.Mnaish>" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title>Details</title>  
  6. </head>  
  7. <body bgcolor="#ffff99">  
  8.     <fieldset>  
  9.         <legend>Fields</legend>  
  10.         <div class="display-label">Email_Id</div>  
  11.         <div class="display-field"><%: Model.Email_Id %></div>         
  12.         <div class="display-label">passward</div>  
  13.         <div class="display-field"><%: Model.passward %></div>  
  14.         <div class="display-label">BirthYear</div>  
  15.         <div class="display-field"><%: Model.BirthYear %></div>  
  16.         <div class="display-label">IndianZipCode</div>  
  17.         <div class="display-field"><%: Model.IndianZipCode %></div>  
  18.         <div class="display-label">Gender</div>  
  19.         <div class="display-field"><%: Model.Gender %></div>  
  20.     </fieldset>  
  21.     <p>  
  22.         <%: Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %> |  
  23.         <%: Html.ActionLink("Back to List", "Index") %>  
  24.     </p>  
  25. </body>  
  26. </html> 

Step 12: press crtl+f5 run the application.

injout.gif

 creteout.gif

 detaiout.gif


Similar Articles