Integrating ExtJS and ASP.NET MVC

By: John Charles (Juan Carlos) Olamendy Turruellas

Introduction

ExtJS is a JavaScript library for building interactive web applications using latest techniques such as Ajax, DHTML and DOM scripting. As well as ASP.NET MVC in the latest Microsoft initiative to support the Model-View-Controller (MVC) design pattern. In this article, I will illustrate how to integrate both Web development frameworks in order to create applications with a great user experience.

Getting started with the solution

The first step is to create a MVC application using Visual Studio.NET 2008 (see Figure 1).

 Image

Figure 1

Next step is to go to the http://www.extjs.com site and download the latest version of the library. Next create a directory named ext inside Scripts directory in the MVC project and copy the following artifacts in there from the ExtJS distribution (see Figure 2):

  • ext-all.js. This is the main file in ExtJS and contains all the main artifacts and widgets of the framework.
  • resources directory. In this folder we have the images and styles we need for the components of the Framework.
  • ext-base.js. This file is used for the stand-alone ExtJS framework. This is the default adapter for ExtJS. This file is copied from adapter directory. The adapter directory contains the different adapters to integrate ExtJS framework with others JavaScript libraries such as jQuery, Prototype, YUI, etc.

 Image

Figure 2

Next step is to open the Site.Master file to include these files (see Listing 1).

<link href=”../../Scripts/ext/resources/css/ext-all.css” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript” language=”javascript” src=”../../Scripts/ext/ext-base.js”></script>

<script type=”text/javascript” language=”javascript” src=”../../Scripts/ext/ext-all.js”></script>

Listing 1

Now, to update the JavaScript intellisense in Visual Studio.NET 2008, when we include the *.js files, you need to press Ctrl+Shift+J shortcut.

Now, it’s time to test if everything is running correctly. We’re going to show a window with the “Hello World!” immortal message. The final code for te Site.Master is shown in the Listing 2.

<%@ Master Language=”C#” Inherits=”System.Web.Mvc.ViewMasterPage” %>

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

    <title><asp:ContentPlaceHolder ID=”TitleContent” runat=”server” /></title>

    <link href=”../../Content/Site.css” rel=”stylesheet” type=”text/css” />

    <link href=”../../Scripts/ext/resources/css/ext-all.css” rel=”stylesheet” type=”text/css” />

    <script type=”text/javascript” src=”../../Scripts/ext/ext-all.js”></script>

    <script type=”text/javascript” src=”../../Scripts/ext/ext-base.js”></script>

    <script type=”text/javascript”>

        Ext.onReady(function()

        {

            Ext.Msg.alert(“Message”, “Hello world!”);

        });

    </script>

   

</head>

 

<body>

    <div>

 

        <div id=”header”>

            <div id=”title”>

                <h1>My MVC Application</h1>

            </div>

             

            <div id=”logindisplay”>

                <% Html.RenderPartial(“LogOnUserControl”); %>

            </div>

           

            <div id=”menucontainer”>

           

                <ul id=”menu”>              

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

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

                </ul>

           

            </div>

        </div>

 

        <div id=”main”>

            <asp:ContentPlaceHolder ID=”MainContent” runat=”server” />

 

            <div id=”footer”>

            </div>

        </div>

    </div>

</body>

</html>

Listing 2

As you can see, we’re registering a function on the onReady function to show an ExtJS alert with the Hello World! message. The onReady function is called when DOM is fully loaded. It ensures that any page elements that you may want to reference in your functions will be available when the script runs (see Figure 3).

 Image

Figure 3

Conclusion

In this article, I’ve illustrated how to integrate both Web development frameworks in order to create applications with a great user experience.

Advertisements

4 thoughts on “Integrating ExtJS and ASP.NET MVC

  1. Pingback: MVP Factor

  2. Pingback: Fernando Garcia Lorea

  3. Pingback: Dia recheado de publicações e novidades em .Net « Blog do Piruca

  4. I am new to EXTJS. I downloaded the ext-4.1.0-gpl code.
    I did exactly the same as you specified here however all works fine but I have following issues:
    This does not have ext-base.js. So added ext-all-debug.js instead.
    However there is not error but no message is displayed either. Which version of EXTJS are you using in this example?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s