The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Ext.NET 4 on Visual Studio 2010

  1. #1

    Ext.NET 4 on Visual Studio 2010

    If you have Visual Studio 2010 and checked out Ext.NET 4, you'll see that it no longer supports VS2010 (chapter one here).

    But not all is lost! There's still ways to get Ext.NET up and running if you really can't afford to upgrade to any of the newer Visual Studio versions -- although we can't guarantee you everything is going to work, beginning with outdated libraries and infrastructure.

    Before we can even think on upgrading, we need to check whether the NuGet extension for VS2010 is up-to-date. If not, and your version is too old, you won't be able to install Ext.NET package at all. It should not be too hard to upgrade NuGet extension though.

    If you open the NuGet package manager dialog and there's an update, chances is that it will warn you on the dialog itself. But in the case you want to go directly to the point (or you just don't have the extension yet), you have to get to the Extension Manager dialog (Tools > Extensions Manager).

    There you can either upgrade or install the NuGet extension thru the online gallery. You should have something like this in the end:

    Click image for larger version. 

Name:	002-nuget_extension.png 
Views:	6 
Size:	65.9 KB 
ID:	24844

    Now we can proceed with the new project and Ext.NET installation.

    For the project, we are going to use the barest minimum, an empty Web Application. We have set it up via the File > New Project... menu like this:

    Click image for larger version. 

Name:	001-newProject.png 
Views:	4 
Size:	82.1 KB 
ID:	24845

    Then we need to add the Ext.NET NuGet package. First open the NuGet package manager dialog for the project we just created:

    Click image for larger version. 

Name:	003-manage_nuget_packages.png 
Views:	3 
Size:	46.1 KB 
ID:	24846

    Then, locate the Ext.NET package. There are other packages for MVC (and the corresponding MVC version) but we're going with just the WebForms one, for simplicity.

    Click image for larger version. 

Name:	004-find_extnet.png 
Views:	3 
Size:	65.8 KB 
ID:	24847

    Once you start installation, it will check dependencies and ask you to accept. Please review the license agreements for the packages (the licenses are there for a reason, right?). If all good, accept the terms to proceed with the installation.

    Click image for larger version. 

Name:	005-accept_license.png 
Views:	4 
Size:	25.1 KB 
ID:	24848

    Then you should have Ext.NET installed and showing you its readme file.

    All looking good, let's then open the example Ext.NET ASPX file for editing. On next post due to image amount limit per post. :)
    Last edited by fabricio.murta; Feb 09, 2017 at 1:58 PM.
  2. #2
    Then, to our aspx file:

    Click image for larger version. 

Name:	006-open_example_aspx.png 
Views:	4 
Size:	10.5 KB 
ID:	24849

    After opening then, a not so fortunate surprise! Errors in the console!

    Click image for larger version. 

Name:	007-errors_in_console.png 
Views:	3 
Size:	22.9 KB 
ID:	24850

    The fearsome red squiggles on server code:

    Click image for larger version. 

Name:	008-errors_code_behind.png 
Views:	2 
Size:	7.3 KB 
ID:	24851

    And green squiggles on ext: tags as well!

    Click image for larger version. 

Name:	009-errors_webforms_tags.png 
Views:	3 
Size:	16.8 KB 
ID:	24852

    If we just build the solution, all works just fine. But nevertheless, can't run the page, as we are going to show in the next post.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    And here, the result when we run the page (without debugging, just so that we can use the browser's (IE11 in this case) debugging tools:

    We have errors like "Ext" is undefined, strange text in the page instead of Ext.NET components:

    Click image for larger version. 

Name:	010-script_errors.png 
Views:	5 
Size:	73.2 KB 
ID:	24853

    And when we let the page finish loading, the view is far from what we wanted it to look:

    Click image for larger version. 

Name:	011-page_broken.jpg 
Views:	2 
Size:	58.8 KB 
ID:	24854

    So then we have to fix this. As VS2010 needs some extra settings in order to work, we have to adjust it. Let's open Web.config then to investigate if there's some hint on why it does not work on VS2010...

    The Web.config file is not very long here, so there's not much to investigate. Only 40 lines long. But at a first glance, there's something that jumps over the rest: a block of commented code, that mentions IIS6. That in fact is the IIS version for the times VS2010 was the "current IDE".

    Click image for larger version. 

Name:	013-comments_on_webconfig.png 
Views:	1 
Size:	18.6 KB 
ID:	24855

    So then, let's uncomment this and see what happens. I expect VS2010 to be using IIS Express 6 anyway...

    This is how the Web.config file will look like after uncommenting (not reindenting):

    Click image for larger version. 

Name:	014-comments_removed.png 
Views:	1 
Size:	20.3 KB 
ID:	24856

    So now, let's save it (in the shot above we just saved the Web.config file after removing the comments) and check how's the code.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    I didn't even need to close and re-open the file, it was already looking good as I just tabbed back to it.

    No red squiggles:

    Click image for larger version. 

Name:	015-code_behind_okay.png 
Views:	1 
Size:	7.4 KB 
ID:	24857

    Oh! And no green squiggles either!

    Click image for larger version. 

Name:	016-green_squiggles_gone.png 
Views:	1 
Size:	16.5 KB 
ID:	24858

    So let's just jump back at the page we opened and refresh it and...

    Click image for larger version. 

Name:	017-page_loaded.png 
Views:	5 
Size:	57.9 KB 
ID:	24859

    Crystal clear console! Notice the red arrows with text were added by me to illustrate the page, you won't be seeing them on your side if you try and follow this guide! :)
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. visual studio 2010
    By Pfuentes in forum 1.x Help
    Replies: 2
    Last Post: Sep 09, 2011, 7:16 PM
  2. [CLOSED] Visual Studio 2010
    By T3rryChan in forum 1.x Premium Help
    Replies: 1
    Last Post: Aug 25, 2011, 8:18 PM
  3. Visual Studio 2010
    By speddi in forum 1.x Help
    Replies: 2
    Last Post: Oct 11, 2010, 1:42 PM
  4. Visual Studio 2010
    By Kaido in forum 1.x Help
    Replies: 2
    Last Post: Aug 12, 2010, 8:17 PM
  5. Visual Studio 2010
    By drgw74 in forum Open Discussions
    Replies: 7
    Last Post: Jun 24, 2010, 7:59 AM

Tags for this Thread

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.