Ext.NET Web Application Development

By Anup Shah
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started with Ext.NET

About this book

To build a rich internet application, you need to integrate a powerful client side JavaScript framework with a server side framework. Ext.NET achieves this by integrating Sencha’s Ext JS framework with the power of ASP.NET. The result – a sophisticated framework offering a vast array of controls, layout, and powerful AJAX and server bindings, which can be used to build rich, highly usable web applications.

"Ext.NET Web Application Development" shows you how to build rich applications using Ext.NET. Examples guide you through Ext.NET’s various components using both ASP.NET Web Forms and MVC examples. You will also see how Ext.NET handles data binding and server integration. You will also learn how to create reusable components and put them together in great looking applications.

This book guides you through the various Ext.NET components and capabilities to enable you to create highly usable Ext.NET components and web applications.

You will learn about various UI components and numerous layout options through examples. You will see how the AJAX architecture enables you to create powerful data-oriented applications easily. This book will also teach you how to create reusable custom components to suit your needs.

"Ext.NET Web Application Development" shows you how to create rich and usable applications using Ext.NET through numerous examples.

Publication date:
November 2012
Publisher
Packt
Pages
410
ISBN
9781849693240

 

Chapter 1. Getting Started with Ext.NET

This chapter will introduce you to Ext.NET and how it fits into ASP.NET-based development. It will then guide you through installing and setting up Ext.NET on your local development machine. In particular, we cover the following topics:

  • An overview of Ext.NET

  • Choosing the right Ext.NET license

  • Downloading Ext.NET

  • Compiling Ext.NET

  • Creating a simple ASP.NET project with Ext.NET enabled

  • Creating a simple ASP.NET MVC Razor Project with Ext.NET enabled

 

An overview of Ext.NET


As mentioned on Ext.NET's official website (http://ext.net):

Ext.NET is an open source ASP.NET (WebForm + MVC) component framework integrating the cross-browser Sencha Ext JS JavaScript Library.

Sencha's official website (http://www.sencha.com/products/extjs/) describes Ext JS (pronounced eee-ecks-tee) as a JavaScript framework for rich apps in every browser.

In other words, Ext.NET is an ASP.NET framework, or a set of controls and classes, that typically generates JavaScript (though HTML and CSS are generated wherever needed). And, the JavaScript it generates is based on the Ext JS framework, from Sencha.

Ext.NET also includes components that are not found in Ext JS, and extends various Sencha Ext JS classes wherever needed, thus providing its own JavaScript layer on top of Ext JS.

Ext.NET is a good abstraction over Ext JS. The abstraction is not leaky or restrictive—you can also write Ext JS-based JavaScript directly, as well as in conjunction with Ext.NET. This flexibility importantly allows you to tap into the wider Ext JS community of plugins and components that you might want to incorporate into your Ext.NET applications.

This means that knowing the underlying Ext JS library can really help you understand Ext.NET, and will open you to more options when building complex applications.

The other way of thinking about it is that Ext.NET is a great bridge between Ext JS on the client side and ASP.NET on the server side.

Ext.NET and its relationship with ASP.NET Web Forms and ASP.NET MVC

A great thing about Ext.NET is that it works with both ASP.NET Web Forms and ASP.NET MVC. If you are integrating Ext.NET into a legacy application built with ASP.NET Web Forms, or if you simply prefer ASP.NET Web Forms, Ext.NET will work very well and provide enhanced HTML5 functionality.

The newer ASP.NET MVC framework is a powerful and well-architected MVC framework, designed to avoid the Post Back model that ASP.NET Web Forms is based on and allow better access for developers to the underlying HTML, JavaScript, and CSS.

The choice of using ASP.NET MVC or Web Forms is not important for the scope of this book. Examples of both will be shown from time to time, though most of these will be based on ASP.NET Web Forms.

Ext JS

Many ASP.NET developers, especially those using ASP.NET MVC may be more familiar with jQuery or other JavaScript frameworks. It is, therefore, worth explaining Ext JS a bit further.

Comparing with other JavaScript libraries such as jQuery

Although Ext JS is a reasonably popular JavaScript framework (especially in the enterprise and in the Java world), there are other more popular JavaScript frameworks, such as the excellent jQuery.

