Running Our First MVC 4 Application

Now we will run our newly created ePhoneBook application. We can run this in debug mode or without debug. To run this go to the Menu Debug -->Start Debugging/Start without debugging.

You can also use the shortcut key F5 / Ctrl + F5 to run this application

The run command is also there in the Standard Toolbar, the below given image shows the run toolbar in VS 2012 IDE.

The below given image shows the run command in standard toolbar of VS 2010

Once you have run the application you can see the below Home page

If you want to debug your application then you need to set a break-point at the location where you want to hit the debugger.

To set breakpoints just go to the menu Debug -->Toggle Breakpoint.

You can use the shortcut key F9 also for the same. you might want to note the short keys for Step Into (F11) and Step Over (F10). Once you hit the breakpoint you can resume debugging by pressing F5.

To demonstrate the debugging I have placed two breakpoints, one in Home Controller – About() and About.cshtml. When I clicked on About Menu the first break point got hit.

You can Step Over by F10 or just resume to the next breakpoint by F5. I pressed F5 and the second breakpoint got hit.

If you want see the value then you can see in watch window and also there are other windows too, to add a object to Watch Window, select the required object and right click and click on AddWatch.

Once you have placed the object in Watch window you can see the current value in that window

If you resume your breakpoints you can see the About page in action,

Have you noticed that the url is very user friendly with no extensions and all. The ASP.NET MVC routing takes care of this URL routing. Read more on routing on MSDN.

To stop debugging you need to press Shift + F5 or go to the Debug menu and click on Stop Debugging.

Stopping Debugging from the standard toolbar

If you want to make any changes while debugging then you can edit and continue the application, if that option is enabled. to check this option is enabled or not, go to Tools->Options then

In ASP.MVC, Layout is used to give similar look and feel for the entire application this was called master page in ASP.NET Web forms. Below given the Layout page in our application,

You can see that the Menus like Home, About Contact was shown from this Layout. So how this page is called? So where the content page is placed, it’s simple, the @RenderBody mentioned that the content page will be displayed in that area.

This Layout can be mentioned in individual views or in _viewstart file. The ViewStart file called the Layout in below syntax,

While debugging our application we have noticed something named ViewBag. It's a dynamic data dictionary.

As we have used Internet Application Project template the code is generated with Membership management. Let’s have a look into that.

Now I’m going to create a User named Shemeer using the Register link.

If you want you can place a breakpoint on AccountController’s register action. When I click ‘Register’ Button it reaches the WebSecurity.CreateUserAndAccount().

This method saves my credential to the aspnet* database. Wondering J this database was created automatically as part of memebership management and this database by default resides under the App_Data folder.

And the connection string has been created inside the web.config also

Now I'm trying to login using the Login page

I’m able to login and my user name is showing in right top corner as logged in