Guy Burstein : ASP.Net MVC

Getting Started with jQuery in Visual Studio 2008

Guy Burstein — Fri, 05 Jun 2009 19:16:47 GMT

Getting Started with jQuery in Visual Studio 2008

In this post I’ll talk about adding jQuery IntellSense in Visual Studio 2008, and how to add jQuery to a simple Web Application inside Visual Studio 2008.

jQuery IntelliSense in Visual Studio 2008 - KB946581

In order to use jQuery in Visual Studio 2008 with IntelliSence a hotfix for Visual Studio 2008 must be installed:

Download the hotfix from Connect
Run the executable and extract its contents to a folder in your hard drive.
Make sure all instances of Visual Studio 2008 are closed, and run VS90-KB946581.exe from the above folder.

Download the Latest jQuery Library + Documentation

To use jQuery in Visual Studio 2008, and enjoy its IntelliSense, you should download 2 javascript files. One contains the actual jQuery library, and the second contains the library with documentation for Visual Studio 2008 to display its IntelliSense.

Go to jQuery Official Download Page
Scroll down and find the Current Release section.
Download the Uncompressed version (jquery-1.2.6.js) and the documentation for Visual Studio (jquery-1.2.6-vsdoc.js).

Using jQuery in a Visual Studio 2008 Web Application

In a new Web Application or inside an existing one, add the jQuery scripts into a certain folder.

In a web page (or a master page), add a reference to the jQuery library:

<head runat="server">
  <title>jQuery Sample</title>
 
  <script src="scripts/jquery-1.2.6.js"         
          type="text/javascript" ></script>
 
</head>

Then, in any javascript function you can start using jQuery functions and enjoy the IntelliSense in Visual Studio 2008.

A Simple Example of Using jQuery Functions

For example, Assuming that you have a page with the following content in it:

<form id="form1" runat="server">
<div>
  <input type="text" class="inputs" id="txtName"       
         value="Enter Text Here" />
  <input type="button" class="inputs" id="btnSubmit"       
         value="Click Me" onclick="handleButtonClick();" />
</div>
</form>

This form contains a single textbox followed by a button.

The handleButtonClick() function handles the button onclick event.

<script type="text/javascript">
  function handleButtonClick() {
  }
</script>

The way jQuery works is by selecting DOM elements and then doing something with them, such as executing a function or applying some properties. For example:

<script type="text/javascript">
  function handleButtonClick() {
    $("#txtName").css("border", "solid 2px red");
  }
</script>

The above method uses the selector function $ to select DOM elements (in this case – a single element with id = txtName) and to apply a style property of a red border. Running this page and clicking the button results in this output:

Summary

In this post I talked about the steps you should follow in order to use jQuery in Visual Studio 2008 with InstelliSense support. Then, we used jQuery in a simple web application.

ASP.Net MVC on Windows Azure | ASP.Net MVC Web Role

Guy Burstein — Sat, 23 May 2009 16:48:53 GMT

ASP.Net MVC on Windows Azure | ASP.Net MVC Web Role

When you install Windows Azure Tools for Visual Studio, you only get a project template for an ASP.Net Web Role. In this post I’ll talk about how to create a new ASP.Net MVC Web Role or move an existing ASP.Net MVC Application to Windows Azure.

There are 2 ways to do this:

Manually adding an ASP.Net MVC application as a Web Role (suitable both for a new ASP.Net MVC application and for an existing one).
Use a Project Template to simply create a new ASP.Net MVC Web Role (new ASP.Net MVC application only).

Creating a New ASP.Net MVC Web Role

The following steps apply both for creating a new ASP.Net MVC application and to moving an existing ASP.Net MVC application to Windows Azure.

1. Create an empty ASP.Net MVC Application (with or without a test project), or make sure you have an existing ASP.Net MVC application that you want to move to the Windows Azure.

2. Close this solution and create a new Blank Cloud Service. Make sure you start Visual Studio as an administrator because working with the Development Fabric requires that.

3. Add an existing project to the cloud service and select the ASP.Net MVC Application you have created earlier.

4. Right click the ASP.Net MVC project and select Unload Project.

5. When the project is unloaded, right click it and edit the project file.

6. The project file opens in the XML Editor.

<Project ToolsVersion="3.5" DefaultTargets="Build" ...>
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    ...
  </PropertyGroup>
  ...        
</Project>

Inside the PropertyGroup Element, add the RoleType element and mark this ASP.Net MVC project as a Web Role.

<Project ToolsVersion="3.5" DefaultTargets="Build" ...>
  <PropertyGroup>
    <RoleType>Web</RoleType>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    ...        
  </PropertyGroup>
  ...