However, as popular as jQuery may be (Microsoft includes it by default in their MVC framework, for example), there is a significant difference between Ext JS and libraries such as jQuery, Prototype, and MooTools.

Libraries such as jQuery attempt to solve common problems for web developers and designers by providing cross-browser compatible ways to navigate and manipulate the DOM. They provide standard event, AJAX and other capabilities. Their UI components, such as jQuery UI are typically designed to work in a progressive enhancement way (i.e. the web page will work with and without JavaScript; JavaScript in that context, when structured properly, is used to enhance the base functionality of a web document to add further behavior and improved user experience, but the absence of JavaScript allows search engines and users of lower-grade browsers to still access the page and use it).

Ext JS's goal, however, is to provide a complete UI framework for building complex web-based applications. Ext JS also provides a full and extensible object-oriented UI component framework, in addition to providing cross-browser abstractions in the similar ways that other JavaScript frameworks do. (Ext.NET mimics this component hierarchy on the server side quite closely, which makes for easier learning of both frameworks).

In that regards, it is more appropriate to compare jQuery UI with Ext JS, and in that context, Ext JS is far richer in capability.

All that being said, the use of Ext JS—and, therefore, Ext.NET—does not preclude the use of other frameworks. For example, you can include jQuery on the same page as an Ext.NET application.

From a web developer's point of view

Progressive enhancement and web standards are excellent principles for building websites. However, Ext JS is not about progressive enhancement. The problem space it addresses is different; it is intended for much richer applications where a dependency on JavaScript can be mandated. A back-office application in a corporate or intranet setting is one example. Another may be a public application but where search engine visibility is not required. In such scenarios typically, JavaScript is the starting point for the application; the HTML-based web page then becomes a container to load and initialize the JavaScript-based application.

It is possible to use Ext JS on top of HTML and get it to replace say an HTML table with a powerful Ext JS grid, but that is not considered the optimal way to use Ext JS.

All is not lost from a web standards perspective, however! You should still test on modern browsers, such as Chrome, Firefox, and Opera, first and then work backwards. It is well established that this way of working with web technologies will reduce (though not eliminate) the number of workarounds you need for older web browsers, in a maintainable way. For many components, Ext JS and Ext.NET will also let you override the underlying HTML it uses to generate its components. In addition, Ext JS is also increasing its HTML5 and ARIA accessibility standards support in its numerous widgets.

From a CSS point of view, complete themes are provided. These also include resets of default styles to normalize them across browsers as much as possible. The default themes may be quite suitable for many Ext JS-based applications, which also means less time may be required working with CSS on Ext.NET-based applications. You can also create your own themes but this will be beyond the scope of this book. You can find various tutorials on the Web, as well as on Sencha's official website.

Ext.NET from an ASP.NET application developer's point of view

If you are used to creating ASP.NET applications using ASP.NET controls or using vendor controls that follow ASP.NET controls closely (for example, using the Post Back model where most of the control state is maintained on the server via ViewState) then Ext.NET may initially appear quite similar, but behind the scenes, there are some useful enhancements and considerations, for example:

  • ViewState is typically not required for Ext.NET controls and is turned off by default (but is on if you use FormsAuthentication, which requires it). This can save a lot of bandwidth. In one case, a roughly 1.5 MB page (mostly due to ViewState) during an AJAX request became a mere 500 bytes using one of Ext.NET's AJAX approaches.

  • An ASP.NET Web Forms application requires a single ASP.NET <form runat="server">, which contains all the controls, ViewState, event arguments, and so on. With Ext.NET it is optional as later chapters will show. Furthermore, you can choose to have multiple HTML form tags if you require and Ext.NET will happily work with that.

  • When normally developing ASP.NET applications, you add controls to the container's Controls collection. With Ext.NET, you typically add child Ext.NET controls to an Ext.NET component's Items collection. This is important to bear in mind. This helps generate more optimized Ext.NET JavaScript and lets you take advantage of additional Ext.NET features such as Layout which we will see in Chapter 3, Layout with Ext.NET.

