Learn MVC Project in 7 Days – Day 7

• Download Day_7.zip

Introduction

Its happy day. Finally we are at the last stage of “Learn MVC Project in 7 days” series. I believe you have enjoyed all the previous days and learned something from it.

Please don’t forget to drop your comments/suggests/feedbacks at the end of the article.

Agenda

• Introduction
• What’s for the last day?
• Lab 32 – Make project organized
  • Talk on Lab 32
• Lab 33 – Creating single page application – Part 1 - Setup
  • What are Areas?
  • Talk on Lab 33
• Lab 34 – Creating single page application – Part 2–Display Employees
• Lab 35 – Creating single page application – Part 3–Create Employee
  • What’s next?
  • Let’s plan
    • Journey to find a solution
      • Understand the problem
      • Solution – a common data type
      • Problem – what about complex data?
      • Solution – A common data format standard
      • Problem – XML format issues
      • Solution - JSON
  • Back to our lab
  • Talk on Lab 35
• Lab 36 – Creating single page application – Part 4 – Bulk upload
• Conclusion
• Start with MVC 5

Complete Series

• Day 1
• Day 2
• Day 3
• Day 4
• Day 5
• Day 6
• Day 7
• Bonus Day 1
• Bonus Day 2

We are pleased to announce that this article is now available as hard copy book you can get the same from www.amazon.com and www.flipkart.com

Lab 32 – Make project organized

This is not actually a lab related to any new functionality. This lab is just to make project more structured and systematic.

Step 1 - Create solution folders

Right click the solution select Add>>New Solution Folder.

Name the folder as “View And Controller”.

Now repeat the step and create three more similar folders called “Model”, “ViewModel” and “Data Access Layer”

Step 2 – Create Data Access Layer Project

Right click the Data Access Layer folder and create a new class library project called “DataAccessLayer”.

Step 3 – Create Business Layer and Business Entities Project

Create two new class library projects inside Model folder and call it “BusinessLayer” and “BusinessEntities” respectively.

Step 4 – Create ViewModel project

Create a new project class library project inside ViewModel folder and call it ViewModel.

Step 5 – Add references

First right click each project one by one. Select Add>>Reference and select references as below.

1. For DataAccessLayer select BusinessEntities

2. For BusinessLayer select DataAccessLayer and BusinessEntities

3. For MVC WebApplication select BusinessLayer,BusinessEntities, ViewModel

4. For BusinessEntities System.ComponentModel.DataAnnotations

Step 6 – Set project

1. Copy SalesERPDAL.cs from DataAccessLayer folder in the MVC project to newly created DataAccessLayer class library project.
   

2. Remove DataAccessLayer folder from MVC (WebApplication1) project.

3. Copy Employee.cs, UserDetails.cs and UserStatus.cs from Model folder inthe MVC project to newly created BusinessEntities class library project.

4. Copy EmployeeBusinessLayer.cs from Model folder in theMVC project to newly created BusinessLayer class library project.

5. Remove Model folderfrom MVC project.

6. Copy all the classes from ViewModels folder in the MVC project to newly created ViewModel class library project.

7. Remove ViewModels folder from MVC project

8. Move MVC project (WebApplication1) to “View And Controller” solution folder.

Step 7 – Build the project

Select Build>>Build Solution from menu bar.

You will get following error messages.

Step 8 – Solve errors

1. Add System.Web reference to ViewModel project

2. Use Nuget manager and Install Entity Framework in the DataAccessLayer and BusinessLayer project. (If you are getting confused on how to use Nuget Manager then I recommend you to look into Day 3)

   Note: Entity Framework reference is required inside Business Layer because Business Layer is directly connected to DataAccessLayer. As a proper architecture Business layer should not be connected to DataAccessLayer directly. We can accomplish this with the help of Repository pattern. Repository pattern will be completely out of the scope this series.

3. Remove EntityFramework from MVC project.

• Right click the MVC project and select “Manage Nuget packages” option.

• Select “Installed Packages” in the left section of “Manage Nuget Packages” dialogue box.

• Right side section will display all the packages installed prior. Select EntityFramework and click uninstall.

Step 9 – Build the solution

You will get following error.

Step 10 – Solve the error

Now we neither have SalesERPDAL reference nor have Entity Framework reference inside MVC project. Adding those references in not a good practice. As a best practice Controller should not be connected to Data Access Layer directly.

