Cloudy River's Workshop: October 2015

Wednesday, October 28, 2015

What's Breadcrumb on Web SIte?

Breadcrumb on web site is a navigation menus which shows all position links from home page down to your current page. It offers tracking tools on which user can easily go back and would not get lost on big web sites which host lots of contents.

Source:
http://www.hongkiat.com/blog/breadcrumb-menu-css3/

Monday, October 26, 2015

Best Bootstrap Plugins for Web BI and Reporting

Bootstrap is the best web front end framework designed for responsive design and mobile first. Except for standard Bootstrap functionality, there are lots of popular Bootstrap Plugins you can apply for your Web Reporting and BI requirement.

Fuel UX

is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more.

Add the fueluxclass to a page wrapper (usually either <html> tag or <body> tag)
```
<body class="fuelux">
```

Include the CSS on your page somewhere:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.11.5/css/fuelux.min.css" rel="stylesheet">

Include the JS on your page somewhere:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.5/js/fuelux.min.js"></script>

Fuel UX has an excellent datepicker, repeater, and tree control,

Date Range Picker

is a component creates a drop down from which you can select a range of date. The component relies on Bootstrap, JQuery, and Moments.js. You need to add following scripts and links on your page:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
    $('input[name="daterange"]').daterangepicker();
});
</script>

Clock Picker

is a unique clock style time picker for Bootstrap.

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap and JQuery are the only dependencies.

The component only used .popover and some of .btn styles of Bootstrap.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

metisMenu

Stylish menu will give your website a perfect weapon to attract visitors. metisMenu can be a solution for this, it’s a JQuery based menu plugin for twitter Bootstrap 3. Here in this menu, you can give effects like animated accordion and supported with auto collapse system.

<script 
src="metisMenu.js"></script>
<script>
  $(function () {
    $('#menu').metisMenu();
  });
</script>

Bootstrap WYSIHTML5

A Javascript plugin that makes it easy to create simple WYSIWYG editors.

JQuery File Uploader

A file upload widget which features multiple file selection, drag and drop, progess bars, validation and preview images.

BootstrapValidator

A JQuery plugin for validating forms within Bootstrap.

JQuery Pagination

A plugin that simplifies the usage of Bootstrap's Pagintion by using appropriate classes: .pagination, .active and .disabled.

Bootstrap Star Rating

A jQuery star rating plugin for Bootstrap that supports fractional star fill and RTL input support.

Bootstrap Multiselect

A JQuery based plugin for using select inputs with the multiple attributes.

Bootstrap Video Player

A customizable HTML5 video player plugin for jQuery based on Bootstrap's UI.

Data Tables

Data Tables is the most popular table enhancing add on for Bootstrap. This plugin not only makes your tables sort-able, but it also makes use of the framework’s pagination controls and makes the data searchable. This component is Web BI/Reporting must have tool.

Bootstrap Datagrid

bs_grid is a Bootstrap based jQuery Datagrid plugin. It comes with advanced row selection, pagination, sorting as well as filtering. This bs_grid is fully customizable, responsive, localization and Works sound with Bootstrap or individual.

Social Buttons

Chart.js

Chart.js (github) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!

Bootstrap Image Gallery

Bootstrap Image Gallery is a customizable image & video gallery extension to blueimp Gallery, a touch-enabled, responsive extension for images and videos in the modal dialog of the Bootstrap framework. It features swipe, mouse as well as navigation to keyboard, transition effects, fullscreen support and on-demand content loading. Bootstrap Image Gallery can be extended to display supplementary content types.

Source:
http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/
http://speckyboy.com/2014/06/16/plugins-for-extending-bootstrap/
https://medium.com/@themefisher/40-new-must-have-plugins-for-extending-twitter-bootstrap-possibilities-e2a79592c90b#.coqlx2gc7
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

Friday, October 23, 2015

Bootstrap 3 Responsive Design Introduction

To add Bootstrap 3, insert following code to your web page.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap requires HTML 5 doc type, so always put following at the beginning of your web page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

Bootstrap is mobile first, to ensure proper rendering and zooming, put following at the beginning of your web page.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width sets the page width to screen width of the device. initial-scale=1 sets the initial zoom level when the page was first loaded.

Bootstrap divides screen size into 4 categories, and named with 4 classes accordingly.

Extra Small < 768px named with "xs"
Small < 992px named with "sm"
Medium < 1200px named with "md"
Large >= 1200px named with "lg"

Bootstrap used 2 types of containers to wrap all other web contents:

Fixed width container which has different fixed size for above 4 screens

<div class="container">
</div>