It is worth focusing on the point about ViewState for a moment. In a traditional ASP.NET Web Forms application, ViewState and the associated Post Back Model are the keys to recreating complex controls in the state the user expects them to be. With Ext.NET's approach, however, control state does not typically need to be maintained on the server; this usually flies against conventional ASP.NET Web Forms applications, but rich Internet applications are becoming more and more AJAX-oriented, which means less (sometimes no) browser page reloads. As such, the control state management normally associated with page reloads and post backs is less prominent and helps simplify code.

For the client side, Ext.NET's JavaScript and the underlying Ext JS framework handles most complexities of control management such as instantiation, destruction, layout management, and redrawing components. This also means the client-side code needed to maintain the state is also very minimal, if anything; Ext JS components will handle most of the internal state for you and if you need more, the API is flexible enough for you to introduce your own code as needed.

Because Ext.NET uses Ext JS's built-in AJAX capabilities, mixing different server-side toolkits—while not impossible—can limit the flexibility and performance you can get out of Ext.NET. For example, if you have a mix of components on your page, and the other non-Ext.NET components rely on ASP.NET Web Form's Post Back and ViewState, Ext.NET will still work with that, but you won't be able to take advantage of some of Ext.NET's more sophisticated capabilities, as frequently.

At the same time as being a complete UI framework, you can always by-pass Ext.NET on the server side and do something directly using Ext JS or Ext.NET's own JavaScript, if that proves more optimal. This flexibility makes the Ext.NET server-side abstraction more flexible and less "leaky".

From an ASP.NET development perspective, the main thing to take away is that as powerful as ASP.NET is, Ext.NET enhances and integrates client and server coding much more completely and gives you the flexibility to get your hands dirty with JavaScript, if you so wish.

Tip

To get the most out of Ext.NET, it is strongly recommended to spend time learning more about Ext JS as well.

Ext.NET and Ext JS versions

With Ext.NET's integration of Ext JS the versions are important to understand.

The latest version of Ext JS, as of writing, is 4.1. It is an impressive evolution of the previous version (Ext JS 3.4) which is still widely used.

Ext.NET targets specific Ext JS versions:

  • Ext.NET 1.x works with Ext JS 3.x

  • Ext.NET 2.x works with Ext JS 4.x

Note

This book covers Ext.NET 2.1 which is the latest version as of writing. However, note that the Ext.NET team works to produce updates as frequently as they can. If Ext.NET 2.2 or later has been produced, most principles and techniques from this book will still apply.

This is important to note if ever consulting the Ext.NET or Ext JS documentation online.

Prerequisites

Ext.NET 2 will work with the following:

  • Visual Studio 2010 or 2012

  • Visual Web Developer Express 2010 or 2012

  • .NET Framework 4.0 and 4.5

In this book, code examples will be created using Visual Studio 2010 Service Pack 1 and .NET Framework 4.

Ext JS and Ext.NET support all the major modern browsers such as Chrome, Firefox, IE9, Opera, and Safari) as well as older versions of Internet Explorer (also referred to as IE)—IE8, IE7, and IE6. As of writing, IE10 has only just come out, so is not officially supported, but we can expect both Ext.NET and Ext JS to provide maintenance releases to support IE10, as they have done with IE9 in the past.

Note

Keep an eye on the Ext.NET website, http://ext.net, because new versions of the .NET framework and Visual Studio are being released as of writing, and browser manufacturers are frequently releasing newer versions of their software.

When to use ExtJS/Ext.NET and when not to

With all the benefits that Ext.NET may offer, why might you consider not using it?

The following points are just guidelines as there will always be exceptions, but the main consideration is that Ext.NET is based on Ext JS, which is a JavaScript framework.

If you have a website where search engine visibility is crucial, progressive enhancement is important, and full control over every bit of HTML and CSS is important, Ext JS (and therefore Ext.NET) may not be for you. This may include public-facing consumer websites such as blogs and e-commerce sites. You can certainly use Ext JS (and Ext.NET) on these sites, but it would not be the main or intended use cases.

However, if you are building complex applications, such as business/intranet applications or a public-facing site where JavaScript dependency can be an accepted pre-requisite, then Ext JS/Ext.NET can be an excellent choice.

