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.
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.
Please contact me at eriveraa@gmail.com. I have some questions to you. Thanks.
ReplyDeleteHi Nalani, could you please make this same example with extjs 4.x , asp.net mvc 5 and visual studio 2013?. It will help me a lot. Thanks in advance.
ReplyDeleteHi Lalo, I will try the example and publish with mvc 5 and VS 2013 with ExtJs 5 when I get the time. It might not have much difference with extjs 4.x.
ReplyDeleteHi Nalani, thanks for your response. Can we talk by email or skype please?
ReplyDeleteSure. I will reply for anything related to this post. But I am quite new to the ExtJs subject. :) I may not be able to help much.
ReplyDeleteI would prefer your email or skype account so we can talk directly. If you don't mind :)
ReplyDeleteIts nalani.jayasundara@gmail.com .
ReplyDeleteHi Nalani, i have added you to my contacts on gmail. Please accept my request for chat on gmail :)
ReplyDelete