This website is no longer actively supported
Written by John DeVight on 24 May 2011 15:20
Download RAZOR Source Code
Download ASPX Source Code
* Note: the extjs folder has all been removed to reduce the zip file size
Overview
Now that I have a working TreePanel, I want to be able to click on the tree node to display a page with some information on it, modify the information and then save the information. ExtJS has a FormPanel to display information, but since I am using MVC, I do not want to do this. I want to leverage the MVC Helper functions to display my information. ExtJS defines styles in the ext-all.css stylesheet. The style that is applied to input elements is "x-form-field". Therefore, as I render my fields using the MVC HTML Helper functions, I am going to apply the "x-form-field" class to the input elements. To save the information, I leveraged the Ext.Ajax.request function and submit the entire form using the Ext.lib.Ajax.serializeForm function. The form gets serialized and submitted to the controller where the MVC Framework takes the serialized form and creates an instance of my model class.
Implementing the TreePanel to Open a Page
In the wiki article ExtJS and MVC : 03 - Adding a TreePanel I created a class called TreeNode. The properties of the TreeNode mapped to the properties of the ExtJS TreeNode. I added an additional property called href for the url that is to be opened when the tree node is selected. In the HomeController.NavigationTree method, I set the url for each tree node.
Here is the code:
public class TreeNode { public string text { get; set; } public bool leaf { get; set; } public string href { get; set; } public List<TreeNode> children { get; set; } public TreeNode() { leaf = false; children = new List<TreeNode>(); } }
When the user clicks on a tree node, the HomeController.WikiSeries method gets the appropriate instance of a WikiSeries model and renders a view to display the WikiSeries information.
Here is the code:
public ActionResult WikiSeries(int id) { WikiSeries wikiSeries = (from WikiSeries ws in this.WikiSeriesList where ws.Id == id select ws).FirstOrDefault(); return View(wikiSeries); }
Implementing the View
The view displays the information for the WikiSeries model using the MVC HTML Helpers and sets the class to be "x-form-field". The parent element for the fields is a form that is used to get the information to submit back to the controller. The saveButton div is used to create an Ext.Button that, when clicked, will submit the WikiSeries information.
Here is the code:
<h2>@Model.Name</h2> <br /> <form id="wikiForm"> @Html.HiddenFor(model => model.Id) <div class="tableRow"> <div class="tableColumn"> <label for="Name" class="fieldLabel x-form-field">Name:</label> </div> <div class="tableColumn"> @Html.TextBoxFor(model => model.Name, new { @class = "x-form-field", style = "width:500px;" }) </div> </div> <div class="tableRow"> <div class="tableColumn"> <label for="Name" class="fieldLabel x-form-field">Url:</label> </div> <div class="tableColumn"> @Html.TextBoxFor(model => model.Url, new { @class = "x-form-field", style = "width:500px;" }) </div> </div> <div class="tableRow"> <div class="tableColumn"> <label for="Name" class="fieldLabel x-form-field">Is Active:</label> </div> <div class="tableColumn"> @Html.CheckBoxFor(model => model.IsActive, new { @class = "x-form-field" }) </div> </div> </form> <div id="saveButton"></div>
The View references a javascript file called WikiSeries.js that contains the ExtJS code to render the saveButton and perform the AJAX save.
Here is the code to reference t he WikiSeries.js file:
@section scripts { <script src="@Url.Content("~/Scripts/Home/WikiSeries.js")" type="text/javascript"></script> }
Implementing the AJAX HTML Form Post using ExtJS
When the Save button is clicked, the Save Button handler is executed where the form is serialized and then submitted to the HomeController.Save method. If the form information is successfully posted, the Ext.Ajax.request.success function processes the response returned from the HomeController.Save method.
Here is the code:
Ext.onReady(function () { var saveButton = new Ext.Button({ text: 'Save', applyTo: 'saveButton', handler: function (sender, e) { var formData = Ext.lib.Ajax.serializeForm(Ext.get('wikiForm')); Ext.Ajax.request({ method: 'POST', url: '/Home/Save', params: formData, success: function(response) { if (response.responseText == "success") { alert('Successfully Saved'); } else { alert(response.responseText); } }, failure: function() { alert('failed'); } }); } }); });
The HomeController.Save method receives a WikiSeries as a parameter where the Save method saves the WikiSeries information. The Save method returns a message indicating whether the save was a success or not. In my example I simply returned the hardcoded string: "success".
Here is the code:
[HttpPost] public JsonResult Save(WikiSeries updatedWikiSeries) { IList<WikiSeries> list = this.WikiSeriesList; WikiSeries persistedWikiSeries = (from WikiSeries ws in list where ws.Id == updatedWikiSeries.Id select ws).FirstOrDefault(); persistedWikiSeries.Copy(updatedWikiSeries); this.WikiSeriesList = list; return Json("success", JsonRequestBehavior.AllowGet); }
Conclusion
ExtJS can easily be integrated into an ASP.NET MVC application and still be able to take advantage of the MVC Framework. Stay tuned for more articles coming soon!
