Quick and dirty example of ASP.NET MVC + Ext Js

[alanl]

I posted a quick and dirty project of using Ext Js (specifically the grid) with Visual Studio 2008 and the ASP.NET MVC framework. I found it immensely helpful to read other folks' posts of their code while I was figuring out how to use the library, and hope this helps others in turn.

http://www.redgreenrefactor.com/post/Ext-Js-and-ASPNET-MVC.aspx

[genius551v]

Saludos,

Muy interesante tu descripcion y tu trabajo.

En tu imagen imagino q es una grilla q depende de otra (la de abajo de la de arriba) es justamente lo q estoy tratando de hacer para mi. Podrias postear el codigo exjs utilizado para tu aplicacion?

Gracias de antemano.

Genius551v

[franklt69]

Alanl is good to watch your example, because I can playing with MVC and Ext, but I have a doubt, yet I don't get understand the advantage that have MVC when you have an app like desktop (http://extjs.com/forum/showthread.php?t=10950) where you have only a page and all are .js file and .ashx, if the app have many aspx, is good to have separate the View of model, but don't get understand the advantage in this case, some comments is welcome.


Alanl es bueno mirar su ejemplo poque puedo jugar con MVC Y Ext, pero tengo una duda, aun no logro entender las ventajas q tiene MVC cuando se esta desarrollando una aplicacion semejante a la de desktop (http://extjs.com/forum/showthread.php?t=10950) donde ud tiene una sola pagina y toda la interface esta hecha con ficheros .js, y para poner y obtener datos uso handler (ashx) , Si la app tiene muchas paginas aspx, es bueno tener separado las paginas aspx del modelo, pero no logro entender la ventajas en casos de unas sola pagina, cualquier comentario en espanol o ingles es bienvenido.

regards
Frank

[Ephicient]

Nice example. I love the separation MVC gives us, however, it seems to me that there's unecessary overhead when using .aspx pages for JSON responses, particlarly the execution of the built in-functions like PreInit, Init, Load, etc. Another alternative might be WCF, http://extjs.com/forum/showthread.php?t=17054

[alanl]

@genius551v: I replied to you on my blog, but I'll add an answer here as well. Under Northwind.Web/Views/Customer/List.aspx, you'll find the JavaScript used to create and populate the grids.

@franklt69: That is a great point and in fact what I did with my last project was just use 1 single aspx page talking to one ashx handler for JSON requests. The main advantage of using the MVC framework in my mind would be the enhanced testability and forced separation of concerns. (http://en.wikipedia.org/wiki/Separation_of_concerns) While you can achieve the same level of testability and separation using a customer handler with domain classes behind the scenes, I feel you'd have to do more manual work to do so while the MVC framework structures everything more easily for you to achieve the same results.

The framework also gives you absolute control of URL routing so you can build REST-like (http://en.wikipedia.org/wiki/Representational_State_Transfer) services to your domain objects. Instead of something like making a call to httpHandler.ashx?method=getProducts, you can make a call to /products/list, or instead of httpHandler.ashx?method=getProduct&id=1, it'd be /product/1.

A tiny matter in the grand scheme of programming, but you can then also have the controller decide if /product/list will return JSON, XML, or just a standard HTML page listing all products depending on the incoming request. Again, these are things you can probably do with HTTP handlers but the MVC framework makes it much easier to accomplish.

Before I ramble further on, I guess the answer to your question (what advantage does MVC give me over a single page and http handlers?) is flexibility, testability, and extensibility. The MVC framework isn't right for every project out there, but I would use it over standard ASP.NET WebForms anytime.

@Ephicient: Another great point. I actually did a quick glance thru over that post using WCF and was intrigued, but did not pursue it further since I did not want to add another new technology on top of what I was doing. There are some examples of MVC and JSON that just have the controller classes Response.Writing out the JSON directly instead of passing the model to a JSON view, but in my sample project I felt it was more appropriate to have it in the view. That way the controller can display that same model data as an XML or HTML view depending on the requester. For a strict service oriented system that respond to JSON and XML requests only, I think the WCF approach definitely makes more sense.

[Ephicient]

Great info. Did you find the Response.Write examples within the Ext forums? I would be interested in your progress if you take this project further. I've found WCF to be lean and mean, however, I'm looking into standardizing our web framework (including Ext projects) on MS's MVC impmenentation (vs Monorail).

[franklt69]

other doubts, will have some implication to make an app with ext + MVC approach and then migrate it to adobe air?

for instance the example tasks.html have a version using adobe air, so will have any consequence to do that using MVC?

regards
Frank

[TheNakedPirate]

I posted a quick and dirty project of using Ext Js (specifically the grid) with Visual Studio 2008 and the ASP.NET MVC framework. I found it immensely helpful to read other folks' posts of their code while I was figuring out how to use the library, and hope this helps others in turn.

http://www.redgreenrefactor.com/post/Ext-Js-and-ASPNET-MVC.aspx


Love your avatar alanl - good example

[alanl]

@Ephicient:The Response.Write examples were found outside the Ext JS forums, here is an example using jQuery with MVC and Response.Write instead of a JSON view (http://www.chadmyers.com/Blog/archive/2007/12/13/using-jquery-with-asp.net-mvc.aspx). Basically instead of passing in a JSON view to render, you just write text out in the Controller method, acting like an HTTP Handler.

I probably won't be able to devote more time to ASP.NET MVC since I won't be using it in my next project and I'm not even sure when it will be released. I am planning on using Linq to Sql, WCF, and Ext JS in my upcoming project, with an eye towards easy migration over to the MVC architecture.

I'll update my blog with more code examples as I continue using Ext JS with .NET 3.5. I really appreciate everyone's comments and feedback, readers have found even this small code sample very useful so it's encouraged me to post more :)

@franklt69: I'm not too familiar with Adobo Air, after looking at the example and doing a quick Google, it looks like a framework to build Ajax/HTML applictions for the desktop? If so, ASP.NET MVC itself wouldn't work since the framework itself needs a web server host.

[Ephicient]

Keep us posted on your Ext and WCF progress. I'll be posting our WCF successes in the Ext forums as well.

[iTzAngel]

@Ephicient:The Response.Write examples were found outside the Ext JS forums, here is an example using jQuery with MVC and Response.Write instead of a JSON view (http://www.chadmyers.com/Blog/archive/2007/12/13/using-jquery-with-asp.net-mvc.aspx). Basically instead of passing in a JSON view to render, you just write text out in the Controller method, acting like an HTTP Handler.

I probably won't be able to devote more time to ASP.NET MVC since I won't be using it in my next project and I'm not even sure when it will be released. I am planning on using Linq to Sql, WCF, and Ext JS in my upcoming project, with an eye towards easy migration over to the MVC architecture.

I'll update my blog with more code examples as I continue using Ext JS with .NET 3.5. I really appreciate everyone's comments and feedback, readers have found even this small code sample very useful so it's encouraged me to post more :)

@franklt69: I'm not too familiar with Adobo Air, after looking at the example and doing a quick Google, it looks like a framework to build Ajax/HTML applictions for the desktop? If so, ASP.NET MVC itself wouldn't work since the framework itself needs a web server host.

im using mvc preview3, that nows supports return JSON objects to views and passed it to controllers , maybe this is a great hit for MS, by the way can you post your code are you just importing the libs like scripts or doing some more?, please post your app code

[mdissel]

I've created some server-side wrappers around the ext component and render it as json to the browser.. Using aspnet mvc at the server..

[iTzAngel]

Hi there, someones try to send a form request to a controller?, cause i cant read values from ext! :(

[iTzAngel]

Sorry but i suggest to create a main thread for MVC.net with Extjs2.1 , cause many developers from between sides are interesting in those issues, maybe i can share my enterprise webapp that im building, im parsing all htmltags provided by mvc preview3 to Extjs, i worked with ext in j2ee, but now im have troubles with the url of each submit. well ill keep watching this thread, i desire that more people being involved in this.
{Sorry about my english}

[watrboy00]

I am currently using DataContracts and the DataContractJsonSerilizer in .net3.5 with a custom HttpHandler to push the json objects to ext js.

One benefit of MVC is the url rewriting comes with it automatically. I have another custom module that handles all the REST implementation.

[iTzAngel]

I am currently using DataContracts and the DataContractJsonSerilizer in .net3.5 with a custom HttpHandler to push the json objects to ext js.

One benefit of MVC is the url rewriting comes with it automatically. I have another custom module that handles all the REST implementation.

so i Do, but for example for send a form with values to the controller, where i specify the controller or the route?


buttons: [{
text:'Registrar',
handler: function(){

if (form.getForm().isValid()) {
form.getForm().submit();
Ext.MessageBox.alert('saving', 'saving..');
}else{
Ext.MessageBox.alert('Errors', 'Please fill in fields before saving..');
}

}

},{
text: 'Cancel',
handler: function(){ form.getForm().reset();}


}]


});

form.render(document.body);
});
}

[alanl]

Wow, I'm surprised this thread is still generating so much interest. Unfortunately I haven't had time to play with the new MVC preview builds and update my example, however I am getting alot more comfortable using Ext JS. I'll see if I can post a more full featured CRUD type app with the new bits in the next few days.

[alanl]

A friend of mine has updated my example to build and work with the latest ASP.NET MVC Preview 3 bits, you can find it here (http://redgreenrefactor.com/post/Updated-Ext-JS-example-for-ASPNET-MVC-Preview-3.aspx).

[iTzAngel]

Hi there, this is a great example, maybe you can use the mvc helper about json view returns, im trying to finish with preview 2 all my app then maybe ill mind to move it to preview3, the differences are minors cause i was using mvc codeplex templates, preview2 like preview 3 :))