If you are looking to build a sophisticated application, the user interface, the usability, and interaction design principles may also differ to what you would follow for websites. There is certainly a lot of overlap, but additional principles such as those described in the authoritative About Face 3: The Essentials of Interaction Design by Alan Cooper et al is highly recommended.

 

Getting Ext.NET


We will now look at what is involved in downloading the Ext.NET framework.

Choosing the right Ext.NET license

The first thing to note is that Ext.NET is dual licensed and you can choose between the following:

  • Ext.NET Pro: For commercial closed-source projects

  • Ext.NET Community: For open source AGPL licensed projects

The differences between the two are very minimal. In the Ext.NET Pro release there is an option to render resources (JavaScript, CSS, and images) from a global Content Delivery Network. The Community version does not have this option. The Pro version also does some license checking. Other than that, the code is the same.

If your own project is licensed with the AGPL license, then you can use the Community license. If you are producing a closed source project, then you should purchase an Ext.NET Pro license. The Pro license includes a license to the underlying Ext JS framework so you do not have to purchase both. The Pro license also comes with a license key that can be added to Web.config or Global.asax without which you would see a message appearing on any web pages that are not running locally. This message warns about the software being unlicensed. The FAQs at Ext.NET's download page, http://ext.net/download/, has further details and can help you decide which license is suitable for your project.

Downloading Ext.NET

There are a number of ways you can download Ext.NET:

From the Ext.NET download site: http://ext.net/download/

All these options, except the NuGet option, include the full source code so you can choose whether to build the solution yourself or use the supplied assemblies. Downloading the source code is useful to at least explore how Ext.NET has been put together. The SVN option will include a pre-release source code if you want bug fixes more quickly than official releases.

NuGet is a popular Visual Studio extension to manage packages for you and will install the Ext.NET binaries to your web project's bin folder. The download from Ext.NET is a ZIP file. The DLLs that you will find are as follows:

  • Ext.Net.dll: The Main Ext.NET assembly

  • Ext.Net.pdb: The debugging symbols

  • Ext.Net.xml: The IntelliSense help text for the assembly when you are coding

  • Ext.Net.Utilities.dll: Additional utilities from the Ext.NET framework

  • Ext.Net.Utilities.xml: IntelliSense help text

  • NewtonSoft.Json.dll: The Json.NET framework that Ext.NET uses

  • NewtonSoft.Json.xml: The Json.NET IntelliSense

  • Transformer.NET.dll: A .NET template parsing and transformation library

  • Transformer.NET.xml: The Transformer.NET IntelliSense

Json.NET is itself a popular open source .NET library for working with JSON. It is extremely effective at serializing .NET into JSON and deserialization from JSON to .NET. So much so that Microsoft itself has started using it instead of some of its own JSON serializers. More information about Json.NET can be found at its website: http://james.newtonking.com/pages/json-net.aspx.

In addition to the DLLs, the following text files are also available and worth reading:

  • README.txt

  • CHANGELOG.txt

  • LICENSE.txt

Compiling (if needed)

If you have opted for the Ext.NET Premium Support Subscription service, amongst other benefits, you get access to their latest source code. So, for example, any bug fixes or feature requests reported by you or others in the community that have recently been implemented are available immediately for you to compile and use.

If you go for this option, Ext.NET will send you instructions on how to connect to the public SVN code repository to download the latest code. You can then open the Visual Studio solution file and compile the code manually. If you then look in the Ext.Net project's bin\Debug or bin\Release directory (depending on which mode you want) you will find the same DLLs as above.

You can then include the output assemblies in your own solution. This means you do not need to compile their source code every time you compile your own solution; only when you update your local Ext.NET code from their SVN repository.

 

A walkthrough – creating a simple ASP.NET project with Ext.NET enabled


We will use the simplest and quickest approach to get you ready and playing with Ext.NET. Although the following steps and screenshots assume Visual Studio 2010 Service Pack 1, similar steps can be performed with Visual Studio 2012.

Note

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Creating the project and enabling Ext.NET

The quickest way to get going in just a few seconds is to use NuGet. First, ensure you have the latest version of NuGet installed and then perform the following steps:

  1. In Visual Studio, create a new ASP.NET Empty Web project.

  2. Once it is created, open the Package Manager Console in Visual Studio.

  3. Enter the following NuGet command:

    Install-Package Ext.NET
    
  4. Once installed, compile your project and you are done!

    Tip

    You can also run the NuGet command on an existing web project and it will add the new references and update your Web.config with its new additions for you.