1. Create a new class called DatabaseSettings with a static method called SetDatabase inside DataAccessLayer project as follows.

using System.Data.Entity;
using WebApplication1.DataAccessLayer;
namespace DataAccessLayer
{
    public class DatabaseSettings
    {
        public static void SetDatabase()
        {
            Database.SetInitializer(new DropCreateDatabaseIfModelChanges<SalesERPDAL>());<saleserpdal>
        }
    }	
}
</saleserpdal>

2. Create a new class called BusinessSettings with a static method called SetBusiness inside BusinessLayer project as follows.

using DataAccessLayer;

namespace BusinessLayer
{
    public class BusinessSettings
    {
        public static void SetBusiness()
        {
            DatabaseSettings.SetDatabase();
        }
    }
}

3. Remove both the erroneous using statements from global.asax and also remove the Database.SetInitializer statement. Invoke BusinessSettings.SetBusiness function as follows.

using BusinessLayer;
.
.
.
BundleConfig.RegisterBundles(BundleTable.Bundles);
BusinessSettings.SetBusiness();

Build the application. Build will succeed.

Make sure to execute the application once.☻

Talk on Lab 32

What are solution folders?

Solution folders are just logical folders. They won’t actually get created in physical hard drive. There only purpose will be making solution more systematic.

Lab 33 – Creating single page application – Part 1 - Setup

Now we will not make any changes to our existing controllers and views. We will create fresh controllers and views for this lab. Reason for taking such step are,

1. Make existing options intact, so that later in the stage you can compare earlier version and single page version and learn it better.

2. Implement and understand one more concept in Asp.Net MVC called Areas.

As I said for this lab we will create new controllers, views and ViewModels all together from the scratch.

Only following things will be reused

• Existing Business Layer

• Existing Data Access Layer

• Existing Business entities

• Authentication and Exception filters

• FooterViewModel

• Footer.cshtml

Step 1 – Create a new Area

Right click the project and Select Add>>Area. A dialogue box will popup. Put it as SPA and select ok.

It will create a new folder structure inside our project as follows.

Obviously Model folder related to the area is not required. Delete it.

What are Areas?

Areas are simply a way to implement modules in Asp.Net MVC project.

Every project is made up of more than one module. Example - Account Module, Customer Relationship module, Payment gateway module etc.

In traditional application development style we usually use “Folders” to achieve this. We create more than one folder inside single project. Each folder represents one module. We will keep all the respective files of respective module in respective folders.

Now custom folders will be a big issue when it comes to Asp.Net MVC.

Let’s say in Asp.Net MVC we will use simple folders for implementing module.

• Now DataAccessLayer, BusinessLayer, BusinessEntities and ViewModels won’t create any issue. They are simple classes so can be kept anywhere.

• Controllers - We can’t keep it anywhere. It must be kept inside Controller folder. But it is not going to be big issue because from MVC 4 restriction over controller location was removed. Now we can keep it wherever we want.

• Views -unfortunately for views it’s not possible. All the views must be placed inside “~/Views/ControllerName” or “~/Views/Shared” folder.

This is where Areas comes to picture.

Step 2 – Create required ViewModels

Create a new folder called SPA in ViewModel class library project and create a ViewModel called MainViewModel as follows.

using WebApplication1.ViewModels;
namespace WebApplication1.ViewModels.SPA
{
    public class MainViewModel
    {
        public string UserName { get; set; }
        public FooterViewModel FooterData { get; set; }//New Property
    }
}

Step 3–Create Index action method

Put following using statement in MainController.

using WebApplication1.ViewModels.SPA;
using OldViewModel=WebApplication1.ViewModels;

Now create a new action method called Index inside MainController as follows.

public ActionResult Index()
{
    MainViewModel v = new MainViewModel();
    v.UserName = User.Identity.Name;
    v.FooterData = new OldViewModel.FooterViewModel();
    v.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value
    v.FooterData.Year = DateTime.Now.Year.ToString();
    return View("Index", v);
}

As you can see an alias called OldViewModelis added for WebApplication1.ViewModels namespace. Now instead of writing WebApplication1.ViewModels.ClassName we can simply write OldViewModel.ClassName.

Not specifying alias name will leads to ambiguity error. Both namesapces WebApplication1.ViewModels.SPA and WebApplication1.ViewModels have some similar classes.

