Install and Setup Guide for Visual Studio
Hi everyone,
I have been spending the day working with Ext.NET and so far I am loving it. I have been looking for something like this for over a year now and am excited to get started with it.
I wanted to give back by sharing my experience with setting up and installing Ext.NET with Visual Studio. I had noticed there was not a step by step instructions for people who are new to Ext.NET and thought I would try to help out by adding this guide on how to start using Ext.NET within your project. Hopefully this will help out someone if they are get getting started with Ext.NET and ASP.NET
This is the setup I used for installing and setting up Ext.NET within Visual Studio 2010 (or 2012). I have tested it with the .NET 4.0 framework and have not had any problems.
Automated Installation Instructions
The easiest and quickest way to install Ext.NET is using NuGet.
Run the following command in Visual Studio Command panel, or seach for "Ext.NET" in NuGet Package Manager.
Code:
Install-Package Ext.NET
Installation Video
Two installation videos (long & short) demonstrating how to instal using NuGet are available.
https://www.youtube.com/watch?v=dsIyDwi3uxA
Manual Installation Instructions
- Download the latest version from http://ext.net/download/.
- Unzip the contents of the .zip file into a directory on your local machine.
Add references to Ext.Net - In the Solution Explorer of your web project, right-click on the project and select "Add Reference...".
- Click the Add button and then the browse tab.
- Browse to the location you unzipped the download package and select the following files:
Code:
Ext.Net.dll
Ext.Net.Utilties.dll
Newtonsoft.Json.dll
Transformer.NET.dll
- Click Ok.
- Save your project.
Web.config changes - Open your web.config file. You will need to ensure the following Ext.NET nodes are added to your Web.config file. A sample Web.config file is also provided in the .zip download package.
Code:
<?xml version="1.0"?>
<configuration>
<configSections>
<section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
</configSections>
<extnet theme="Gray" />
<pages>
<controls>
<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
</controls>
</pages>
<!--
The following system.web section is only requited for running ASP.NET AJAX under Internet
Information Services 6.0 (or earlier). This section is not necessary for IIS 7.0 or later.
-->
<system.web>
<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>
<!--
The system.webServer section is required for running ASP.NET AJAX under Internet Information Services 7.0.
It is not necessary for previous version of IIS.
-->
<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="1.0.0.0-4.5.10" newVersion="4.5.11" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
<bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.2.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
<bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1" />
</dependentAssembly>
</assemblyBinding>
</runtime>
</configuration>
- Testing within your project:
Before you begin I would suggest doing a Build Clean and Rebuild to confirm all the new changes are set.
Copy/paste the following sample into a .aspx within your project:
Code:
<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<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>
<ext:ResourceManager runat="server" Theme="Gray" />
<form runat="server">
<ext:Panel
ID="Window1"
runat="server"
Title="Welcome to Ext.NET"
Height="215"
Width="350"
Frame="true"
Collapsible="true"
Cls="box"
BodyPadding="5"
DefaultButton="0"
Layout="AnchorLayout"
DefaultAnchor="100%">
<Items>
<ext:TextArea
ID="TextArea1"
runat="server"
EmptyText=">> Enter a Test Message Here <<"
FieldLabel="Message"
Height="85"
/>
</Items>
<Buttons>
<ext:Button
ID="Button1"
runat="server"
Text="Submit"
Icon="Accept"
OnDirectClick="Button1_Click"
/>
</Buttons>
</ext:Panel>
</form>
</body>
</html>
- Right-click on the page, and select "View in Browser".
The Page will open a browser and render.
Problems, Errors and Issues:
Here are some common problems you may run into and how to solve the problems.
- Question: The ResourceManager Control is missing from this Page.
- Answer: You did not add the ResourceManager to your page. Add the following tag UNDER your <body> tag:
Code:
<ext:ResourceManager runat="server" />
- Question: Parser Error Message: Unknown server tag '<ext:ResourceManager>'.
Answer: Add the following under your page directive (under the <@Page> tag):
Code:
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
- Question: The web.config file for this project is missing the required DirectRequestModule.
Answer: Please ensure you updated your Web.config file as per the sample above. Please ensure you recompile your project, or you have more then 1 reference to the <system.web> or <system.webserver> tags. - Question: Everything worked on your local development machine but not staging or live server
Answer: Confirm you have uploaded all the .dll files to the /bin/ directory of your project, and that the Web.config has been uploaded.
To Add Ext.NET to your Visual Studio Toolbox
- Open an existing web site or create a new web site project.
- Open or create a new .aspx page.
- Open the ToolBox panel, typically located on the left side in a fly-out panel (Ctrl + Alt + x).
- Create a new "Ext.NET" Tab, by...
a. Right-Click in the ToolBox area.
b. Select "Add Tab".
c. Enter "Ext.NET". - Inside the "Ext.NET" tab, Right-Click and select "Choose Items...".
- Under the ".NET Framework Components" Tab select the "Browse" button.
- Navigate to and select the Ext.Net.dll file, choose open, then select the "Ext.NET.dll" from the extracted download .zip package.
Ext.NET can always be downloaded from the following location, see http://www.ext.net/download/ - The component items should now be added to the list and pre-checked. You can confirm by sorting the list by "Namespace" and scrolling to "Ext.Net"
- Click "OK". The icons should be added to your ToolBox. You should now be able to drag/drop a Ext.NET component onto your WebForm.
NOTE: Visual Design Mode support is currently very limited. Future releases hope to improve on this functionality. - Enjoy.
EDIT : 2013-04-16 [geoffrey.mcgill] Update with some new information regarding NuGet package and general revisions.