Sample Register Form in Asp.net MVC3 Razor

Sample Register Form in Asp.net MVC3 Razor

For creating Sample Register Form we have used one controller, two views and one model class.


Watch Video


Following are the Steps :

Step 1 :

Create a new empty internet ASP.NET MVC3 project.

Step 2 :


Creating Controller - Right Click Controller Folder => Add => Controller, a window will open as shown below.




                       


Name the controller as LoginController and choose template as Empty. Click on Add. This will create a LoginController with default Index Action Method as shown below.






Step 3 :
Creating Model - Create a new Model class for our login View.
Right click on Model Folder => Add => New Item. A window opens.        Add a new class file, under Web section and name it as Login.cs as shown below.



After clicking on Add, it will generate a default class file named Login.cs as shown below.



Our Model class is ready. We have to add properties which we are going to use in the Login Form. Add few properties to Login.cs file as shown below.



Our Model class is ready to use. Now we will create a view for Registering.


Step 4 :

Open the LoginController.cs right click inside the Login Method and click on Add View as shown below.



After clicking on Add view, a window will open.


Create a Login View. Do not select any checkboxes. We will create a plain simple view without model and Layout.
If we want we can include the layout and model class later. After creating the view, it will look like below.




Create a form and create controls or markup to display the properties defines in the model.
Include the reference of the model which we created earlier at the top section of the view as shown below.



Points To Remember :

LabelFor - LabelFor allows binding with the model property.
EditorFor - EditorFor renders control depending upon the property. Instead of using editor for, we have other options as well. We can use textbox, dropdown etc.
Form - We gave two attributes to the form. First property is the name of the action method to post the form. The second attribute is the name of the controller.                               button - Submit button is of type submit, on click of this button the form with entire properties is posted to the action method.
        

Lets see how SubmitLoginDetails() action method in controller looks like :



We created an action method of the same name we gave in the Login View's Form. This action method accepts an model object.
When you fill all the fields and press the submit button. The form is posted to this method, and the model object is filled with the values you entered, stored in the model properties. This model object is then passed to View corresponding to the SampleLoginView() action method.


Lets see how SampleLoginView looks like :



This ends our sample login form. This form is simplest of the form without validation.
Before running the application make sure you make changes in the global.asax file, as shown below.




In the Global.asax file, you specify the name of the controller and action method to call, when application runs.
In our case we gave Login as name for controller and Action method.


Flow After Running Application



When you run the application, the debugger hits the Login action method in Login controller as set in the Global.asax file.
In the action method we create an object of the Model class, and pass the object to the view. View renders as following on the browser.

                        

Fill in the details in the form. Suppose we fill the values as below.



                         


After filling the form click on the submit button. It will post the form to the SubmitLoginDetails Action method.


We have passed the model object to the action method. We get all the values we filled in the form, in this object.
This is because, we have binded the form fields with the model properties. This object with form values is passed to the
SubmitLoginDetailsView to display the information.

                                          





The Sample Register Form Tutorial Ends Here !

Must Read :

Simple Register and Login application in MVC3 Razor with Database interaction










12 comments:

  1. Great start-up demo (h)

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Hi,I want to ask which one is more easier and more fast in development field I mean Razor and ASPX. I just only know a few of ASPX.
    Razor is a little difficult for me as beginner.https://lh4.googleusercontent.com/-hk3q3tP-0Pg/T2WEcRONc5I/AAAAAAAACbY/bJ00rge5Mq8/s36/16.gif

    ReplyDelete
  4. very nice to start mvc3 demo....

    ReplyDelete
  5. Very nice article for beginners (h)...Very easy to understand and very well explained (o)

    ReplyDelete
  6. Very nice demo for beginners. thanks (h)

    ReplyDelete