Full width container which takes up 100% of width regardless of screen size

<div class="container-fluid">
</div>

Note containers are not nestable, so you can't put container inside another container.

Following showed a basic Bootstrap web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>
</body>

Bootstrap Grid System, one of the most powerful features, can create great responsive design for all kinds of screen.

Rows must be placed inside .container or .container-fluid for proper align and padding
Rows are used to create horizontal group of columns.
The grid has maximum 12 columns for each row, thus any extra rows would be displayed in a new row.
Each columns has padding, which are spacing between columns and can do align with other columns.

Basic Structure of Bootstrap Grid:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
     ...  
  </div>
</div>

The first * could be xs, sm, md, lg, representing the 4 classes for different screen size, and the last * could be 1,2,3,4. The last * adds up should be always 12.

Example of Bootstrap Grid:

<div class="container">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-4"></div>
  </div>
  <div class="row">
     ...  
  </div>
</div>

The first row of columns will be stacked when the screen size is less than 992px. The second row of columns will be stacked when the screen size is less than 768px.

Note the 4 different classes for different screen size can be combined together to create more flexible layout.

For example, for following code, if the screen is big enough, all will be displayed in one row. However, if the screen get smaller, col-sm-4 will be useless, and all col-xs-6 will be effective, and the last column will be displayed in another row.

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Bootstrap table has following classes:
.table .tablestrip .table-bordered .table-hover .table-condensed .table-responsive

The .tablestrip adds zebra strips to a table.
The .table-bordered adds borders for all sides of the table and cells.
The .table-hover enables hover states on each row.
The .table-condensed makes a table more compact through reduce the cell padding by half.
The .table-responsive makes table scroll horizontally on devices with small screen. Note it should be used with <div> outside the table.

<div class="table-responsive">
  <table class="table tablestrip table-bordered table-hover table-condensed">
    ...
  </table>
</div>

Bootstrap table row and column has following classes:
.active .success .info .warning .danger
.active adds hover color to table cells.

<tr class="success">
  <td>John</td>
  <td>Doe</td>
  <td>john@example.com</td>
</tr>

Bootstrap will let some elements show or hide, depending on the screen size:

Images can scale based on screen size by using .img-responsive class. The image will be scale while keep its aspect ratio. To center responsive image, using .center-block class.

Source:
http://getbootstrap.com/css/
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
http://www.devx.com/webdev/easily-create-responsive-websites-using-bootstrap.html

Wednesday, October 21, 2015

How to Incorporate SSRS Report into MVC 5 Web Application

For traditional ASP.Net Web Form application, you can use ReportViewer control to show your SSRS report. However, for ASP.Net MVC application, you can't use the control in Razor page. Even you can add Web Form into MVC application, these Web Forms are difficult to have similar look and fell as your normal Razor page.

Fortunately, there is a ReportViewer for MVC tool which can help you to resolve this problem.

At first, you need to install the tool from NuGet. Run following command in the Package Manage Console to install the tool:

PM> Install-Package ReportViewerForMvc

Then add reference in your controller to Microsoft.Reporting.WebForms:

using Microsoft.Reporting.WebForms;

Create a new instance of ReportViewer:

ReportViewer reportViewer = new ReportViewer();
reportViewer.ProcessingMode = ProcessingMode.Remote;

reportViewer.ServerReport.ReportPath = "/AdventureWorks 2012/Sales_by_Region";
reportViewer.ServerReport.ReportServerUrl = new Uri("http://localhost/ReportServer/");

ViewBag.ReportViewer = reportViewer;

