November 27, 2012

Should I use Cookies or Web Storage?


Cookies and Web Storage serve similar purpose in some and different purpose in many ways. Both cookies and web storage stores data on the client but cookies are sent back to the server on every request. So, if the data is needed to be used only by the client - then, its better to use web storage. However, if the data needs to be used by the server then cookies is the way. For example, for sessions, cookies is the definitely needed. Cookies, like web storage, can be accessed fom client side as well using javascript.

One more thing to note is that not all browsers support web storage yet - for example, Internet explorer 7-, Firefox 3.5- and Chrome 4- does no not support web storage. So, web storage may not be a solution on all situations.

Also, web storage can have maximum storage of 5MB whereas cookies have a maximum storage of 4KB.

Cookies can also have an expiration date - that is, it expires after some time period. On the other hand, web storage is of 2 types - local and session. Session storage is really like local storage except that it expires when the session ends.

November 17, 2012

Examining the Views

As mentioned in the previous article on accessing Model from Controller, Views for Index, Create, Edit, Delete and Details are automatically created. In this post, I will examine of Index View. The generated code for Index View is below.

November 16, 2012

As you might already know from my previous post on accessing Model from Controller, Visual Studio can automatically generate Controller class simply by right-clicking and adding Controller on the Controller's directory in Solution Explorer. The generated Controller code contains the following snippet.

November 15, 2012

Access Model from Controller

In one of my previous posts, I showed on how to add a Model to a Mvc project. Once we have a Model, it's important to access this Model from a Controller. In this post, I will show how to add a Controller that can access data from a Model and automatically create Views for CRUD operations. Asp.Net Mvc allows using Code First development. Using Code First, the database is automatically created based on the Model class and connection string within the web.config file.
From previous post, I created a CartoonCharacter class as the Model and added the following connection string.

November 12, 2012

Configure IIS 6.0 for Wildcard Mapping

Sometimes applications need to rewrite urls for producing user friendly urls and there are still lot of companies that use IIS 6.0. There are frameworks like Dynamic Data and Asp.Net Mvc that would rewrite urls and will not run in IIS 6.0 unless configured. This can be configured within IIS Manager. Once an application is added, it would look like below.

November 10, 2012

Adding a Model

Model classes holds the business logic and can perform data access and updates. Asp.Net Mvc can use Entity Framework for accessing data which supports Code First. In Code First, classes can be written which can then be used to create database on the fly.

To add a Model, right click on Models folder in Solution Explorer/Navigator, choose Add>Class. I have created the class CartoonCharacter for this.

1

Model - CartoonCharacter class
  1. public class CartoonCharacter
  2. {
  3.     public int Uid { get; set; }
  4.     public string FirstName { get; set; }
  5.     public string LastName { get; set; }
  6.     public int Year { get; set; }
  7.     public double Rating { get; set; }
  8. }

This ChartoonCharacter class will be used to represent ChartoonCharacters in a database. Each of the properties would be individual columns within a row. To use this class to perform data access/updates, a DataContext class needs to be added. This class is derived from Entity Framework and can handle CRUD operations. So, the final class looks like below.

Model
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Data.Entity;
  6.  
  7. namespace MvcDemo.Models
  8. {
  9.     public class CartoonCharacter
  10.     {
  11.         public int Uid { get; set; }
  12.         public string FirstName { get; set; }
  13.         public string LastName { get; set; }
  14.         public int Year { get; set; }
  15.         public double Rating { get; set; }
  16.     }
  17.  
  18.     public class CartoonCharacterDBContext : DbContext
  19.     {
  20.         public DbSet<CartoonCharacter> CartoonCharacters { get; set; }
  21.     }
  22. }

The CartoonCharacterDBContext class can now handle data operations. But, how does it know which database to connect to? The connection string needs to be setup within the web.config file so the DataContext class can connect to the database.

Connection String
  1. <connectionStrings>
  2.   <add name="DefaultConnection" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=aspnet-MvcDemo-20121031221221;Integrated Security=SSPI" providerName="System.Data.SqlClient" />
  3.       <add name="CartoonCharacterDBContext" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=CartoonCharacter;Integrated Security=SSPI" providerName="System.Data.SqlClient" />
  4. </connectionStrings>