Step 4 – Create Index View

Create a view associated with above index method as follows.

@using WebApplication1.ViewModels.SPA
@model MainViewModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Employee Single Page Application</title>
</head>
<body>
    <div style="text-align:right">
        Hello, @Model.UserName
        <a href="/Authentication/Logout">Logout</a>
    </div>
    <hr />
    <div id="DivOption">
       
    </div>
    @Html.Partial("Footer", Model.FooterData)
</body>
</html>

Step 5 – Execute and Test the application

Press F5 and execute the application. Complete the Login process and navigate to index action in Main Controller.

Talk on Lab 33

Why SPA keyword is required before controller name?

When we add an area to an ASP.NET MVC application, Visual Studio creates a file named [AreaName]AreaRegistration.cs containing a class that derives from AreaRegistration. This class defines the AreaName property and the RegisterArea method, which registers the route information for the new area.

In our case you can find that file with nameSpaArealRegistration.cs and will be located inside “~/Areas/Spa” folder. RegisterArea method of SpaArealRegistration class contain following code.

context.MapRoute(
                "SPA_default",
                "SPA/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional }
            );

This is why, when it comes to controllers in the area we put SPA keyword before controller name

How come RegisterArea in SPAAreaRegistration class get invoked?

Open global.asax file. Very first line in Application_Start will be something like below.

AreaRegistration.RegisterAllAreas();

The RegisterAllAreas method finds all types in the application domain that derive from AreaRegistration and calls each of their RegisterArea methods.

Can we invoke MainController actions without using SPA?

Let’s make this question easy.

Question is will this URL works? “localhost:8870/Main/Index”

Answer is – Yes.

AreaRegistration class creates new route but it won’t remove other routes. Route defined in RouteConfig class still work correctly. As I said before there is no restriction for controller location. Hence it will work but output won’t be displayed properly because it won’t be able to find the view. I suggest you to execute your application once and try it.

Lab 34 – Creating single page application – Part 2–Display Employees

Step 1 – Create ViewModel for displaying existing employees.

Create new ViewModel classes called EmployeeViewModel and EmployeeListViewModel in SPA folder of ViewModel class library as follows.

namespace WebApplication1.ViewModels.SPA
{
    public class EmployeeViewModel
    {
        public string EmployeeName { get; set; }
        public string Salary { get; set; }
        public string SalaryColor { get; set; }
    }
}

namespace WebApplication1.ViewModels.SPA
{
    public class EmployeeListViewModel
    {
        public List<employeeviewmodel> Employees { get; set; }
    }
}
</employeeviewmodel>

Note: Both the ViewModels are exact replica of ViewModel created for Non-Spa application. Only difference is this time BaseViewModel is not required.

Step 2 – Create EmployeeList Index

Create new action method called EmployeeList inside MainController as follows.

public ActionResult EmployeeList()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
    EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
    List<employee> employees = empBal.GetEmployees();

    List<employeeviewmodel> empViewModels = new List<employeeviewmodel>();

    foreach (Employee emp in employees)
    {
        EmployeeViewModel empViewModel = new EmployeeViewModel();
        empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;
        empViewModel.Salary = emp.Salary.Value.ToString("C");
        if (emp.Salary > 15000)
        {
            empViewModel.SalaryColor = "yellow";
        }
        else
        {
            empViewModel.SalaryColor = "green";
        }
        empViewModels.Add(empViewModel);
    }
    employeeListViewModel.Employees = empViewModels;
    return View("EmployeeList", employeeListViewModel);
}
</employeeviewmodel></employeeviewmodel></employee>

Note: HeaderFooterFilter is not required.

Step 3 – Create AddNewLink PartialView

Now we cannot use earlier AddNewLink partial view because anchor tags we had over there will leads to full refresh. Our target is to create a “Single Page Application” hence there shouldn’t be any full refresh.

Create a new partial view called AddNewLink.cshtml in the “~/Areas/Spa/Views/Main” folder.

<a href="#" onclick="OpenAddNew();">Add New</a>
&nbsp;
&nbsp;
<a href="#" onclick="OpenBulkUpload();">BulkUpload</a>

Step 4 – Create AddNewLink action method

Create a new action method called GetAddNewLink inside MainController as follows.

