ASP.NET MVC Framework, Creating application from scratch
To create MVC Application from the scratch, we follow the following steps.
Step1. Select the ASP.NET Web Application (.NET Framework) and click Next button.
Step2. Give a meaningful name of your project. For example, MvcWebApp.
Step3. Select Empty project template. Don't check mark any options from the "Add folders and core references" and uncheck the "configure for HTTPS". and click "Create"
Step4. The default folders and files appear in the Solution Explorer. If you click the CTRL+F5 or F5, we get the following error.
The error occurs because many important references such as System.Web.Mvc are missing in this application. We will add them one by one as we go ahead.
Explore the files generated
Before that we look at the default files and folders added in the Solution Explorer. We find packages.config and web.config file apart from Properties and References. Expand the References node to see the default added references.
Collapse the node and click the packages.config file and look at its code. It is an XML file. We find the following code.
// Version
information for an assembly consists of the following four values:
//
// Major Version
// Minor Version
// Build Number
// Revision
//
// You can
specify all the values or you can default the Revision and Build Numbers
// by using
the '*' as shown below:
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
Adding the Reference of System.Web.Mvc
Step5. We add the reference of System.Web.Mvc. It is required to develop MVC application. Right click the References node and click Add References.
Then click the Assemblies node the LHS. Expand it and select Framework. Press CTRL +E to reach the search box and type Mvc and then we find the System.Web.Mvc. Select it and click OK. We find the System.Web.Mvc added in the References. Next we need the RouteConfig class and Global.asax files to set the routing in the MVC application. Without them, application will not work. Both files are interrelated.
Step6. Now we add "App_Start" folder in the project.
Step7. We add the RouteConfig class file inside the App_Start folder.
Step8. We add the following code in the RouteConfig class. We add RegisterRoutes method in this class. The code is as follows.
using System.Web.Mvc;
using System.Web.Routing;
namespace MvcWebApp.App_Start
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute
(
name: "default",
url: "{controller}/{action}/{id}",
defaults: new
{
controller = "Home",
action = "Index",
id = UrlParameter.Optional
}
);
}
}
}
NOTES
The MapRoute has three named parameters: name, url and defaults.
The RouteCollection belongs to System.Web.Routing namespace.
The IgnoreRoute and MapRoute methods belongs to System.Web.Mvc.
Step9. We add Global.asax file. Press CTRL+SHIFT+A and then CTRL+E to reach inside the search box. Type global and press ENTER. We get the Global Application class file. Select it and click Add button.
Step10. Now we get the Global.asax file in the Solution Explorer and it contains Global.asax.cs file. The default code in the Global.asax.cs file is as follows.
NOTE: We renamed the class Global to MvcApplication in the above code. This class name is referenced in the Global.asax file as well. We have to edit it there as well.
Select the project in the Solution Explorer and right click and the select "Open Folder in File Explorer". We reach inside the project folder. We find the Global.asax and Global.asax.cs files there. Right click Global.asax and open it in Notepad or Notepad++. Next, we have to edit it.
We change inherits = "MvcWebApp.Global" to inherits = "MvcWebApp.MvcApplication". Save the file and close it.
Step11. Rebuild the Application using CTRL+SHIFT+B.
ADDING CONTROLLER AND VIEW FILES WITHOUT SCAFFOLDING
Step12. We have added the logic of routing in the RouteConfig and Global.asax and Global.asax.cs files. Now we will add the Controllers folder and Views folder in the project.
We add a HomeController.cs class file in the Controller folder. It is a normal simple class, not controller class.
The default code is as follows:
namespace MvcWebApp.Controllers
{
public class HomeController
{
}
}
We need to inherit the Controller class in HomeController class so that HomeController inherits all properties and methods of Controller class. Then, the HomeController class becomes a controller class.
The modified code is as follows after inheriting the Controller class:
using System.Web.Mvc;
namespace MvcWebApp.Controllers
{
public class HomeController : Controller
{
}
}
REMARK: Controller class is a special class in MVC Framework which must be inherited by any controller class to become a controller.
All the methods in the user's controller class will be public and non-static and will return ActionResult object.
The ActionResult class is an abstract class which derived classes such as ViewResult, ContentResult, PartialViewResult, FileResult, JsonResult, JavaScriptResult etc. can be used as an action method return type.
We add an Index method in the HomeController class.
The modified code is as follows
using System.Web.Mvc;
namespace MvcWebApp.Controllers
{
public class HomeController:Controller
{
public ActionResult Index()
{
return View();
}
}
}
MVC Convention
As the above method returns a view. The View() method returns a view which name will be the name of the action method. It means that the Index named view will be returned by the Index action method of Home controller.
We create Home folder inside the Views folder which is the repository of all views and the Views folder contains subfolders which are named for each controller class used in the Controller folders. And, we add the Index.cshtml file inside the Views/Home folder. Select the Home folder and press CTRL+SHIFT+A. Then, CTRL+E and type razor in the search box. Select the MVC 5 View Page (Razor)
Rename the file as Index.cshtml and click Add button. The Index.cshtml file is added inside the Home folder.
Rebuild the project by pressing CTRL+SHIFT+B and run the project by pressing CTRL+F5 or F5.
We get the following error.
Exception Details: System.InvalidOperationException: The view at '~/Views/Home/Index.cshtml' must derive from WebViewPage, or WebViewPage<TModel>.
[InvalidOperationException: The view at '~/Views/Home/Index.cshtml' must derive from WebViewPage, or WebViewPage<TModel>.]
Reason of this error?
A razor page i.e. .cshtml file is not simple html file. It contains the C# codes apart from HTML code. The C# codes must be converted into HTML code to render the view as HTML page. So, every view page must inherits the System.Web.Mvc.WebViewPage class which provides the methods and properties to render the page as HTML. We can get some idea by the following Intellisense hints.
So, What is the solution? We must add the following directive in the Index view page at the top of the code.
@inherits System.Web.Mvc.WebViewPage
This will enable the view page to inherit all the methods and properties System.Web.Mvc.WebViewPage class to render the page as HTML.
The Index.cshtml page code becomes as shown below.
Again, rebuild the project by pressing CTRL+SHIFT+B and run the project by pressing CTRL+F5 or F5. Now, We get the expected view page.
But the problem is, we will have to add the directive @inherits System.Web.Mvc.WebViewPage
in all the view pages.
To solve this problem, we can use the web.config file. We add the <configSections> and <system.web.webPages.razor> tags inside the <configuration> tag.
No comments:
Post a Comment