ExtJS and MVC : 01 - Getting Started

This website is no longer actively supported

Written by John DeVight on 11 May 2011 17:40

Written by John DeVight on 2011-May-11

Overview

I am working on a prototype for a new project and will be using ASP.NET MVC to develop the application. I've seen ExtJS used, and it looks great! However, the challenge is to integrate ASP.NET MVC with ExtJS. This is the first of a series of wiki pages about integrating ASP.NET MVC and ExtJS.

Steps Involved

Create an ASP.NET MVC3 Web Project.

1. Launch Visual Studio and create a new Project. Select Visual C# -> Web -> ASP.NET MVC 3 Web Application.
2. In the "New ASP.NET MVC 3 Project" dialog, Select the "Empty" template and the "Razor" View engine.
3. In the "Controllers" folder, add a new controller called "HomeController".
4. In the "Views" folder, create a "Home" folder.
5. In the "Views" -> "Home" folder, add a new view. Give the view a name of "Index". Be sure that the view engine selected is "Razor" and that the master page is selected.

Add the required ExtJS files into your Web Project.

1. In your web project, add a new folder called "extjs".
2. Locate the extjs download, extract the contents of the zip file and open the root folder. At the time of this blog, I am using version 3.3.1, so the root folder is called ext-3.3.1.
3. From the root folder, copy the "adapter" folder, "resources" folder and ext-all.js into the "extjs" folder created in step 3.
4. Include the the entire contents of the "extjs" folder into your project.

Referencing the required ExtJS css and js files.

1. Open the "View" -> "Shared" -> (_Layout.cshtml or Site.Master) file.
2. Add the following within the "head" tags:

RAZOR : _Layout.cshtml

<link href="@Url.Content("~/extjs/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/extjs/adapter/ext/ext-base.js")" type="text/javascript"></script>
<script src="@Url.Content("~/extjs/ext-all.js")" type="text/javascript"></script>

ASPX: Site.Master

<link href="<%= Url.Content("~/extjs/resources/css/ext-all.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/extjs/adapter/ext/ext-base.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/extjs/ext-all.js") %>" type="text/javascript"></script>

Conclusion

That's everything that you need to do to configure your ASP.NET MVC3 Web Project to use ExtJS!

References

• ExtJS: http://www.sencha.com/products/js/

Support ASP.NET Wiki

If you like this page, click on the "Share on" links in the wikidot toolbar at the top of the page to share it with your friends.

Discussion Closed

---