November 9, 2012

Pass Data from Controller to View

As mentioned in previous post on how Mvc work, Controller class handles browser request, gets data from database or other data source and selects the View to the user. Controller can therefore, retrieve data and pass data to the View. The View should not directly interact with the data source or handle any business logic but generate the HTML output based on the data provided from the Controller.

To show how we can pass data from Controller to View, I have added a new method Show() to the DemoController.cs file.

Show Method
  1. public ActionResult Show()
  2. {
  3.     List<string> list = new List<string>();
  4.     list.Add("Australia");
  5.     list.Add("Japan");
  6.     list.Add("USA");
  7.     list.Add("India");
  8.     ViewBag.List = list;
  9.  
  10.     return View();
  11. }

The method creates a new List collection that holds string. This collection is then added to ViewBag.

Now, to create the View, right click on method name and choose Add View. Keep default settings and the file will be created.

1

2

In the file created, I have added a foreach loop to display the strings.

foeeach loop
  1. <ul>
  2.     @foreach (string a in ViewBag.List) {
  3.         <li>@a</li>    
  4.     }
  5. </ul>

When the page is run, the list of string displayed in the browser in the same order.

So, this example was quite simple that only strings was passed from Controller to View. I will now add a new method that will create some objects of type CartoonCharacter and pass back to View. So, first, here is the code for CartoonCharacter class. It is a simple class in that it only has first name and last name.

CartoonCharacter class
  1. public class CartoonCharacter
  2. {
  3.     public string FirstName { get; set; }
  4.     public string LastName { get; set; }
  5. }

Then, I will add the new method like below.

ShowCharacter method
  1. public ActionResult ShowCharacter()
  2. {
  3.     List<CartoonCharacter> list = new List<CartoonCharacter>();
  4.     list.Add(new CartoonCharacter { FirstName = "Yogi", LastName = "Bear" });
  5.     list.Add(new CartoonCharacter { FirstName = "Bugs", LastName = "Bunny" });
  6.     list.Add(new CartoonCharacter { FirstName = "Daffy", LastName = "Duck" });
  7.     list.Add(new CartoonCharacter { FirstName = "Scooby", LastName = "Doo" });
  8.     ViewBag.List = list;
  9.  
  10.     return View();
  11. }

After the method added, right click on the method to add a View and keep default settings. Then, in the View, I have written another foreach loop that loops through the CartoonCharacter List and displays its first and last name.

foreach loop
  1. <ul>
  2. @foreach(MvcDemo.Controllers.CartoonCharacter cc in ViewBag.List){
  3.     <li>@cc.FirstName @cc.LastName</li>
  4. }
  5. </ul>

November 8, 2012

Default Layout in Asp.Net Mvc

In the previous post, I showed how to add a View to an Mvc project. The resultant page looked like below.

Mvc - Layout file
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>@ViewBag.Title - My ASP.NET MVC Application</title>
  6.         <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  7.         <meta name="viewport" content="width=device-width" />
  8.         @Styles.Render("~/Content/css")
  9.         @Scripts.Render("~/bundles/modernizr")
  10.     </head>
  11.     <body>
  12.         <header>
  13.             <div class="content-wrapper">
  14.                 <div class="float-left">
  15.                     <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
  16.                 </div>
  17.                 <div class="float-right">
  18.                     <section id="login">
  19.                         @Html.Partial("_LoginPartial")
  20.                     </section>
  21.                     <nav>
  22.                         <ul id="menu">
  23.                             <li>@Html.ActionLink("Home", "Index", "Home")</li>
  24.                             <li>@Html.ActionLink("About", "About", "Home")</li>
  25.                             <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  26.                         </ul>
  27.                     </nav>
  28.                 </div>
  29.             </div>
  30.         </header>
  31.         <div id="body">
  32.             @RenderSection("featured", required: false)
  33.             <section class="content-wrapper main-content clear-fix">
  34.                 @RenderBody()
  35.             </section>
  36.         </div>
  37.         <footer>
  38.             <div class="content-wrapper">
  39.                 <div class="float-left">
  40.                     <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
  41.                 </div>
  42.             </div>
  43.         </footer>
  44.  
  45.         @Scripts.Render("~/bundles/jquery")
  46.         @RenderSection("scripts", required: false)
  47.     </body>
  48. </html>