</Project>

7. Close this project file, and reload the project.

8. Since the ASP.Net MVC now runs on the Windows Azure Service Hosting environment and will probably use its services – add a reference to Microsoft.ServiceHosting.ServiceRuntime.dll.

9. Right click the Roles node in the project tree, and add a Web Role Project in the solution. Select the ASP.Net MVC project from the project list.

Now the ASP.Net MVC project is shown as a Web Role.

10. Since the Windows Azure provides us only with the default .Net Framework 3.5 SP1 assemblies, we must make sure we also copy the ASP.Net MVC Assemblies to the cloud. To do this, right click on each of the following references of the ASP.Net MVC application, and set the Copy Local property to True:

System.Web.Abstractions
System.Web.Mvc
System.Web.Routing

That’s it. You can run the application to make sure that it is running on the Development Fabric.

Creating an ASP.Net MVC Web Role using a Project Template

Thanks to a great word done by the community, we can use a project template to do all the above steps for us. Here’s how to do this:

1. Download the project template from Codeplex at http://c4mvc.codeplex.com/.

2. Create a new project and select the Azure ASP.Net MVC template in the Community for MVC category.

This creates a new Cloud Service for Windows Azure with ASP.Net MVC Application as a Web Role.

Enjoy!

New Release for Oxite: An ASP.Net MVC Sample Application

Guy Burstein — Mon, 16 Feb 2009 21:20:57 GMT

New Release for Oxite: An ASP.Net MVC Sample Application

Oxite is a sample ASP.Net MVC application, that provides guidance, extensions and best practices for building ASP.Net MVC applications. The famous application built using Oxite is MIX Online.

The new release contains architecture improvements and new features:

New Model, Services and Repositories
Dependency Injection (Routes, Controllers, Services, Repositories, etc)
ActionFilter Registry
Better test coverage
New validation class added
Improved background services architecture
Projects cleaned up and consolidated
Views cleaned up
No more *.cs or *.cs.designer for views in web project
Now works in a sub directory
New admin dashboard
New and update (from last version) SQL scripts included
Many other small features, improvements and bug fixes

Download Oxite source code from here.

Enjoy!

Create a Strongly Typed CRUD UI With ASP.Net MVC RC

Guy Burstein — Tue, 03 Feb 2009 10:16:49 GMT

Create a Strongly Typed CRUD UI With ASP.Net MVC RC

In this post I will show the tooling enhancements in ASP.Net MVC that lets you build CRUD (List, Details, Create and Edit) actions very fast. With a little amount of code we can create a good starting point for building a data entry application using ASP.Net MVC.

1. Prepare the database. In this sample I am using the Leasing database, that contains 3 tables. Download the schema and create the database.

2. Create a new ASP.Net MVC Application.

3. Create the Model. In this samples I am using LINQ to SQL, but you can choose any other business object representation. Add a new LINQ to SQL Data Model to the Model folder in the MVC application project, and drag the relevant tables from the Server Explorer into the ORM Designer. This creates classes that represent the tables and relationships in the database.

4. Create a new controller. Right click the Controllers folder in the MVC application, choose Add and select the Controller item.

Provide a name for the controller, check the “Add action methods for Create, Update and Details scenarios”, and click Add.

This creates a new controller, and creates the methods for the above actions. We will explore those actions as we move on.

5. Add a link to the Vehicles module. Open the master page (Site.Master under the Views\Shared folder), and locate the links for Home and About.

<li><%= Html.ActionLink("Home", "Index", "Home")%></li>

<li><%= Html.ActionLink("About", "About", "Home")%></li>

Add a third link to the Vehicles module:


<li><%= Html.ActionLink("Vehicles", "Index", "Vehicles")%></li>

Now, If you run the application, you should see a link on the upper menu.

Implement the List Action: Display a list of Model Items (Vehicles)

1. Create a member of type VehiclesDataContext in the controller. We will use this context to access the database.

public class VehiclesController : Controller

  VehiclesDataContext db = new VehiclesDataContext();

//

  // GET: /Vehicles/

...

2. In the Index method, query the database for the list of vehicles using a LINQ query. Then, return a view with the results.

// GET: /Vehicles/

public ActionResult Index()

  var query = from v in db.Vehicles

              select v;

  return View(query);

3. Create a corresponding View. Right click the code editor somewhere inside this method and choose the Add View context item.

This will open the Add View dialog that lets you choose the view properties before it is generated. In this dialog, check “Create strongly-typed view” and select the Vehicle class from the List. Then, in the View content field, select List.

After you click Add, Visual Studio will generate a view that displays a table with the vehicles details.

