How-to setup Ext.NET 2.0 in a VS2012 MVC4 Project?

Question

i have high doubts that my question will be answered, but i'll try here since my frustration levels are so high that maybe it will help myself lower them!

So, what i want to do is:

• Install VS2012 from scratch (okey, click .exe and go!)
• Create a new MVC4 project
• Use Razor View Engine (it's the default nowadays)
• MAKE EXT.NET 2.0 WORK WITH THE ABOVE

This is gonna be a feature of Ext.NET 2.1, as all the requirements will be packetized in a nuGet package, the only problem is that me, as other few developers would like to use those things that already do work right now

What i've succeded doing right now:

• Following this thread i've setup web.config correctly!
• Make VS2012 to recognize the Ext.Net reference

Here's how:

• Create new project, select a Basic/Empty/Internet Application templates
• In resources of your project, add a reference to Ext.NET.dll (browse, find etc)
• Edit web.config in such way:

http://diffchecker.com/v99ScX0x

• Edit Views/web.config in such way:

http://diffchecker.com/7UEK058Y

I hope diffchecker is clear enough to let you understand, anyway the changes are the SAME in both files, they have to be so!

• Add the following line in App_Start/RouteConfig.cs

routes.IgnoreRoute("{exclude}/{extnet}/ext.axd");

• Now i continue following the thread i've linked above
• Create controlled named "Examples" -> ExamplesController.cs, no modifications needed here
• Create the above controller's view. So Views/Examples/Index.cshtml

There i have edited the page a bit, to make it a bit more MVC-style, it's nothing big really. Entire page follows:

@{
    ViewBag.Title = "Infinite Scrolling - Ext.NET Examples";
}

@Html.X().ResourceManager()

<h1>Infinite Scrolling</h1>
<p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
<p>The GridPanel uses a new virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
<br />

@(Html.X().GridPanel()
    .Title("Stock Price")
    .Height(500)
    .Width(500)
    .InvalidateScrollerOnRefresh(false)
    .DisableSelection(true)
    .Store(store => store.Add(Html.X().Store()
        .PageSize(100)
        .Buffered(true)
        .AutoLoad(false)
        .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                    .Url("/Data/GetData/")
                    .Reader(reader => reader.Add(Html.X().JsonReader()
                                .Root("data")
                            ))
                    ))
        .Model(model => model.Add(Html.X().Model()
                    .Fields(fields => {
                        fields.Add(Html.X().ModelField().Name("Company")); 
                        fields.Add(Html.X().ModelField().Name("Price"));
                        fields.Add(Html.X().ModelField().Name("LastUpdate").Type(ModelFieldType.Date));
                    })
                ))
        ))
    .VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))      
    .ColumnModel(columnModel => {
        columnModel.Columns.Add(Html.X().RowNumbererColumn().Width(50).Sortable(false));
        columnModel.Columns.Add(Html.X().Column()
                                        .Text("Company")
                                        .DataIndex("Company")
                                        .Flex(1));
        columnModel.Columns.Add(Html.X().Column()
                                        .Text("Price")
                                        .DataIndex("Price")
                                        .Width(70));
        columnModel.Columns.Add(Html.X().DateColumn()
                                        .Text("LastUpdate")
                                        .DataIndex("LastUpdate")
                                        .Width(140)
                                        .Format("HH:mm:ss"));
    })
    .View(view => view.Add(Html.X().GridView().TrackOver(false)))
    .Listeners(listeners => {
        listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
        listeners.AfterRender.Delay = 100; 
    })
)

• Then i've added another controller in order to make it work, EXACTLY as thread says
• Add DataController.cs as referred here SUBSTITUING AjaxStoreResult WITH StoreResult

• DataController.cs also needs

  using Ext.Net.MVC;

So here am I!
If you start your IIS Express now you can execute the page in localhost:XXXXX/Examples/

First issue i have is: the page tries to load localhost:XXXX/extjs/ libraries, that's NOT MVC-STYLE!

This is done by @Html.X().ResourceManager(), there is a way to make it connect to cdn libraries ? or even change path!??

After that probably other problems will arise, but for now i would like to resolve this small painful issue

Answer 1

Based on the Web.config files you linked to above, I think you're missing the required <modules> and <handlers> sections in the Web.config. The required Web.config sections are listed in the README.txt.

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

Here's the appropriate <system.webServer> section from the sample Web.config.

Example

<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>

I don't know what "that's NOT MVC-STYLE" means in the following quote. Can you provide more explanation?

First issue i have is: the page tries to load localhost:XXXX/extjs/ libraries, that's NOT MVC-STYLE!

You can prevent the Ext.NET ResourceManager from rendering the required .js and .css files by setting .RenderScripts(ResourceLocationType.None) and .RenderStyles(ResourceLocationType.None).

Example

@Html.X().ResourceManager()
    .RenderScripts(ResourceLocationType.None)
    .RenderStyles(ResourceLocationType.None)

You can configure the ResourceManager to load the CDN files by changing the ResourceLocationType.None attribute to ResourceLocationType.CDN.

Hope this helps.