As can be seen, the content section is the section that was rendered by the Welcome View created. The question is how did the page got the header logo and links section. The page go this section from _Layout.cshtml file in Views/Shared folder. This Layout file is being rendered on all pages generated by this Mvc application. This is more like the master page in an aspx application where the aspx page gets content from master pages when set via the master property. Here is the source code for the default Layout file.

The title is set as

So, the page gets the title from ViewBag and appends some text " - My ASP.NET MVC"...

  1. <title>@ViewBag.Title - My ASP.NET MVC Application</title>

Couple of lines below, there are some Styles.Render and Scripts.Render tags.

  1. @Styles.Render("~/Content/css")
  2. @Scripts.Render("~/bundles/modernizr")

These tags loads the default styles and scripts as specified in App_Start/BundleConfig.cs file. This file looks bundling all necessary scripts and stylesheets into one. The BundleConfig file looks like below.

BundleConfig
  1. using System.Web;
  2. using System.Web.Optimization;
  3.  
  4. namespace MvcDemo
  5. {
  6.     public class BundleConfig
  7.     {
  8.         // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
  9.         public static void RegisterBundles(BundleCollection bundles)
  10.         {
  11.             bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  12.                         "~/Scripts/jquery-{version}.js"));
  13.  
  14.             bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
  15.                         "~/Scripts/jquery-ui-{version}.js"));
  16.  
  17.             bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  18.                         "~/Scripts/jquery.unobtrusive*",
  19.                         "~/Scripts/jquery.validate*"));
  20.  
  21.             // Use the development version of Modernizr to develop with and learn from. Then, when you're
  22.             // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
  23.             bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
  24.                         "~/Scripts/modernizr-*"));
  25.  
  26.             bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
  27.  
  28.             bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
  29.                         "~/Content/themes/base/jquery.ui.core.css",
  30.                         "~/Content/themes/base/jquery.ui.resizable.css",
  31.                         "~/Content/themes/base/jquery.ui.selectable.css",
  32.                         "~/Content/themes/base/jquery.ui.accordion.css",
  33.                         "~/Content/themes/base/jquery.ui.autocomplete.css",
  34.                         "~/Content/themes/base/jquery.ui.button.css",
  35.                         "~/Content/themes/base/jquery.ui.dialog.css",
  36.                         "~/Content/themes/base/jquery.ui.slider.css",
  37.                         "~/Content/themes/base/jquery.ui.tabs.css",
  38.                         "~/Content/themes/base/jquery.ui.datepicker.css",
  39.                         "~/Content/themes/base/jquery.ui.progressbar.css",
  40.                         "~/Content/themes/base/jquery.ui.theme.css"));
  41.         }
  42.     }
  43. }

The header menu is specified by @Html.ActionLink method. as follows.

Navigation menu
  1. <nav>
  2.     <ul id="menu">
  3.         <li>@Html.ActionLink("Home", "Index", "Home")</li>
  4.         <li>@Html.ActionLink("About", "About", "Home")</li>
  5.         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  6.     </ul>
  7. </nav>

The other important bit to note is the @RenderBody() method. This is the placeholder where the content from other Views will appear. For example, from previous post, the Welcome View would be rendered where @RenderBody() is specified.

Now, to modify the layout file, basic html knowledge sufficient to update the layout of the site. New styles or scripts can be written and called from the Layout file either directly or by using the BundleConfig file.

November 7, 2012

Add a View to Asp.Net Mvc

In the previous post, I showed how to add a Controller to an Mvc project. As you could see, html rendered in the page was done by Controller. In this post, I will show how to add a View to an Mvc project. The View is more like a template that can generate html output to the user. For this example, I have used Razor as the View engine.

The Demo Controller class created in the previous post looks like below.

Controller
  1. public class DemoController : Controller
  2. {
  3.     public string Index()
  4.     {
  5.         return "You are viewing Index method of DemoController";
  6.     }
  7.  
  8.     public string Home(string name, int age)
  9.     {
  10.         return "Hello " + name + ". You are " + age.ToString() + " years old";
  11.     }
  12. }

Now, I will add a new method – Welcome that will return the View.

