Hello World in Ext JS and ASP.Net MVC4

Javascript based frameworks has been evolving of late and one of the prominent among them is External Javascript, better known as Ext JS. Unlike some of its competitors like Angular JS, Ext JS distinguishes itself with a rich suite of UI components. It is cross browser compatible. I am delving more into details of Ext JS, and as always, jumping right into the code.

For this post, we would be referring the online version of the ExtJS libraries.

Ok Tim to do some coding. Let’s start by creating a MVC application in Visual Studio.

image

Now open your ‘\Shared\_Layout.cshtml’ and add the following code in the ” section.

These lines refers and includes the CSS styles and ExtJS library. Like mentioned earlier in the post, we would be referring on-line version in this tutorial.  The next step is to add the script to call our Hello World Message box.

 

        Ext.onReady( function () {

            Ext.Msg.alert( “Alert” , “Hello world!” );

        });

 

Entire ‘ Section would look like

image

That’s it. You are done. Kick off the application and you will see your first application in ExtJS using Asp.Net

image

Specifying singular table names

Entity Framework usually generates Tables with plural names. For example, a Student class would generate a table Students. This could be a little inconvenience for teams who insists on plural names. The solution is to override the ‘OnModelCreating’ Method to remove the plural features.

image

This would ensure plural names are used in every concerned Context. Now the question is, what if we need to give plural name only for selected table names.

image

This would ensure that the Standard Table is created with a plural name. Overriding OnModelCreating is very useful method to have when you need to provide customization of tables that is being generated by Entity Framework.