Running the sample Ext.NET page

Following the above steps, the project will include a new page called Ext.NET.Default.aspx.

Right-click on the file and select View in Browser and you will see a page similar to the following:

The above page renders a simple Ext.NET Window in the center of the page with a message textbox.

But it is not a static page; go ahead, type a short message, and click on Submit.

An AJAX request will be made to the server and a message notification will slide up from the lower-right side of the browser window, then slide-out and disappear after a few seconds:

What the sample page does

This very simple example does many things for you

  • It loads the required JavaScript and CSS resources

  • It generates the necessary client-side initialization script, which renders the Ext.NET Components, such as the Window, TextArea, and Button, to the browser

  • When the message is submitted, an AJAX request is posted to the server

  • The server responds with a snippet of JavaScript to pop up the Ext.NET Notification

The code for the sample page is quite minimal. Here is the full ASPX code:

<%@ Page Language="C#" %>

<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Notify(new NotificationConfig { 
            Icon  = Icon.Accept,
            Title = "Working",
            Html  = this.TextArea1.Text
        }).Show();
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Theme="Gray" />

        <ext:Window
            runat="server" 
            Title="Welcome to Ext.NET 2.1"
            Height="215"
            Width="350"
            BodyPadding="5"
            DefaultButton="0"
            Layout="AnchorLayout"
            DefaultAnchor="100%">
            <Items>
                <ext:TextArea
                    ID="TextArea1" 
                    runat="server" 
                    EmptyText=">> Enter a Message Here <<"
                    FieldLabel="Test Message" 
                    Height="85" 
                    />
            </Items>
            <Buttons>
                <ext:Button
                    runat="server" 
                    Text="Submit"
                    Icon="Accept" 
                    OnDirectClick="Button1_Click" 
                    />
            </Buttons>
        </ext:Window>
    </form>
</body>
</html>

The key things happening in the preceding code are as follows:

  • All the Ext.NET components are registered from the Ext.NET assembly using the ext tag prefix.

  • In the HTML, inside the form, is ext:ResourceManager. It is responsible for including the required JavaScript and CSS resources. In the above code, the theme has been set to the Gray theme. If this is not set, you get the default theme which is currently Blue.

  • Next, an Ext.NET Window component is placed on the screen and inside that, is a TextArea and a Button component.

  • The button, when clicked, will invoke an Ext.NET DirectEvent. A DirectEvent is Ext.NET's mechanism for doing server side calls in such a way it looks like a remote procedure call and the details of making the AJAX request and handling it on the server are all taken care of for you. (Chapter 4, AJAX with Ext.NET, will cover this in a bit more detail.)

  • The Button1_Click server-side event handler is defined near the top of the ASPX page. It simply calls the Notify method on the Msg property of the X class, which creates the Ext.NET Notification widget in the browser's corner using the supplied configuration options for the title, title icon, and the main text which is the value picked up from the TextArea.

The X class contains many Ext.NET utilities and properties.

All the components and techniques used in the above code will be expanded upon in subsequent chapters. A key thing to note at this point is that overall, this looks much like a regular ASP.NET button-click handler in terms of the code you write. However, the significant difference is that this is not doing a full page post back; it is a light-weight AJAX request, with an even lighter AJAX response.

Here is the full response from the server to the browser:

{script:"Ext.net.Notification.show({title:\"Working\",html:\"Hello World!\",iconCls:\"#Accept\"});"}

It is just 100 bytes of JSON which Ext.NET's JavaScript will handle and process for you. Had this been an ASP.NET traditional post back, the response would have been a full HTML page. In a real application these kinds of responses can save a lot of server resources and improve the user experience considerably.

Let's take moment to go back to the project we created and see what other project artifacts we now have after the NuGet package installed Ext.NET for us.

Ext.NET in the ASP.NET project