View
  1. public ActionResult Welcome()
  2. {
  3.     return View();
  4. }

To create a View, right click on method name and Add View.

1

2

Note that, I have left the default settings and names. The default View has the following code.

Welcome View
  1. @{
  2.     ViewBag.Title = "Welcome";
  3. }
  4.  
  5. <h2>Welcome</h2>

I have added some message, so the code will look like below.

Welcome View
  1. @{
  2.     ViewBag.Title = "Welcome";
  3. }
  4.  
  5. <h2>Welcome</h2>
  6. <p>This is a demo welcome page</p>

When the page is run, it looks like below.

Welcome - My ASP.NET MVC Application 2012-11-06 17-24-18

November 6, 2012

Run Asp.Net 4 under IIS6.0

Lately, I have trying to load a few web applications to run under IIS 6 and sometimes it became quite challenging. Eventually, I got them working and here are the steps that I used to run the applications.

Make sure .NET framework 4 is installed. You can do so by checking "Add Remove Programs" from Control Panel.

Once .NET 4 is installed, open IIS and open the Web Sections section. Click "Allow" for Asp.Net 4 if it not already allowed.

2

After that, create a new app pool that will only contain asp.net 4 applications. The IIS will not serve pages correctly if asp.net 4 and asp.net 3.5 are hosted in same app pool. Default configuration for app pool can be used.

3

Once the app pool is created, create a virtual directory for the web application. Choose the app pool created in previous step in the App Pool in Virtual Directory section. Open Asp.Net tab, and select asp.net 4.0 for asp.net version.

4

That's it - you are done. You can run the website. I have noticed in some windows 2003 server that while choosing asp.net 4 as the version, the sites go down. If so, go to Services and restart "World Wide Web Publishing" service.

November 1, 2012

In Asp.Net Mvc, Controllers are classes that query or update model data, load a specific View template and handle user inputs. Controllers can be added in an Mvc project by right clicking the Controllers directory and choosing Add > Controller.

1

I have named the Controller - DemoController - note the naming convention.

2

Visual Studio generates the following code by default.

Default Controller Code
  1. namespace MvcDemo.Controllers
  2. {
  3.     public class DemoController : Controller
  4.     {
  5.         //
  6.         // GET: /Demo/
  7.  
  8.         public ActionResult Index()
  9.         {
  10.             return View();
  11.         }
  12.  
  13.     }
  14. }

I will update the Index() method to return some string.

Index Method
  1. public string Index()
  2. {
  3.     return "You are viewing Index method od DemoController";
  4. }

Note that, I have changed the return type from ActionResult to string. Then, run the page in debug mode and the url http://localhost:50376/demo produce the result shown below. As you can see, its the same string that was part of the Index method.

3

The important thing to note is the url ends with /demo which is also the Controller’s name. In Mvc, the url controls the Controller, Method and parameters passed to the application. It has the format /Controller/Method/{Parameters} . Index is the default method name and therefore not needed to be specified.

I will now add another method - Home – that will display the name and age based on parameters.

Home Method
  1. public string Home(string name, int age)
  2. {
  3.     return "Hello " + name + ". You are " + age.ToString() + " years old";
  4. }

It’s a simple method that return a string based on the parameters. When the page is run, the following is displayed.

4

Note that, MVC automatically binds the query strings to the relevant parameters in the method.

What is MVC?

In my previous post, I should how to create a MVC project using Visual Studio but what is MVC? MVC, acronym for Model-View-Controller, is a software design pattern that separates the presentation (View), data model (Model) and user input based actions (Controller). In other words, it separates user interface logic from business logic.

View - The View manages the user interface, layout, etc. It can request information from Model about its state.

Controller - The Controller gets input from the View to update data and pass the message back to Model or to change the View.

Model - The Model controls the logic and behaviour of data. It pass data back to Controller when Controller asks for it and / or updates data when it receives message from Controller.

It's important to note that Model does not rely on Controller or View meaning that the Model can be created and tested separately from the user interface.

To relate this back to the MVC project created previously, there were separate folders for Model, Views and Controllers that manages how user with teh View, how View interacts with Model and responds to Controller and Controller talks to Model and View.

This should become more clear as I post more on this topic.

Reference: Shahed Kazi at AspNetify.com