Modified form submission app in ExtJs 5.0, MVC Web Api, Entity Framework 6 in ASP.NET

I have modified Simple application using ExtJs 5.0 (one of my previous post) using Entity framework 6, MVC Web Api, Ext Js 5.0, VS 2013. (With create, read functions in database). 

I can share the tutorial with you if requested.

https://drive.google.com/folderview?id=0B50nOWpE-RyLNG5BeFIxcWthZzQ&usp=sharing_eid

Grid creation in ExtJs

Again this is a learning purpose application and this is not the best approach. But for a beginner this will be fine. :)

My task is to build a grid from data returned by a ASP.NET MVC4/5 action method. Action method should return data encoded in JSON format similar to below.

{
   "success":true,
   "data":[
      {
         "Id":1,
         "Name":"Fixed",
         "Value":0,
         "ShortName":"Fix",
         "Description":"Issue is fixed and completed",
         "Color":"A4C400",
         "DomainId":0
      },
      {
         "Id":2,
         "Name":"Can not reproduce",
         "Value":0,
         "ShortName":"CantReprod",
         "Description":"Reported issue can not be repoduced",
         "Color":"60A917",
         "DomainId":0
      },
      {
         "Id":3,
         "Name":"Incomplete Data",
         "Value":0,
         "ShortName":"Incomplete",
         "Description":"Issue description is not enought",
         "Color":"FA6800",
         "DomainId":0
      },
      {
         "Id":4,
         "Name":"Expected Behaviour",
         "Value":0,
         "ShortName":"ExpctdBhvr",
         "Description":"This is expected behaviour under the normal circumstances",
         "Color":"6D8764",
         "DomainId":0
      }
   ]
}

My out put looks like below.

In my previous post related to ExtJs http://nalanijayasundara.blogspot.com/2014/09/simple-application-using-extjs-50.html I have described to set up the environment to run this kind of application in VS2012. So please have a look upto 3rd point.And then follow from here.

4. 4.1 . I have created my model as Color.js 

Ext.define('Assingment.model.Color', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Value', type: 'int' },
        { name: 'DomainId', type: 'int' },
        { name: 'Colour', type: 'string' },
        { name: 'Name', type: 'string' },
        { name: 'ShortName', type: 'string' },
        { name: 'Description', type: 'string' }
    ],
 
    schema: {
        namespace: 'Assingment.model',
        urlPrefix: '/Home/GetColorInformation',
        proxy: {
            type: 'ajax',
            url: '/Home/GetColorInformation',
            reader: {
                type: 'json',
                rootProperty: 'data'
            },
            extraParams: {
                name: ' '
            }
        }
    }
});

4.2 view/main/Main.js is like this.

Ext.define('Assingment.view.main.Main', {
    extend: 'Ext.form.Panel',
    requires: ['Assingment.model.Color'],
    xtype: 'app-main',
    referenceHolder: true,
    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    items: [
    {
        xtype: 'form',
        bind: '{main}',
        items: [
            {
                xtype: 'grid',
                bind: '{grid}',
                reference: 'fooPanel',
                columns: [
                    {
                        text: "Colour",
                        width: 120,
                        dataIndex: 'Colour',
                        renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                            metaData.style = 'background-color: #' + record.data.Colour;
                        }
                    },
                    { text: "Name", width: 380, dataIndex: 'Name' },
                    { text: "Short Name", width: 380, dataIndex: 'ShortName' },
                    { text: "Description", width: 380, dataIndex: 'Description' }
                ],
                buttons: [
                    {
                        text: 'UpdateGrid',
                        handler: 'onClickButton',
                    }
                ],
            }
        ]
    }]
});
4.3. view/main/MainCOntroller.js is like this.
Ext.define('Assingment.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [
        'Ext.MessageBox'
    ],

    alias: 'controller.main',

    onClickButton: function () {
 
        var grid = this.lookupReference('fooPanel');
        var store = grid.getStore();
        store.load();
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    }
});
4.4.view/main/MainModel.js where 'Color' is located in root Models/Color.cs
Ext.define('Assingment.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    requires: ['Assingment.model.Color'],
    alias: 'viewmodel.main',

    data: {
        name: 'Assingment'
    },
    stores: {
        grid: {
            model: 'Color'
        }
    }
    
});