Above is for the situation that you put all your report on your SQL Server. However, every time your application access those reports, which usually required authorization, you would offer user name and password. To avoid this situation, you can put all your report to your local along with your web application. For this purpose, you need to change the report viewer's ProcessingMode.

        public ActionResult Report2()
        {
            SqlConnection connect = new SqlConnection(connectionString);
            SqlDataAdapter dataAdapter = new SqlDataAdapter();
            SqlCommand cmd = connect.CreateCommand();
            cmd.CommandText = 
               @"SELECT  DimOrganization.OrganizationName, DimDepartmentGroup.DepartmentGroupName, DimDate.CalendarYear, DimDate.EnglishMonthName, DimDate.MonthNumberOfYear, SUM(FactFinance.Amount) AS SubTotalAmount
                 FROM FactFinance INNER JOIN
                     DimDate ON FactFinance.DateKey = DimDate.DateKey INNER JOIN
                     DimDepartmentGroup ON FactFinance.DepartmentGroupKey = DimDepartmentGroup.DepartmentGroupKey INNER JOIN
                     DimOrganization ON FactFinance.OrganizationKey = DimOrganization.OrganizationKey
                 GROUP BY DimOrganization.OrganizationName, DimDepartmentGroup.DepartmentGroupName, DimDate.CalendarYear, DimDate.EnglishMonthName, DimDate.MonthNumberOfYear
                 Order by   DimDate.CalendarYear,  DimDate.MonthNumberOfYear";
            dataAdapter.SelectCommand = cmd;
            DataSet dataSet = new DataSet();

            connect.Open();
            dataAdapter.Fill(dataSet);
            connect.Close();
            ReportViewer reportViewer = new ReportViewer()
            {
                SizeToReportContent = true,
                Width = System.Web.UI.WebControls.Unit.Percentage(100),
                Height = System.Web.UI.WebControls.Unit.Percentage(100),
            };
            reportViewer.ProcessingMode = ProcessingMode.Local;

            reportViewer.LocalReport.ReportPath = Request.MapPath(Request.ApplicationPath) + @"Reports\Report2.rdlc";
            reportViewer.LocalReport.DataSources.Add(new ReportDataSource("DataSet1", dataSet.Tables[0]));

            ViewBag.ReportViewer = reportViewer;

            return View();
        }

Note the report defined file is RDLC file not RDL file. You can just simply rename the file format. RDLC file and RDL file shared same XML Schema, and RDLC file may contains empty values.

Since the RDLC doesn't contain any data source information to increase the flexibility, you need to supply data source within your controller. In addition, you need to use same data set name as your SSRS report, for above code, DataSet1 is used as the SSRS report defined. Because the DataSet1 actually used sql script, so SQLConnection and SQLAdapter are applied here to fill the dataset.

To make the report view area variable for your browser, you need to add parameters when creating the ReportViewer class:

            ReportViewer reportViewer = new ReportViewer()
            {
                SizeToReportContent = true,
                Width = System.Web.UI.WebControls.Unit.Percentage(100),
                Height = System.Web.UI.WebControls.Unit.Percentage(100),
            };

The last is for the view. Add reference at first.

@using ReportViewerForMvc;

Using the building html helper the report in your page.

@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)

Resource:
https://reportviewerformvc.codeplex.com/wikipage?title=Getting%20Started
http://stackoverflow.com/questions/1079162/when-to-use-rdlc-over-rdl-reports

Tuesday, October 20, 2015

SQL Server SSRS Date Format List

Most SSRS Reports required date parameters and need to handling date format conversion. SSRS used VB style function inside their expression, which has Left, Mid, Right, Len, Trim, Ltrim, Rtrim, etc, and & to connect strings.

SSRS supports various and flexible date format which applying similar SQL style format string:

Format Code Description Example

Single Digit Date Format

d	Single Digit Date Format	9
dd	Double Digit Date Format	9
ddd or dddd	Full Day Name	Wednesday
M	Single Digit Month Format	2
MM	Double Digit Month Format	2
MMM	Three Character Month Name	Feb
MMMM	Full Month Name	February
yy	Double Digit Year Format	11
yyyy	Four Digit Year Format	2011
H	Single Digit “24 Hour” Hour Format	6
HH	Double Digit “24 Hour” Hour Format	6
m	Single Digit Minute Format	9
mm	Double Digit Minute Format	9
s	Single Digit Second Format	4
ss	Double Digit Second Format	4
tt	ante meridian (AM)/post meridian (PM) part of Time	PM
zzz	Time Zone Offset w.r.t. GMT	+05:30

Monday, October 19, 2015

How to Create Tabbed SSRS Report

You can use SQL Server Report Designer to create Tabs for your SSRS Report. The basic idea is to create one Rectangle at first, and put several TextBox inside the Rectangle. You can treat those TextBox as Tabs, and fill them with your favorite button image as background to let them looked better. The last thing for those TextBox is adding Action property for those TextBox and put your report name to link those tab to your report.

Note if your report goes to the next page, those Tabs would be disappear. To resolve this issue, simply fill the RepeatWith property for the Rectangle with available tablix for each report.

Another issue is when we output our report with pdf or excel format, we don't want to show those tabs, thus we need to hide them. To resolve this issue, add the following expression to the hidden property to each rectangle:

=Globals!RenderFormat.IsInteractive = FALSE

You can also set the Page Name property of each tablix to the name of the tab.

Source:
https://bistuffwithdigven.wordpress.com/2013/01/20/tabbed-ssrs-reports/

Friday, October 16, 2015

How to applying Bootstrap 3 Fluid theme to ASP.Net MVC 5 Project

