The next series of brown bag sessions is about using Jquery AJAX with ASP.NET MVC 3. This project is the continuation of ASP.NET MVC 3 and Entity Framework Code First project. The methods I used in this project are undocumented. Feel free to apply or modify these tips and tricks to your own project. As we go along with the topic I will include the references of the plug-ins used for you to study and download the source. It is recommended that you enhance the methods and the code structure for production purposes. Greate! Let the learning begin!
My journey with Jquery started two years ago back in my college days. Jquery is a fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX. Sounds good! No wonder why ASP.NET MVC comes with Jquery as well. Figure 1 shows the Script folder of the MVC project. The once that are highlighted are the javascript files from the ASP.NET MVC framework while the others are just added for the purpose of this demonstration. you can see the Jquery library and other jquery plug-ins that are available for this framework and that these js files are already integrated to your created project. So far, for this version of the MVC framework the latest virsion of Jquery is 1.4.1. As you can see I have added a newer version of Jquery in this project which is 1.4.2. You can checkout the Jquery website for more updates with the library which as of this date is in version 1.6.2. Their might be some compatibility issues with the MVC 3 framework and for that please refer to the documentation provided at their website.
Let us begin the demonstration by making a backup copy or our previews project. If you have read my previews post on the ToyStoreMVC3 project then you can modify that one for this project. But I suggest to backup the old one just in case you need a reference on the view scaffolding method.
Navigate to Views >Shared and open _Layout.vbhtml. This is the main page which contains the head and the body of your HTML. It is used as the master page which will load the views dynamically in its content. Lets include the necessary js and css files needed for the project.
 |
| Using Jquery AJAX with ASP.NET MVC 3 |
 |
| Figure 1. ASP.NET MVC 3 Script folder |
Let us begin the demonstration by making a backup copy or our previews project. If you have read my previews post on the ToyStoreMVC3 project then you can modify that one for this project. But I suggest to backup the old one just in case you need a reference on the view scaffolding method.
Navigate to Views >Shared and open _Layout.vbhtml. This is the main page which contains the head and the body of your HTML. It is used as the master page which will load the views dynamically in its content. Lets include the necessary js and css files needed for the project.
<head>
<title>@ViewData("Title")</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Jqueryui/jquery-ui-1.7.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
@*JSON*@
<script src="@Url.Content("~/Scripts/jquery.json-2.2.min.js")" type="text/javascript"></script>
@*Jquery Validation*@
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
@*Jquery Populate*@
<script src="@Url.Content("~/Scripts/jquery.populate.min.js")" type="text/javascript"></script>
@*JqGrid*@
<script src="@Url.Content("~/Scripts/Jqgrid/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Jqgrid/jquery.jqGrid2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Jqgrid/ui.multiselect.js")" type="text/javascript"></script>
</head>
This is the head tag and the scripts I used. Notice the src and href properties of the script and link tags. The method use Razor to give the URL value of the file. Also I included some Jquery plug-ins that will be used in this demo. We have Json, Jquery Validation, Jquery Populate, and JqGrid. I'll tackle each of the plug-ins as we go along.
View - Jquery Style
In the previews brown bag session, we learn about scaffolding views with ASP.NET MVC 3 framework. This time I will show you how to use Jquery with the view to manipulate the containers and do some animation just for fun. To start with lets delete the views we have created using the scaffold method. Navigate to Views > Home folder and remove the following files shown in Figure 2.
 |
| Figure 2. Create, Delete, Details and Edit views. |
Now you are suppose to be left with these files in the Views folder as shown in Figure 3.
 |
| Figure 3. Views folder for Jquery project. |
In this project I will be using the Index.vbhtml file as a view. This view will carry out the CRUD (Create, Read, Update, Delete) function with the help of Jquery AJAX. As I have said a while ago, the method used is undocumented. I'd be open for discussions and corrections who might have some interesting ideas regarding this topic. Ok! here is the code for my view.
@Modeltype ToyStoreMVC3.Product
@Code
ViewData("Title") = "Home Page"
Layout = "~/Views/Shared/_Layout.vbhtml"
End Code
<h2>
Home</h2>
<input id="butCreate" type="button" value="Create" />
<input id="butEdit" type="button" value="Edit" />
<input id="butDelete" type="button" value="Delete" />
<div id='ajaxpage'>
<div id="toystoregrid">
<table id="jqgrid_product" class="scroll" cellpadding="0" cellspacing="0" style="cursor: pointer;
-moz-user-select: none;">
</table>
<div id="jqpager_product" class="scroll" style="text-align: center;">
</div>
<input id="setcols" type="button" value="Set Columns" />
</div>
<div id="toystorediv" style="display: none">
<form id="toystoreform">
<fieldset>
<div id="preloader" style="display: none">
<img src="../../Image/loader2.gif" /></div>
<input id="Id" name="Id" type="hidden" value="" />
<div class="editor-label">
@Html.LabelFor(Function(model) model.Name)
</div>
<div class="editor-field">
<input class="text-box single-line required" id="Name" name="Name" type="text" value="" />
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Description)
</div>
<div class="editor-field">
<input class="text-box single-line required" id="Description" name="Description"
type="text" value="" />
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Price)
</div>
<div class="editor-field">
<input class="text-box single-line required" id="Price" name="Price" type="text"
value="" />
</div>
<input id="butSave" type="submit" value="Save" />
<input id="butCancel" type="button" value="Cancel" />
</fieldset>
</form>
</div>
</div>
Most of it are just containers that will be used by the application to display the Product form and the Product Grid. As we go on with the brown bag session I will tackle each of these containers and how to handle them with Jquery.
That was it for now. I hope that this post already gave you an overview of the project. Try to run the project and see the result of the view we've just created. The next post will be on using JqGrid on ASP.NET MVC 3. Stay tune for more!
No comments:
Post a Comment