High level ASP.NET MVC website dependencies

• The .NET Framework
• Static content – eg: javascript, css, images and content folders
• External services – eg: database, web services etc

What to include with deployment

• /bin/folder – compiled code
• Special files – eg: Web.Config, Global.asax
• Static content – eg: javascript, css, images and content folders
• ASP.NET MVC diverges when it comes to views – include everything under Views folder

What not to include

• Source code files (already included as compiled binaries)

Deployment checklist

• What system-level applications and APIs does the application require (eg: OS version, IIS version, .NET Framework version) – does any software need to be installed on the server?
• What system level folders or files does teh application require?
• Does the application require databases?  - is it properly configured (ie. users created etc)? – have there been any updates to the database scheme since the last release?
• What other servers or services does the application interact with? (firewall rules etc)
• Do I have all of the appropriate licenses purchase and available? 

Deploying to IIS

• Hosting ASP.NET MVC is similar to ASP.NET
• Ensure that the target web server has .NET 4.0 or later

Run the following script against the database to add a login as a member of a fixed server role. (or use  ALTER SERVER ROLE instead as this will be deprecated soon.)

If getting an access denies error, try adding the server name for database.

Right click on the project and select publish to publish the web site.

Run the following command on on command line.

Change the connection string to meet these shared settings

<connectionStrings>
<span style="line-height: 1.714285714; font-size: 1rem;"><add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=Auction.Models.AuctionDataContext;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\Auction.Models.AuctionDataContext.mdf" providerName="System.Data.SqlClient"/></span>
 </connectionStrings>

Areas

When your ASP.NET MVC application grows, it can get complicated with more controllers and views. To overcome this problem we could break up the work with areas.

For example we could separate the admin section into a new area called admin. This way we could create an administrative portal and avoid mixing administrative and public controllers.

Create the area:

Project > Add > Area 

Create a controller:

Right click > Add > Controller

Exposing data via ASP.NET Web API services

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

REST: HTTP verbs

Introduction

When developing a responsive web site in ASP.NET MVC, presentation should consider small screens, and intermittent connections.

There are two ways to target mobile devices in ASP.NET MVC

1. Add views for mobile devices
2. Create a separate application optimized for mobile

For testing the changes you made, add the browser specific user agent string for your browser.

• Firefox – Install User Agent Switcher Plugin
• IE – In the Developer Toolbar  select Tools > Change user agent string > Custom, add the user agent string for the device you test.

User Agent Strings

iPhone – Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 )

iPad - Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

1. Adding views for mobile devices

Create a new view and name it accordingly, in our case let’s call it Index.Mobile.cshml

@model IEnumerable<Auction.Models.Auction>

@{
 ViewBag.Title = "Auction";
 DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}

<h2>Index</h2>

<p>
 @Html.ActionLink("Create New", "Create")
</p>

@foreach (var item in Model)
{
 @Html.Partial("_AuctionTile", item)
}

Avoid desktop devices from seeing mobile view by setting the RequireConsistentDisplayMode to true as shown in line 5 .

Foe switching between modes, create a method in HomeController.cs

