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.
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:
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:
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
exttag 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 theGraytheme. If this is not set, you get the default theme which is currentlyBlue.Next, an Ext.NET
Windowcomponent is placed on the screen and inside that, is aTextAreaand aButtoncomponent.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_Clickserver-side event handler is defined near the top of the ASPX page. It simply calls theNotifymethod on theMsgproperty of theXclass, 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.
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.configwas updated to include a few additional settings (discussed in the next section)A folder called
App_Readmewith useful Ext.NET files such as a change log, readme files, and license information were addedA
packages.configfile was also added (by NuGet) to list the added components
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.
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.