What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

26Dec/121

ASP.NET MVC4 Stripped

I've been ramping up on Microsoft's latest and greatest ASP.NET MVC4 and while I love the technology, I hate the tight integration into Visual Studio. I could not find a single example that did not require a compilation of a DLL by Visual Studio.

I'm used to my Just in Time compiling, so I went hard to work at ripping out the Visual Studio umbilical cord and was able to produce a (what I think is) much cleaner setup. Most of all, it doesn't require re-compiling every time, so you don't need Visual Studio!

VS

I should warn that this doesn't have the "view" or "model" hookups; just the controller - with the default "Values" example. Since I work with ExtJS it's mainly the Web API enabled by the controller that I'm after.

Download: MVC4Test (Stripped) (~2 MB)

INSTALLATION INSTRUCTIONS
- Install .NET 4.5 (I used MS Web Platform Installer)
- Make sure IIS application pool runs under .NET 4.0
- Make sure .NET 4 is allowed in IIS (CGI Restrictions)
- Install ASP.NET MVC 4 - I did not use MS Web Platform Installer, as it will also want to install a SQLExpress database; instead I used stand-alone installer (http://www.asp.net/mvc/mvc4)

 

VN:F [1.9.22_1171]
Rating: 7.0/10 (5 votes cast)
Tagged as: , , , 1 Comment
9Apr/122

ExtJS4 Combo & ASP.NET MVC3

First see basic ExtJS4 & ASP.NET MVC3 setup tutorial

In this example I will demonstrate just how easy it is to implement a type-ahead dropdown that will ping the server over AJAX every time a user types something in, and show a list of results with rich markup. It's amazing just how easy it is to do this with ASP.NET MVC3 and ExtJS4 data stores.

The end result looks something like this:

VN:F [1.9.22_1171]
Rating: 7.5/10 (8 votes cast)
2Apr/120

ExtJS4 & ASP.NET MVC3 Dictionary

See my previous example on getting ExtJS4 working with ASP.NET MVC3

Back when I used to work with ASP.NET AJAX Extensions 1.0 (5 year old tech), I used to do the following all the time:

JavaScript

Ext.Ajax.request({
	url: ...
	, jsonData: { data: form.getForm().getValues() }
	...
}); // eo Ajax

ASP.NET AJAX Extensions 1.0

[WebMethod(EnableSession = true)]
public static void MyWebMethod( Dictionary<string,object> data )
{
	...
}

...ASP.NET AJAX Extensions 1.0 handled the conversion of data from JSON to C# Dictionary, which is a pleasure to work with. To my great disappointment, I discovered that ASP.NET MVC3, the latest and greatest, won't do that for you! I had to find a solution...

VN:F [1.9.22_1171]
Rating: 9.1/10 (7 votes cast)
20Mar/124

ASP.NET MVC3 & ExtJS4 Errors

In my previous post I presented an example of a basic ASP.NET MVC3 controller connecting to an ExtJS4 data store and passing some data in XML format via store's load method.

So far I've run into just one issue with this setup - clean error handling. By default, ASP.NET MVC will spit out any exceptions in clear text (with <html> tags and everything), which is not very useful when building a quality web application. Here's what I want on my errors:

VN:F [1.9.22_1171]
Rating: 9.4/10 (7 votes cast)
12Mar/120

ASP.NET MVC3 XML & ExtJS4

In this example I will demonstrate how to use an ExtJS4 store to perform an XML data read from an ASP.NET MVC3 controller. First let me say that I wasted a LOT of time reading fake tutorials on these keywords - seems there are a lot of people who can explain the ASP.NET MVC3 side, but not how to actually connect it to an ExtJS4 store using a clean proxy, AND pass parameters to the server. Especially using XML for the return data.

So, let's say we just want a basic search box - when user types something in and hits Search, we will use an ExtJS4 store and POST to an ASP.NET MVC3 method, passing the search query as a JSON parameter, while returning results in XML. Here's the basic ExtJS model & store configuration:

// Basic model
Ext.define('MY.model.SearchResult', {
	extend: 'Ext.data.Model',
	fields: ['id','html']
});
 
// Basic store
Ext.create('Ext.data.Store',{
	model: 'MY.model.SearchResult',
	proxy: Ext.create('MY.proxy.MSAjaxProxy', {
		url: '/User/Search',
		reader: { type: 'xml', root: 'matches', record: 'match' }
	}) // eo proxy
}) // eo store
VN:F [1.9.22_1171]
Rating: 7.6/10 (8 votes cast)
Page 1 of 3123