After you installed a fully functional ASP.Net MVC 5 template, you can use it to create a new project, which has installed Bootstrap 3 already, as following screenshot showed.

The default bootstrap template used in the template is Jumbtron, Jumbtron is not a fluid layout template, which means it has fixed screen layout, thus can't adapt for different screen size with those devices such as iPad, or smart phone.

So the next thing is to change the css template to Justified-Nav, which is a fluid layout template from bootstrap website, will re-align itself based on the different screen size. You can get the css file from here. For doing this, you can right click on the Content folder from Solution Explorer and choose Add New Item, and choose Style Sheet file format, and paste the following content from bootstrap website into the new file, and then rename it as justified-nav.css.

body {
  padding-top: 20px;
}

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Customize the nav-justified links to be fill the entire space of the .navbar */

.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5; /* Old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:         linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  background-repeat: repeat-x; /* Repeat the gradient */
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #ddd;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

@media (min-width: 768px) {
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
    border-radius: 0 5px 5px 0;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}

Then you need to add the new css file into BundleConfig, find the following script:

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/justified-nav.css",));

Add replace them with

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/justified-nav.css"));

Now open _Layout.cshtml from Views folder:

Replace the section of div tag with class="navbar navbar-inverse navbar-fixed-top":

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

with following:

    <div class="container">
        <div class="masthead">
            <h3 class="text-muted">@Html.ActionLink("Application name", "Index", "Home")</h3>
        </div>
        <ul class="nav nav-justified">
                <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "active" })</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
         @Html.Partial("_LoginPartial")
    </div>

Open Index.cshtml from Views\Home, replace following tag class="col-md-4" to following tag class="col-lg-4".

Now you can compile your project and your final output would be like this:

Source:
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5

Thursday, October 15, 2015

Applying MVC 5 on Visual Studio 2012 Express

Visual Studio 2013 has been shipped with MVC 5 along with .Net 4.5.1 2 years ago. It even included a free communication version with full functionality. Since then, it has evolved with 5 updated versions until July 2015.

Visual Studio 2013 combines Nuget 2.7, ASP.Net MVC 5, ASP.Net Web API 2, Entity Framework 6, ASP.Net Razor, ASP.Net Scaffolding, a new code generating framework for ASP.Net web applications, and Bootstrap 3, a layout and theme framework from twitter to provide responsive design through CSS 3, etc. Such new features are exciting for all ASP.Net web developers. However, for Microsoft Database or BI developers, if they are stick to SQL Server 2012, they would better to keep their old Visual Studio 2012 as the support for BI development such as SSAS/SSRS/SSIS 2012 on Visual Studio 2013 are not perfect.

Fortunately, Microsoft announced MVC 5 for visual studio 2012. Also, Visual Studio 2012 Update 4 and ASP.Net and Web Tools 2013.1 for Visual Studio 2012 would be also required, especially for Visual Studio 2012 Express for Web.

After you installed the web tools 2013.1 for Visual Studio 2012, your Visual Studio 2012 for Web would show following new ASP.Net web templates:

Note you still can't find a fully functional ASP.Net MVC 5 Web Application template, except an empty one.

You can create a new project using ASP.Net MVC 5 Empty Project, and then right click on the project, click Add.. > New Scaffolded Item..., select MVC on the left, then MVC 5 Dependencies and choose Full dependencies from the prompt.

This will add a default layout Views\Shared\_Layout.cshtml, Content folder, Scripts folder with bootsrap, jquery, modernizer, etc, and other things the Web Application template will create.

You could get the error "CS0103: The name 'Styles' doesnot exist in the current context", just add <namespace="System.Web.Optimization"/> under <namespaces> in Views/web.config.

To add a fully functional ASP.Net MVC 5 Web Application template, download the MVC 5 template from here. Copy the file into the following folder of your PC:
%USERPROFILE%\Documents\Visual Studio 2012\Templates\ProjectTemplates\Visual C#\Web
and then change DefaultConnection in Web.config with following format:

<connectionStrings>
    <add name="MyDBConnection" connectionString="Data Source=localhost;Initial Catalog=MyDB;
        Persist Security Info=True;User ID=MyName;Password=MyPassword"
    providerName="System.Data.SqlClient"/>
</connectionStrings>

Now you can restart you Visual Studio 2012 express for Web and enjoy the new MVC 5 template.

If during the debug, you get the error "CS0234: The type or namespace name 'Ajax' does not exist in the namespace 'System.Web.Mvc' (are you missing an assembly reference?)", simply open the reference directory of your project under solution explorer, right click on the package name, choose the property, and change the Copy Local to true.