4.5 Color.cs contains follows.
namespace Assignment2.Models
{
  public class Color
  {
    public string Colour { get; set; }
    public string Name { get; set; }
    public string ShortName { get; set; }
    public string Description { get; set; }
    public int Id { get; set; }
    public int Value { get; set; }
    public int DomainId { get; set; }
 
    public Color() { }
 
    public Color(int id, string Name, int Value, string ShortName)
    {
      this.Id = id;
      this.Name = Name;
      this.Value = Value;
      this.ShortName = ShortName;
    }
  }
}
4.6. Root Controllers/HomeControllers.cs contains the action method like this.
using System.Collections.Generic;
using System.Web.Mvc;
 
using Assignment2.Models;
 
using Newtonsoft.Json;
 
namespace Assignment2.Controllers
{
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }
 
    [HttpGet]
    [AllowAnonymous]
    public ActionResult GetColorInformation()
    {
 
      return this.JsonResponse(
        new
        {
          success = true,
          data = new List<Color>
          {
            new Color
            {
              Id = 1,
              Name = "Fixed",
              Value = 0,
              ShortName = "Fix",
              Description = "Issue is fixed and completed",
              Colour = "A4C400",
              DomainId = 0
 
            },
            new Color()
            {
              Id = 2,
              Name = "Can not reproduce",
              Value = 0,
              ShortName = "CantReprod",
              Description = "Reported issue can not be repoduced",
              Colour = "60A917",
              DomainId = 0
            },
            new Color()
            {
              Id = 3,
              Name = "Incomplete Data",
              Value = 0,
              ShortName = "Incomplete",
              Description = "Issue description is not enought",
              Colour = "FA6800",
              DomainId = 0
            },
             new Color()
            {
              Id = 4,
              Name = "Expected Behaviour",
              Value = 0,
              ShortName = "ExpctdBhvr",
              Description = "This is expected behaviour under the normal circumstances",
              Colour = "6D8764",
              DomainId = 0
            },
          }
        });
    }
 
    protected ContentResult JsonResponse(object response)
    {
      return new ContentResult { Content = JsonConvert.SerializeObject(response), ContentType = "application/json", ContentEncoding = System.Text.Encoding.UTF8 };
    }
  }
}

Following is my folder structure in VS.



That's it. Now you can run in VS and see the grid content when pressing the button "UpdateGrid" in the browser.

Simple application using ExtJs 5.0

First I would like to tell that I am new to ExtJs development. So this is not the best solution for this kind of requirement. I have tried this example as an learning task.

Building a contact form as shown in the image.

Requirements:

1. Include the fields as in the image.

2.Contact purpose should be [General, Sales, Support]

3.Client side should be in ExtJS, ASP.NET MVC4/5, and server side should be ASP.NET Web API

4.Client side code should be based on Sencha CMD generated application.

5.Upon successful submit, user should get a message from the server. “Your message have been received”. Show it using a MessageBox to user.

6.All fields are required and email should be validated on client side.

1. First I have installed ExtJs with the help of the following link.

http://docs.sencha.com/extjs/5.0/getting_started/getting_started.html

Now I have it in my system PATH variable. So I can run and compile using command prompt.

Then create the relevant files using the following command and you can see the relevant generated files in the location you have given.

sencha generate app -ext Assingment D:/Sencha/SenchaProjects/Assingment

2. Then create ASP.NET Web API project in Visual Studio and copy the content of above assignment folder into the project you have created in VS.

3. To make run in the browser the generated application using Sencha CMD as it is, do the following changes.

i. Copy and paste the following code in your Index.cshtml located in View/Home folder.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>ProjectManagement</title>
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
    
   @* <script type="text/javascript" src="~/app.js"></script>*@
   
</head>
    <body class="body">
    </body>
</html>

ii. To enable jason MIME type, copy and paste the following change in your global Web.config file.

<staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
 </staticContent>

Now you see the generated application above in your browser.

4. Then do the necessary changes to make your task to get completed.

4.1 . I have created my model as Contact.js 

Ext.define('Assingment.model.Contact', {
    extend: 'Ext.data.Model',
    alias: 'model',
    fields: [
        { name: 'Name' },
        { name: 'Company' },
        'Email',
        'ContactPurpose',
        'Subject',
        { name: 'Description' }
    ],
 
    schema: {
        namespace: 'MyApp.model',
        urlPrefix: '/Home/SubmitInformation',
        proxy: {
            api: {
                read: '{prefix}/{entityName:uncapitalize}',
            },
            reader: {
                type: 'json',
                sucess: 'model.success'
            },
            extraParams: {
                name: ' '
            }
        }
    }
});