If you now run the project, and click the Vehicles link in the top menu, you should get a list of vehicles like this one:

Implement the Details Action: Display the details of a Model Item (Vehicle)

1. In the controller’s Details method, use the id parameter to query the database for the specific vehicle. Then, return a view with the result.

// GET: /Vehicles/Details/5

public ActionResult Details(int id)

  Vehicle v = db.Vehicles.Single(vh => vh.VehicleID == id);

  return View(v);

2. Create a corresponding View. Right click the code editor, and select the Add View option. In the dialog, make sure that it is strongly-typed and the View content is Details.

3. Link from the list view to the details view. Each row in the list view had a Details link. To pass the id of the vehicle to the details action, open the Index view (Views\Vehicles\Index.aspx) and locate the Details and Edit links:

<td>

    <%= Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) %> |

    <%= Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>

</td>

Remove the comment from the third parameter of the ActionLink, and pass the vehicle ID:

<td>

    <%= Html.ActionLink("Edit", "Edit", new {  id = item.VehicleID  }) %> |

    <%= Html.ActionLink("Details", "Details", new { id = item.VehicleID })%>

</td>

4. Run the application, and click the Vehicles link to display a list of vehicles. Then click on the Details link of the first vehicle to display its details.

Implement the Edit Action: Edit the details of a Model Item (Vehicle)

1. Notice that the controller has 2 overloads of the Edit action:

// GET: /Vehicles/Edit/5

public ActionResult Edit(int id)

{
  ...

// POST: /Vehicles/Edit/5

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Edit(int id, FormCollection collection)

...

The first one is for getting the vehicle details in order to display then in the View. When the user clicks the submit button, a POST message will call the second overload with the form data.

2. Get the details of the vehicle to display in the view. This implementation is identical to the Display action implementation.

// GET: /Vehicles/Edit/5

public ActionResult Edit(int id)

  Vehicle v = db.Vehicles.Single(vh => vh.VehicleID == id);

  return View(v);

3. Create a corresponding view, and make sure to select Edit as the View content.

4. Implement the Save action. In the second overload of the Edit method, get the data out of the FormCollection instance, and apply it the the vehicle. Then save the changes to the DB, and display the list.

// POST: /Vehicles/Edit/5

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Edit(int id, FormCollection collection)

  Vehicle v = db.Vehicles.Single(vh => vh.VehicleID == id);

  v.Cargo = int.Parse(collection["Cargo"]);

  v.Category = int.Parse(collection["Category"]);

  v.MaxSpeed = int.Parse(collection["MaxSpeed"]);

...

  db.SubmitChanges();

  return RedirectToAction("Index");

5. Enable the Edit link in the Details View. Open the Details View (Views\Vehicles\Details.aspx) and locate the Edit link at the bottom. Then, remove the comment from the third parameter of the ActionLink, and pass the vehicle ID:

<%=Html.ActionLink("Edit", "Edit", new { id = Model.VehicleID }) %>

5. Run the application, and click the Vehicles link to display a list of vehicles. Then, click on the Edit link of the first vehicle to display its details for editing:

Change the values of the vehicle and click Save. The updated values will be displayed in the list of vehicles.

Implement the Create Action: Create a new Model Item (Vehicle)

1. Notice that the Create method has 2 overloads as well. Again, one is to do any work before the Create View is shown and the other is to respond to the POST message and insert the data to the database.

2. Create the Create View using the Add View context item in the code editor. Make sure to select Create in the View content. In this sample you don’t have to change the logic in the Create method, since no data is necessary for creating a new vehicle.

3. Implement the second overload of the Create method. Extract the data from the FormCollection instance, and build a new instance of Vehicle. Then, add it to the database, and return to the list.

// GET: /Vehicles/Create

public ActionResult Create()

  return View();

// POST: /Vehicles/Create

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Create(FormCollection collection)

  Vehicle v = new Vehicle

    MaxSpeed = int.Parse(collection["MaxSpeed"]),

    Model = collection["Model"],

...

};

  db.Vehicles.InsertOnSubmit(v);

  db.SubmitChanges();

  return RedirectToAction("Index");

4. Run the application, and click the Vehicles link to display a list of vehicles. Then, scroll to the buttom of the page and click on the Create New link. This will show a new form that collects the details of a vehicle.

Once you filled the data, click Create, and the new vehicle will be displayed in the list.

Conclusion

The tooling enhancements in ASP.Net MVC RC makes creating CRUD (List, Details, Create and Edit) actions very fast. With a little amount of code we have created a good starting point for building a data entry application using ASP.Net MVC.

Enjoy!