Extjs. Direct. MVC Configuration

Configure and use Ext. Direct. MVC 2.2 in the. net mvc framework,

Original webpage: http://code.google.com/p/ext-direct-mvc/wiki/ConfiguringAndUsing

But I cannot access it now. There is an updated version.

Introduction

To start using Ext. direct. MVC download the binaries, extract the files from the archive, and add references to newtonsoft. JSON. DLL and the right version of Ext. direct. MVC. DLL (depending on what version of ASP. net MVC you chose) in you ASP. net MVC project. I recommend that you read everything on this page to avoid any potential problems you may run.

Here is a quick explanation of how Ext. direct. MVC works. once you have configured everything correctly in web. config file as described below in the configuration section, and stored ded API via a script tag, the API component of Ext. direct. MVC will generate client-side stubs (descriptors) for your controller actions based on the generation method. then you can seamlessly call your server-side methods as if they were client-side methods. read further for details.

Requirements

• . Net 3.5
• ASP. NET MVC
• JSON. Net 3.5 release 8 (encoded)
• Visual Studio 2010 (if you want to run the demo APP)

Configuration

In your web. config file addExt. DirectSection as follows:

 <  Configuration  > 
 <  Configsections  > 
 <  Section name  = "Ext. Direct"  Type  = "Ext. Direct. MVC. configuration. directsection, ext. Direct. MVC" /> 
 </  Configsections  > 
 <  Ext. Direct
  Providername  = "Ext. App. remoting_api"  
Assembly  = "[Assembly name of your project ]"  
  /> 
...
 </  Configuration > 

Available optionsExt. DirectSection are:

• Providername-Required. Name for the generated API provider config.
• Assembly-Required. Name of the Assembly that contains the controllers to generate API, usually the name of your MVC web project assembly. Multiple Assembly names can be separated by commas.
• Namespace-Optional. namespace for the provider.
• Descriptorgeneration-Optional. Specifies client-side descriptors generation method. The value is case-sensitive and can be one of the following:
• Optout-Default. client-side descriptors are generated for all controller actions. undesired controllers or actions can be excluded by marking them[Directignore]Attribute.
• Optin-Client-side descriptors are generated only for controllers and actions that are marked with[Directinclude]Attribute.
• Buffer-Optional. Amount of time in milliseconds to wait before sending a batched request. Default to 10.
• Dateformat-Optional. format to use by default when serializing dates. supported values are "ISO" and "JavaScript ". if not set or has value other than supported, then M $ format is used by default.
• Debug-Optional. boolean that indicates whether to include full stack trace in the exception response when an intercepted server exception is returned to the client. default to false. this option shoshould never be set to true in production environment because of security concerns. read about handling exceptions in the "server-side exceptions" section below.

Usage

1. include the API component via a script tag in the head of your main application page. the server-side will dynamically generate JavaScript code to be executed on the client-side. it is recommended to specify API path relative to the root of your app:

 
<ScriptType= "Text/JavaScript"SRC= "<% = URL. Content ("~ /Direct/API ") %>"> </SCRIPT>
 

2. the API component outputs an object literal of method invocations with the name that you usedProvidernameOption in your web. config (in this example Ext. App. remoting_api), so to register the provider you add the following code in your application's initialization function:

 
Ext. Direct. addprovider (ext. App. remoting_api );
Or (according to which version of extjs you're using)
Ext. Direct. Manager. addprovider (ext. App. remoting_api );
 

3. Write controller and actions as usual, but make sure the actions return an instanceDirectresultClass. For your convenience I have created a few overloaded helper extension methods calledDirect ()For controller class, so to return data from a controller action you can use the following syntax:

UsingExt. Direct. MVC;

NamespaceMymvcapplication {
Public ClassEmployeescontroller: controller {
PublicActionresult get (IntID ){
//Method logic here
//VaR Employee =...
Return This. Direct (employee );
}
}
}
 

The return value is serialized to JSON by newtonsoft JSON. Net Library, which is encoded in the Downloaded archive.

4. by default Ext. direct. MVC generates client-side descriptors using optout method (read about this in the configuration section abve ). if you chose this method, then Mark controllers and actions, for which you don't want client-side descriptors to be generated,[Directignore]Attribute. You can change the descriptor generation method to optin in your configuration file. This way client-side Descriptors will be generated only for controllers or actions marked[Directinclude]Attribute.

Important:If you created your MVC project from an MVC Web Application Template, it will contain two default controllers-homecontroller and accountcontroller. in most cases you will not want client-side proxy methods to be generated for these controllers, So if you keep them in your project and you use the default optout descriptor generation method, do not forget to mark them[Directignore]Attribute to avoid problems. At the very least the accountcontroller, since it contains duplicate action names.

5. To call a server-side method from your ext JS Code use syntax similar to this:

Employees. Get (1234, Function (result, response ){
//Process the result
});
 

WhereEmployeesMapsEmployeescontrollerClass andGetTo the action in that controller. And if you specified a value forNamespaceOption in the web. config, then your call will look something like this:

 
Yournamespace. Employees. Get (...);
 

6.[Formhandler]AttributeMustBe used to mark controller actions, that will be called to process form submits. if you fail to do so, ext. direct will send a regular POST request (as opposed to form post) to this action, and you can have hard time trying to figure out why it is doing it. please keep it in mind.

7.[Actionname]Attribute can be used to assign an alias to an action. it instructs Ext. direct. MVC to use the specified alias instead of action name when creating client-side stub for an action marked with this attribute. it is useful if you want to have overloaded actions in a controller. if you mark an action with this attribute, make sure you use the specified name when calling the method from your JS Code.

Server-side exceptions

By default no server-side exception are intercepted failed t the SpecialDirectexception. WhenDirectexceptionIs thrown on the server, a direct response of type "exception" is returned to the client. it is possible, however, to intercept all server-side exceptions in a controller or a single action and return them to the client as exception response. to do this you need to mark either the whole controller or individual actions[Directhandleerror]Attribute. Like this:

[Directhandleerror]
PublicActionresult myaction (){
//...
Throw NewException ("Something bad happened!");
//...
}
 

Exception response on the client can contain the following members:

• type -"exception"
• TID -the transaction id
• action -the action that has been called
• method -the method that has been called
• message -the error message
• where -the full stack trace from the server only if debug Configuration option is true
• result -Simple Object with only" success "boolean property for form posts only
• errordata -user-defined information about the exception only if provided

TheErrordataIs copied from exception. Data. to read about exception. Data and how to set it see http://msdn.microsoft.com/en-us/library/system.exception.data.aspx

You can handle a server-side exception on the client either in an individual callback function

Employees. Get (1234, Function (result, response ){
If(Response. type ="Exception"){
//Process the exception here
}
//Process the result
});
 

Or globally

Ext. Direct. On ('Exception', Function (e ){
Alert (E. Message );
});
 

Server-side events

Ext. direct supports custom server-side events. you can return a Custom Event object from the server by calling one of the directevent () extension methods of controller class and handle it on the client as described in the documentation to Ext. direct class in "Server Side Events" section: http://dev.sencha.com/deploy/dev/docs? Class = ext. Direct