In addition to creating Ext.NET.Default.aspx, the only other things that were done to the project were the following:

  • Four new references were added, to Ext.Net, Ext.Net.Utilities, Newtonsoft.Json and Transformer.NET

  • Web.config was updated to include a few additional settings (discussed in the next section)

  • A folder called App_Readme with useful Ext.NET files such as a change log, readme files, and license information were added

  • A packages.config file was also added (by NuGet) to list the added components

Ext.NET and Web.config

Web.config is an important file in ASP.NET and for Ext.NET too. The bare minimum Web.config that is created is as follows:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
  </configSections>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <httpHandlers>
      <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />
    </httpHandlers>
    <httpModules>
      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
    </httpModules>
  </system.web>
  <extnet theme="Default" />
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
    </modules>
    <handlers>
      <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
    </handlers>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-4.5.0.0" newVersion="4.5.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

The above configuration uses both system.web and system.webServer to support IIS6 and IIS7+ to set up the AJAX handlers that Ext.NET will be using, as well as defining the custom section called extnet. This important configuration setting doesn't look like much by default:

<extnet theme="Default" />

However, it is where global settings can be applied to determine how Ext.NET will behave across all pages in your application. The above example sets a global setting to tell the Ext.NET ResourceManager to use the default theme when rendering out the Ext.NET pages. As we saw in the sample page, we can also set the theme on the ResourceManager on the page itself.

Tip

The extnet configuration has many more options

The configuration can take many other parameters which the accompanying README in the project lists and explains. Useful options include a scriptMode property which can be set to Release or Debug (we will look at this in a later chapter to help troubleshoot your application), a property on whether to gzip your resources or not, and many more. The Examples Explorer page on Ext.NET's website has a full list of the configuration options and is worth studying:

http://examples.ext.net/#/Getting_Started/Introduction/README/

If you have purchased an Ext.NET Pro license, then the license key should have been sent to you by the Ext.NET team. That key can be put in the licenseKey property of the extnet configuration section. Without this key, if your site is accessed remotely (for non-development purposes) each page will get a notification pop up saying the software is not licensed.

Ext.NET controls are registered in Web.config for you

In the earlier code for Ext.NET.Default.aspx, there was no explicit registration of the Ext.NET components (using a <%@Register line). Instead, the NuGet installation process adds the following into the system.web section of your Web.config file:

<pages>
  <controls>
    <add tagPrefix="ext" namespace="Ext.Net" assembly="Ext.Net"/>
  </controls>
</pages>

As a result, none of your ASPX pages require the <%@ Register line.

Tip

If you do not use the NuGet install method, then you can add the above code manually into Web.config.

As an aside, the NuGet package used above does not have MVC support built into it, which means you can use it against a .NET 3.5 solution, if you require, though .NET 4 would usually be recommended. Ext.NET's MVC support is for MVC 3 including the popular Razor engine so .NET 4 is, therefore, needed then. Conveniently, Ext.NET provides a separate NuGet package for this, which we turn to next.

 

A walkthrough – creating a simple ASP.NET MVC Project with Razor and Ext.NET enabled


Ext.NET also supports ASP.NET MVC with both the default view template engine, as well as the popular Razor engine. Although the majority of this book will mostly show examples using ASP.NET Web Forms, there will be some examples showing MVC and Razor usage.

Creating an MVC project and enabling Ext.NET

To get MVC support, there is a similar NuGet package, called Ext.Net.MVC. So, you can follow the earlier steps, but instead do the following:

  1. Create a new ASP.NET MVC 3 Web Application project.

  2. Use the following NuGet command:

    Install-Package Ext.NET.MVC
    

The changes will be the same as before. Web.config will be updated for you as needed, and Global.asax will have an additional route registered to handle Ext.NET resources.

Tip

The following Ext.NET forum post is worth looking at to see how to manually apply the configuration changes to an existing project (because you can always use ASP.NET Web Forms and ASP.NET MVC in one project if you wish):

http://forums.ext.net/showthread.php?16920

The sample Ext.NET page using MVC and Razor

To get a feel of how Ext.NET looks in MVC/Razor, here is a similar example as earlier, but using the MVC/Razor syntax. First, the View:

<!DOCTYPE html>
<html>
<head>
    <title>Ext.NET Example</title>