4.2. view/main/Main.js is like this.

var namestore = new Ext.data.SimpleStore({ fields: ['contactPurpose'], data: [['General'],['Sales'],['Support']] });
 
Ext.define('Assingment.view.main.Main', {
    extend: 'Ext.form.Panel',
 
    
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
 
 
    title: 'Contact Form',
    height: 1000,
    width: 1000,
    bodyPadding: 10,
    layout: 'form',
 
    items:[
        {
            xtype: 'form',
            reference: 'fooForm',
            bind: '{main}',
            items:
            [
                {
                    fieldLabel: 'Name',
                    name: 'name',
                    xtype: 'textfield',
                    bind: '{Name}'
                },
                {
                    fieldLabel: 'Company',
                    name: 'company',
                    xtype: 'textfield',
                    bind: '{Company}'
                },
                {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    fieldStyle: 'background-color: #F7FE2E; background-image: none;',
                    displayField: "email",
                    xtype: 'textfield',
                    bind: '{Email}'
                },
                {
                    xtype: 'combobox',
                    fieldLabel: 'Contact Purpose',
                    displayField: 'contactPurpose',
                    name: "contactPurpose",
                    store: namestore,
                    bind: '{ContactPurpose}'
                },
                {
                    fieldLabel: 'Subject',
                    name: 'subject',
                    displayField: "subject",
                    fieldStyle: 'background-color: #F7FE2E; background-image: none;',
                    xtype: 'textfield',
                    bind: '{Subject}',
                    width: 450
                },
                {
                    xtype: 'textareafield',
                    grow: false,
                    width: 450,
                    bodyPadding: 10,
                    name: 'description',
                    fieldLabel: 'Description',
                    autoScroll: true,
                    bind: '{Description}'
                }
            ],
            buttons: [
                {
                    text: 'Submit',
                    formBind: true,
                    handler: 'onClickButton',
                }]
        }]   
});

4.3. view/main/MainCOntroller.js is like this where I call the action method in Home controller as url: /Home/SubmitInformation with POST request.

Ext.define('Assingment.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    requires: [
        'Assingment.model.Contact'
    ],
    alias: 'controller.main',


    onClickButton: function() {
        var form = this.lookupReference('fooForm');
 
        if (form.isValid()) {
            url:
                form.submit({
                    url: '/Home/SubmitInformation',
                    method: 'POST',
                    success: function (form, action) {
                        var data = Ext.JSON.decode(action.response.responseText);
                        Ext.Msg.alert('Success', data.data);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result ? action.result.msg : 'No response');
                    },
                    params:
                    {
                        view: 'sencha',
                        json: true
                    }
                });
        }
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    }
});

4.4.view/main/MainModel.js where 'ContactInformation' is located in root Models/ContactInformation.cs

Ext.define('Assingment.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        name: 'Assingment'
    },
    stores: {
        model: 'ContactInformation'
    },
});
4.5 ContactInformation.cs contains follows.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace Assingment.Models
{
  public class ContactInformation
  {
    public string Name { get; set; }
    public string Company { get; set; }
    public string ContactPurpose { get; set; }
    public string Description { get; set; }
    public string Subject { get; set; }
    public string Email { get; set; }
 
    public ContactInformation()
    {}
 
    public ContactInformation(string Name, string Company, string ContactPurpose,string Description, string Subject, string Email)
    {
      this.Name = Name;
      this.Company = Company;
      this.ContactPurpose = ContactPurpose;
      this.Description = Description;
      this.Subject = Subject;
      this.Email = Email;
    }
  }
}
4.6. Root Controllers/HomeControllers.cs contains the action method like this.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
using Assingment.Models;
 
using Newtonsoft.Json;
 
namespace Assingment.Controllers
{
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }
 
    [HttpPost]
    [AllowAnonymous]
    public ActionResult SubmitInformation(ContactInformation col)
    {
 
      return this.JsonResponse(
        new
        {
          success = true,
          data = "Your message have been received",
 
        });
    }
 
    protected ContentResult JsonResponse(object response)
    {
      return new ContentResult { Content = JsonConvert.SerializeObject(response), ContentType = "application/json", ContentEncoding = System.Text.Encoding.UTF8 };
    }
 
  }
}
Following is my folder structure in VS.



That's it. Now you can run in VS and see the form in the browser.

This is the output.





Hope you this will help for you. :) You can try improve this example.