Note after you created your MVC 5 application, if you open your web.config file, you could find following issue:

It was said "The entityframework element has invalid child element providers.". This could give warning message for your project. To resolve this warning, you need to copy following 2 files:
to folder: "C:\Program Files\Microsoft Visual Studio 11.0\Xml\Schemas":

1. EntityFrameworkCatalog.xml

<?xml version="1.0" encoding="utf-8"?>
<SchemaCatalog xmlns="http://schemas.microsoft.com/xsd/catalog">
    <Association extension="config" schema="%InstallRoot%/xml/schemas/EntityFrameworkConfig_6_1_4.xsd" />
</SchemaCatalog>

2. EntityFrameworkConfig_6_1_4.xsd

<?xml version="1.0" encoding="utf-8"?>

<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="entityFramework">
    <xs:complexType>
      <xs:all>
        <xs:element name="defaultConnectionFactory" type="ElementWithTypeAndParameters_Type" minOccurs="0" maxOccurs="1" />
        <xs:element name="providers" type="ProviderList_Type" minOccurs="0" maxOccurs="1" />
        <xs:element name="contexts" type="ContextList_Type" minOccurs="0" maxOccurs="1" />
        <xs:element name="interceptors" type="InterceptorList_Type" minOccurs="0" maxOccurs="1" />
      </xs:all>
      <xs:attribute name="codeConfigurationType" type="NonEmptyString_Type" use="optional" />
      <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
    </xs:complexType>
  </xs:element>

  <xs:complexType name="ProviderList_Type">
    <xs:sequence>
      <xs:element name="provider" type="Provider_Type" minOccurs="0" maxOccurs="unbounded" />
    </xs:sequence>
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="Provider_Type">
    <xs:attribute name="invariantName" type="NonEmptyString_Type" use="required" />
    <xs:attribute name="type" type="NonEmptyString_Type" use="required" />
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="ContextList_Type">
    <xs:sequence>
      <xs:element name="context" type="Context_Type" minOccurs="0" maxOccurs="unbounded" />
    </xs:sequence>
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="Context_Type">
    <xs:choice>
      <xs:element name="databaseInitializer" type="ElementWithTypeAndParameters_Type" minOccurs="0" maxOccurs="1" />
    </xs:choice>
    <xs:attribute name="type" type="NonEmptyString_Type" use="required" />
    <xs:attribute name="disableDatabaseInitialization" type="SmallBoolean_Type" use="optional" />
    <xs:attribute name="commandTimeout" type="xs:int" use="optional" />
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="InterceptorList_Type">
    <xs:sequence>
      <xs:element name="interceptor" type="ElementWithTypeAndParameters_Type" minOccurs="0" maxOccurs="unbounded" />
    </xs:sequence>
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="ElementWithTypeAndParameters_Type">
    <xs:choice>
      <xs:element name="parameters" type="ParameterList_Type" minOccurs="0" maxOccurs="1" />
    </xs:choice>
    <xs:attribute name="type" type="NonEmptyString_Type" use="required" />
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="ParameterList_Type">
    <xs:sequence>
      <xs:element name="parameter" type="Parameter_Type" minOccurs="0" maxOccurs="unbounded" />
    </xs:sequence>
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:complexType name="Parameter_Type">
    <xs:attribute name="value" type="NonEmptyString_Type" use="required" />
    <xs:attribute name="type" type="NonEmptyString_Type" use="optional" />
    <xs:anyAttribute namespace="http://schemas.microsoft.com/XML-Document-Transform" processContents="strict"/>
  </xs:complexType>

  <xs:simpleType name="SmallBoolean_Type">
    <xs:restriction base="xs:NMTOKEN">
      <xs:enumeration value="false" />
      <xs:enumeration value="true" />
    </xs:restriction>
  </xs:simpleType>

  <xs:simpleType name="NonEmptyString_Type">
    <xs:restriction base="xs:string">
      <xs:minLength value="1" />
    </xs:restriction>
  </xs:simpleType>

</xs:schema>

These 2 files can be found at this link:

Source:
http://www.asp.net/visual-studio/overview/2013/release-notes
http://stackoverflow.com/questions/19102831/how-to-install-asp-net-mvc-5-in-visual-studio-2012
http://stackoverflow.com/questions/18288215/how-can-i-add-the-mvc-5-project-template-to-vs-2012
http://stackoverflow.com/questions/20607648/no-asp-net-mvc-5-web-application-template-on-vs-2012
http://stackoverflow.com/questions/20068833/the-element-entityframework-has-invalid-child-element-entity-framework