</head>
<body>    
    @Html.X().ResourceManager().Theme(Theme.Gray)

    @(Html.X().Window()
        .Title("Welcome to Ext.NET 2.1")
        .Height(215)
        .Width(350)
        .Layout(LayoutType.Fit)
        .Items(Html.X().FormPanel()
            .Layout(LayoutType.Anchor)
            .DefaultAnchor("100%")
            .Border(false)
            .BodyPadding(5)
            .Items(Html.X().TextArea()
                .ID("message")
                .EmptyText(">> Enter a Message Here <<")
                .FieldLabel("Text Message")
                .Height(85)
            )
            .Buttons(
                Html.X().Button()
                    .Text("Submit")
                    .Icon(Icon.Accept)
                    .DirectClickAction("Notify", "ExtNET")
            )
        )
    )
</body>
</html>

And next, the Controller:

using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using Controller = System.Web.Mvc.Controller;

namespace ExtNet2Mvc.Controllers
{
    public class DirectEventExampleController : Controller
    {  
      //
      // GET: /DirectEventExample/
      public ActionResult Index()
      {
          return View();
      }
      //
      // GET: /DirectEventExample/Notify/
      public ActionResult Notify(string message)
      {
          var config = new NotificationConfig
          {
              Icon = Icon.Accept,
              Title = "Working",
              Html = message
          };

          X.Msg.Notify(config).Show();

          return this.Direct();
       }
    }
}

The code does the same thing as the ASP.NET Web Forms example, earlier. We have defined two actions in the same controller. The Index, or default action when browsing /DirectEventExample/ will simply return the View. The View creates the same components as before, but using Razor syntax and Ext.NET's MVC helper methods.

The button's Click DirectEvent is slightly different; the associated controller action, Notify, takes a string parameter. To set that parameter, the Click DirectEvent adds it as an extra parameter getting the value via a small bit of client-side JavaScript code (which gets the value of the client-side representation of the text area).

To handle the event on the server side, the Notify action creates an Ext.NET Notification object and shows it. The Direct() method generates a DirectResult which is a subclass of ActionResult. It is a class created by Ext.NET and handles the script generation so that the Notification object appears on the user's browser.

These techniques will, of course, be expanded upon in this book, so don't worry about the inner workings in too much detail for now! The key points to take away for MVC Razor is that it generally follows the standard ASP.NET MVC Razor patterns and Ext.NET components come with their own helper methods to help configure the controls as needed. There will be additional features specific to MVC that Ext.NET is building even as this book goes to print so there will be more capabilities to expect that cannot be covered in this book, including Data Annotations support, Model Binding support, specialized Ext.NET action results, and more.

 

Summary


In this chapter we looked at what Ext.NET is and how it integrates both the Ext JS JavaScript framework and the ASP.NET server-side web framework. We also saw how you can set up Ext.NET on your development environment. We saw a variety of ways that Ext.NET can be added to your project, depending on your needs.

Using NuGet is perhaps the quickest way to get started with using Ext.NET. We created an empty ASP.NET Web Application project and installed Ext.NET via NuGet.

This gave us a simple Ext.NET ready project with a sample Ext.NET page. With very little code we saw a component that could talk to the server via AJAX and result in an AJAX response that interacted with the user.

We also got a glimpse of how Ext.NET can be used with an ASP.NET MVC 3 project that uses a Razor template engine.

In the next chapter we will look at various controls that Ext.NET provides.

About the Author

  • Anup Shah

    Anup Shah has been a professional software and web developer since 1997. After graduating from Manchester University with a First Class Honors degree in Computing and Information Systems, he got a job in the United States. There, he soon headed the web development for a rapidly growing dot com, experiencing both the highs and lows of the first dot com bubble. After a number of years there he moved back to England where he grew up and joined a small dynamic software company working as a consultant, architect, and web developer for some high profile retail e-commerce websites, including some of the world's largest. Around 2007, while at the same company, he changed focus from a consulting role to a product development role, responsible for the user interface of a complex retail web application product. It was at this time he came across Ext.NET (or Coolite as it was known back then) and rapidly adopted it and introduced it into the company's product. Anup can be found on the Ext.NET forums, and contacted via his blog, http://www.onenaught.com.

    Browse publications by this author