MVC4 Razor

January 11, 2014

MVC is a kind of coding architecture. Different language is used in MVC architecture.  MVC4 has fully JAVAScript, JQUERY, HTML5 and CSS3 oriented. With MVC4, you will implement well architected, testable and easy-to-maintain web-based and mobile based application

Below is screenshot that shows you how to create a New Project from start page.It includes a New ASP.NET MVC 4 Project dialog box displaying the different types of templates.

Empty: Thistemplate has no any file. It includes only some reference and project class files like RouteConfig.csandWebApiConfig.cs.

Basic:  The basic template consists of a project like some useful JQUERY, CSS, and In-Build themes.

Internet Application: It is used for internet application such as JQUERY, Themes, Database architecture, and class file as like on Demo project of MVC4.

Intranet Application: It looks like you have stored the model in a static property somewhere which might explain the behavior. You stated that you are not using a database then I guess you have invented some persistence in your application.

Mobile Application: You can use this template to create Mobile based application using JQUERY, CSS and HTML5. But some precaution is that required VS2012 SP1 and Window 7 phone Emulator.

Web API, Single page Application and Facebook Application: This template is based on Web services. And most useful feature provided by .net freamwork. In Web API, the created REST API is used by Third party. While the created applications using the single page application looks likethe Google Search Engine. You can get some basic feature for social site and Facebook Oauth in Facebook application.

Have a glance on the MVC4 features:

  1. How to use Controller, View and Model?
  2. Different MVC configuration FILE details for App_Start
  3. What is Bundle?

A. How to use Controller, View and Model?

Controller: It is provided interaction between View and model. Main benefit in MVC4 is that it first runs server side then return VIEW. And the meaning of Razor is to short the syntax which use in VIEW site. (Uisng “@” assign)

Example:

Default1 Controller .cs

publicclassDefault1Controller : Controller

{

// GET: /Default1/publicActionResult Index()

{

ViewData[“Test”] = “How to Write Code in View part”;

return View();

}

}

Index.cshtml

<h2>@ViewData[“test”]</h2>

Output :URL mapping is main benefit in MVC4.  You write URL like http://localhost: /{ControllerName}/{ActionName}/{Parameter}. First Run Controller Part and then Return Particular action regard write in header. Following image shows you how to use them to create an application.

B. Different MVC configuration FILE details for App_Start

All MVC configure with global.asax.cs:

  • FilterConfig.cs: Interaction is provided between one page to another page. And it works like filter. Validated session very redirection. So it useful for increase web site security.
  • RouteConfig.cs:  Using this file, we configure application start up and Handle file of different extension. Check out below example,

Example:

 Ignore .ASMX (Run webservice in MVC4)

routes.IgnoreRoute(“{floderpath}/{resource}.asmx/{*pathInfo}”);

Example:

 Set start-up Page of project

routes.MapRoute(
name: “Default”,
url: “{controller}/{action}/{id}”,
defaults: new { controller = “default”, action = “Index”, id = UrlParameter.Optional }
);

  • WebApiConfig.cs: Provided configuration for REST API like HTTPS services.
  • BundleConfig.cs: Below is the screenshot of BundleConfig.cs.

1) What is Bundle?

Bundle is useful concept for web site performance. In real word, all web site have heavy loaded contain and code. This kind of web site uses lot of JQURY and CSS. So performance of web site decreases. So, MVC4 provides feature minify CSS and JQURY using Bundle concept.

Using this concept, we can increase web site performance and decrease the loading issue of web site up to 80%-90%. It creates some different type bundle for CSS and JQUERY. Using single line code, we can access multiple CSS and JQUERY.

bundles.Add(newScriptBundle(“~/bundles/scripts/allscript”).Include(“~/JQuery/MainJS.js”)
.Include(“~/JQuery/Pager.js”)
.Include(“~/JQuery/Master.js”).Include(“~/JQuery/SessionJQuery.js”)
.Include(“~/JQuery/FilterTable.js”).Include(“~/JQuery/FileUpload.js”)
.Include(“~/JQuery/jQuery.nicescroll.js”));
bundles.Add(newScriptBundle(“~/bundles/scripts/JQueryUI”).Include(“~/JQuery/jQuery-ui.js”));

//CSS Bundle
bundles.Add(newStyleBundle(“~/bundles/styles”)
.Include(“~/CSS/Style.css”));

bundles.Add(new StyleBundle(“~/bundles/InnerPageStyle”).Include(“~/CSS/InnerPageStyle.css”).Include(“~/CSS/jQuery  -ui.css”));

//Minifying in Condition

BundleTable.EnableOptimizations = true;

}

Note: JQURY confliction occurs when created bundle and use in view page. All JQURY include in one bundle that can be access only one URL.

How to use in View part? Example: 
index.cshtml

<html>
<head>
<metacharset=”utf-8″/>
<metaname=”viewport”content=”width=device-width”/>
<title>@ViewBag.Title</title>
@Styles.Render(“~/bundles/styles”)
@Scripts.Render(“~/bundles/scripts/allscript)
</head>
<body>
</body>
</html>

Share on

Nitin Suvagiya

He is working with Softqube Technologies as Director, since 2009. He has over 15+ years of experience in Microsoft Technologies, working as a CEO and also providing consultation in DevOps as he is DevOps certified. He has good expertise in UX/UI designing in any application.

Let’s Work together!

"*" indicates required fields

Drop files here or
Max. file size: 5 MB, Max. files: 2.
    This field is for validation purposes and should be left unchanged.