public ActionResult SwitchView(string returnUrl, bool mobile = false)
{
  HttpContext.ClearOverriddenBrowser();
  HttpContext.SetOverriddenBrowser(
  mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

  return Redirect(returnUrl);
}

In the Global.asax file, insert an entry for displaying modes

public ActionResult SwitchView(string returnUrl, bool mobile = false)
{
   HttpContext.ClearOverriddenBrowser();
   HttpContext.SetOverriddenBrowser(
   mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

   return Redirect(returnUrl);
}

2. Creating a separate application optimized for mobile
Create a new ASP.NET MVC Web Application and select Mobile Application as the template.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div data-role="page" data-theme="b">
      <div data-role="header">
        @if (IsSectionDefined("Header")) {
        @RenderSection("Header")
       } else {
       <h1>@ViewBag.Title</h1>
       @Html.Partial("_LoginPartial")
      }
 </div>
 <div data-role="content">
 @RenderBody()
 </div>
 </div>

@Scripts.Render("~/bundles/jquery")
 <script>
 $(document).on("mobileinit", function () {
 $.mobile.ajaxEnabled = false;
 });
 </script>
 @Scripts.Render("~/bundles/jquerymobile")
 @RenderSection("scripts", required: false)
 </body>
</html>

In this article we discuss about four ways of optimizing your ASP.NET MVC application:

1. Caching
2. Child actions
3. Asynchronous actions
4. Content bundling and minification

Introduction

There are three primary players involved when it comes to optimization:

1. Server – Respond as faster
2. Client – Render page as faster
3.  Internet – Send server’s response to the client faster

When it comes to optimization, we don’t have much control over the internet, but we could reduce the amount of requests.

Client-side code can be optimized by content bundling and minification.

Common server tasks include:

• Interacting with database
• Logic & data manipulation
• Rendering HTML to the browser

Optimizing database interactions

• Optimizing data for a limited period of time (caching)

- raw data

- fully rendered pages

- pieces of pages

•   Interacting with the database on a separate thread

Output caching

• Caching fully rendered HTML
• Caching part of the HTML
• caching the raw data

using System.Web.Mvc;
using Auction.Models;

namespace Auction.Controllers
{
 public class AuctionsController : Controller
 {
 //
 // GET: /Auction/
 [AllowAnonymous]
 [OutputCache(Duration = 1)]
 public ActionResult Index()
 {
 var db = new AuctionDataContext();
 var auctions = db.Auction.ToArray();

return View(auctions);
 }

Microcaching

Caching a for a very short period time like one second. This is required in instances like reducing thousands of database queries per second. This reduces the bottleneck for database access.

Child Controllers/ Child Actions

A Child Action in MVC is similar to  a User Control in ASP.Net web forms. It allows for a controller to execute for a portion of the rendered area of a view, just like in Web Forms where you can execute a UserControl for a portion of the rendered area of a page.

Child Actions can be very powerful especially when you want to have re-usable controller code to execute that you otherwise wouldn’t want executing inside of your view. This makes unit testing simpler because only controller code need to be tested, not the code in a view.

3. Asynchronous Actions

When there’s a long running operation, you can’t apply output caching. Asynchronous actions can be used to resolve this problem by scaling your site for more concurrent users.

ASP.NET Thread Pooling

When a request being made on your ASP.NET website, it calls a vacant thread from the thread pool. If there are lots of requests, and the thread pool runs out of free threads, your website will stop responding. To mitigate this issue, asynchronous actions can be used to queue the requests.

When to use asynchronous controller

• Long running operations (eg; longer than a second)
• When a user may cancel a long-running operation
• I/O intensive  or network related operations (efficiency)

When NOT to use asynchronous controller

• Short running operations
• CPU intensive operations
• Simple operations (simplicity)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;

namespace Auction.Controllers
{
 public class SearchController : AsyncController
 {
 public async Task<ActionResult> Auctions(string keyword)
 {
 var auctions = await Task.Run<IEnumerable<Models.Auction>>(
 () =>
 {
 var db = new Models.AuctionDataContext();
 return db.Auction.Where(x => x.Title.Contains(keyword)).ToArray();
 });

return Json(auctions, JsonRequestBehavior.AllowGet);
 }

}
}

4. Bundling and minification

Modern browsers limit open connection to 6. Rendering stops to wait for some scripts to finish downloading.

Bundling(reduces the number of files) and minification(makes files smaller) can be used for reducing page load times. .NET framework provides System.Web.Optimization library for this purpose.

Bundling

Bundling compiles multiple files into one request:

You can register your bundles on the BundleConfig.cs file of App_Start folder.

using System.Web;
using System.Web.Optimization;

namespace Auction
{
 public class BundleConfig
 {
 // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
 "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery.unobtrusive*",
 "~/Scripts/jquery.validate*"));

Note that line 15 uses a version placeholder and line 19 uses a wild card to look for similar files.

Styles and script files should be references on _Layout.cshml file.

<meta charset="utf-8" />
@ViewBag.Title - My ASP.NET MVC Application
        	<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /><meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

Set the debug flag to false on your Web.config file

<system.web>
 <compilation debug="false" targetFramework="4.5" />
 <httpRuntime targetFramework="4.5" />
 <authentication mode="Forms">
 <forms loginUrl="~/Account/Login" timeout="2880" />
 </authentication>

Out of the Box When you create an MVC web site, anyone can post to your site. So we need to control the user access. Microsoft provides a pre-made code for this: [Authorize] attribute Properties of the [Authorize] attribute

• users
• roles

 [HttpPost]
 <strong>[Authorize]</strong>
 public ActionResult Create([Bind(Exclude="CurrentPrice")]Models.Auction auction)
 {
 if (ModelState.IsValid)
 {
 // Save to the database
 var db = new AuctionsDataContext();
 db.Auctions.Add(auction);
 db.SaveChanges();
 return RedirectToAction("Index");
 } </code>

return Create();
 }

 [AllowAnonymous]
 public class HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }
 }
 </code>

<div class="code"><section <span class="ReferenceType">class</span>=<span class="String">"social"</span> id=<span class="String">"socialLoginForm"</span>>
     <h2>Use another service to log <span class="Statement">in</span>.</h2>
     @Html.Action(<span class="String">"ExternalLoginsList"</span>, <span class="Keyword">new</span> { ReturnUrl = ViewBag.ReturnUrl })
 </section></div>
<div class="code"></div>
<div class="code">