public ActionResult GetAddNewLink()
{
if (Convert.ToBoolean(Session["IsAdmin"]))
{
return PartialView("AddNewLink");
}
else
{
return new EmptyResult();
}
}

Step 5 - Create EmployeeList View

Create a new partial view called EmployeeList in “~/Areas/Spa/Views/Main” folder.

@using WebApplication1.ViewModels.SPA
@model EmployeeListViewModel
<div>
    @{
        Html.RenderAction("GetAddNewLink");
    }

    <table border="1" id="EmployeeTable">
        <tr>
            <th>Employee Name</th>
            <th>Salary</th>
        </tr>
        @foreach (EmployeeViewModel item in Model.Employees)
        {
            <tr>

                <td>@item.EmployeeName</td>
                <td style="background-color:@item.SalaryColor">@item.Salary</td>
            </tr>
        }
    </table>
</div>

Step 6 – Set EmployeeList as initial screen

For this open Index.cshtml located in “~/Areas/Spa/Views/Main” folder and include EmployeeList action result inside DivOptions div as follows.

...  
</div>
<hr />
<div id="DivOption">
   @Html.Action("EmployeeList","Main")
</div>
@Html.Partial("Footer"...

Step 7 - Execute and Test

Press F5 and execute the application.

Lab 35 – Creating single page application – Part 3–Create Employee

Step 1–Create AddNew ViewModels

Create a new ViewModel called CreateEmployeeViewModel in SPA folder of ViewModel class library project as follows.

namespace WebApplication1.ViewModels.SPA
{
    public class CreateEmployeeViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Salary { get; set; }
    }
}

Step 2 – Create AddNew action method

Put following using statement in MainController

using WebApplication1.Filters;

Now create AddNew action method inside MainController as follows.

[AdminFilter]
public ActionResult AddNew()
{
    CreateEmployeeViewModel v = new CreateEmployeeViewModel();
    return PartialView("CreateEmployee", v);
}

Step 3 – Create CreateEmployee Partial View

Create a new partial view called CreateEmployee in the “~/Areas/Spa/Views/Main” folder as follows.

@using WebApplication1.ViewModels.SPA
@model CreateEmployeeViewModel
<div>
    <table>
        <tr>
            <td>
                First Name:
            </td>
            <td>
                <input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("FirstName")
            </td>
        </tr>
        <tr>
            <td>
                Last Name:
            </td>
            <td>
                <input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("LastName")
            </td>
        </tr>
        <tr>
            <td>
                Salary:
            </td>
            <td>
                <input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("Salary")
            </td>
        </tr>
        <tr>
            <td colspan="2">

                <input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
                <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()"  />
                <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
            </td>
        </tr>
    </table>
</div>

Step 4– Include jQuery UI

Right click Project and select “Manage Nuget Manager”.

Search for “jQuery UI”.

Install jQuery UI.

It will add couple of JavaScript (.js) and Stylesheet (.css) files to the project.

Step 5- Include jQuery UI

Open “~/Areas/Spa/Views/Main/Index.cshtml” and Include jQuery.js,jQueryUI.js and all.cssas follows. All these files are added as a part of jQuery UI package by Nuget manager.

<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.0.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
<title>Employee Single Page Application</title>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
...

Step 6 – Implement OpenAddNew function.

Create a new JavaScript function called OpenAddNew in “~/Areas/Spa/Views/Main/Index.cshtml” as follows.

<script>
    function OpenAddNew() {
        $.get("/SPA/Main/AddNew").then
            (
                function (r) {
                    $("<div id='DivCreateEmployee'></div>").html(r).
                        dialog({
                            width: 'auto', height: 'auto', modal: true, title: "Create New Employee",
                            close: function () {
                                $('#DivCreateEmployee').remove();
                            }
                        });
                }
            );
    }
</script>

Step 7– Execute and Test

Press F5 and execute the application.

Complete the login process and navigate to Index action in MainController. Finally click on Add New hyperlink.

Step 8 –Create ResetForm function

Open CreateEmployee.cshtml view. Create ResetForm function in the top as following.

@model CreateEmployeeViewModel
<script>
    function ResetForm() {
        document.getElementById('TxtFName').value = "";
        document.getElementById('TxtLName').value = "";
        document.getElementById('TxtSalary').value = "";
    }
</script>
<div>
    <table>
......
......
<input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
                <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()" />
                <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
            </td>
        </tr>
......
……