Using the jQuery UI Library in a MVC 3 Application to Build a Dialog Form
- by ChrisD
Using a simulated dialog window is a nice way to handle inline data editing. The
jQuery UI
has a UI widget for a
dialog window
that makes it easy to get up and running with it in your application. With the release of ASP.NET MVC 3, Microsoft included the jQuery UI scripts and files in the MVC 3 project templates for Visual Studio. With the release of the MVC 3 Tools Update, Microsoft implemented the inclusion of those with NuGet as packages. That means we can get up and running using the latest version of the jQuery UI with minimal effort. To the code! Another that might interested you about JQuery Mobile and ASP.NET MVC 3 with C#.
If you are starting with a new MVC 3 application and have the Tools Update then you are a NuGet update and a
<link>
and
<script>
tag away from adding the jQuery UI to your project. If you are using an existing MVC project you can still get the jQuery UI library added to your project via NuGet and then add the link and script tags. Assuming that you have pulled down the latest version (at the time of this publish it was 1.8.13) you can add the following link and script tags to your
<head>
tag:
<
link
href
=
"@Url.Content("
~
/
Content
/
themes
/
base
/
jquery
.
ui
.
all
.
css
")"
rel
=
"Stylesheet"
type
=
"text/css"
/>
<
script
src
=
"@Url.Content("
~
/
Scripts
/
jquery-ui-1
.
8
.
13
.
min
.
js
")"
type
=
"text/javascript"
></
script
>
The jQuery UI library relies upon the CSS scripts and some image files to handle rendering of its widgets (you can choose a different
theme
or role your own if you like). Adding these to the stock
_Layout.cshtml
file results in the following markup:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>
@ViewBag.Title
</
title
>
<
link
href
=
"@Url.Content("
~
/
Content
/
Site
.
css
")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min
.
js
")"
type
=
"text/javascript"
></
script
>
<
script
src
=
"@Url.Content("
~
/
Scripts
/
jquery-ui-1
.
8
.
13
.
min
.
js
")"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
@RenderBody()
</
body
>
</
html
>
Our example will involve building a list of notes with an id, title and description. Each note can be edited and new notes can be added. The user will never have to leave the single page of notes to manage the note data. The add and edit forms will be delivered in a jQuery UI dialog widget and the note list content will get reloaded via an AJAX call after each change to the list.
To begin, we need to craft a model and a data management class. We will do this so we can simulate data storage and get a feel for the workflow of the user experience. The first class named Note will have properties to represent our data model.
namespace
Website
.
Models
{
public
class
Note
{
public
int
Id
{
get
;
set
;
}
public
string
Title
{
get
;
set
;
}
public
string
Body
{
get
;
set
;
}
}
}
The second class named
NoteManager
will be used to set up our simulated data storage and provide methods for querying and updating the data. We will take a look at the class content as a whole and then walk through each method after.
using
System
.
Collections
.
ObjectModel
;
using
System
.
Linq
;
using
System
.
Web
;
namespace
Website
.
Models
{
public
class
NoteManager
{
public
Collection
<
Note
>
Notes
{
get
{
if
(
HttpRuntime
.
Cache
[
"Notes"
]
==
null
)
this
.
loadInitialData
();
return
(
Collection
<
Note
>)
HttpRuntime
.
Cache
[
"Notes"
];
}
}
private
void
loadInitialData
()
{
var
notes
=
new
Collection
<
Note
>();
notes
.
Add
(
new
Note
{
Id
=
1
,
Title
=
"Set DVR for Sunday"
,
Body
=
"Don't forget to record Game of Thrones!"
});
notes
.
Add
(
new
Note
{
Id
=
2
,
Title
=
"Read MVC article"
,
Body
=
"Check out the new iwantmymvc.com post"
});
notes
.
Add
(
new
Note
{
Id
=
3
,
Title
=
"Pick up kid"
,
Body
=
"Daughter out of school at 1:30pm on Thursday. Don't forget!"
});
notes
.
Add
(
new
Note
{
Id
=
4
,
Title
=
"Paint"
,
Body
=
"Finish the 2nd coat in the bathroom"
});
HttpRuntime
.
Cache
[
"Notes"
]
=
notes
;
}
public
Collection
<
Note
>
GetAll
()
{
return
Notes
;
}
public
Note
GetById
(
int
id
)
{
return
Notes
.
Where
(
i
=>
i
.
Id
==
id
).
FirstOrDefault
();
}
public
int
Save
(
Note
item
)
{
if
(
item
.
Id
<=
0
)
return
saveAsNew
(
item
);
var
existingNote
=
Notes
.
Where
(
i
=>
i
.
Id
==
item
.
Id
).
FirstOrDefault
();
existingNote
.
Title
=
item
.
Title
;
existingNote
.
Body
=
item
.
Body
;
return
existingNote
.
Id
;
}
private
int
saveAsNew
(
Note
item
)
{
item
.
Id
=
Notes
.
Count
+
1
;
Notes
.
Add
(
item
);
return
item
.
Id
;
}
}
}
The class has a property named
Notes
that is read only and handles instantiating a collection of
Note
objects in the runtime cache if it doesn't exist, and then returns the collection from the cache. This property is there to give us a simulated storage so that we didn't have to add a full blown database (beyond the scope of this post). The private method loadInitialData handles pre-filling the collection of
Note
objects with some initial data and stuffs them into the cache. Both of these chunks of code would be refactored out with a move to a real means of data storage.
The
GetAll
and
GetById
methods access our simulated data storage to return all of our notes or a specific note by id. The
Save
method takes in a
Note
object, checks to see if it has an
Id
less than or equal to zero (we assume that an
Id
that is not greater than zero represents a note that is new) and if so, calls the private method
saveAsNew
. If the
Note
item sent in has an
Id
, the code finds that
Note
in the simulated storage, updates the
Title
and
Description
, and returns the
Id
value. The
saveAsNew
method sets the
Id
, adds it to the simulated storage, and returns the
Id
value. The increment of the
Id
is simulated here by getting the current count of the note collection and adding 1 to it. The setting of the
Id
is the only other chunk of code that would be refactored out when moving to a different data storage approach.
With our model and data manager code in place we can turn our attention to the controller and views. We can do all of our work in a single controller. If we use a
HomeController
, we can add an action method named
Index
that will return our main view. An action method named
List
will get all of our
Note
objects from our manager and return a partial view. We will use some jQuery to make an AJAX call to that action method and update our main view with the partial view content returned. Since the jQuery AJAX call will cache the call to the content in Internet Explorer by default (a setting in jQuery), we will decorate the
List, Create
and
Edit
action methods with the
OutputCache
attribute and a duration of 0. This will send the no-cache flag back in the header of the content to the browser and jQuery will pick that up and not cache the AJAX call.
The
Create
action method instantiates a new
Note
model object and returns a partial view, specifying the
NoteForm.cshtml
view file and passing in the model. The
NoteForm
view is used for the add and edit functionality. The
Edit
action method takes in the
Id
of the note to be edited, loads the
Note
model object based on that
Id
, and does the same return of the partial view as the
Create
method. The
Save
method takes in the posted
Note
object and sends it to the manager to save. It is decorated with the
HttpPost
attribute to ensure that it will only be available via a POST. It returns a
Json
object with a property named
Success
that can be used by the UX to verify everything went well (we won't use that in our example). Both the add and edit actions in the UX will post to the
Save
action method, allowing us to reduce the amount of unique jQuery we need to write in our view.
The contents of the
HomeController.cs
file:
using
System
.
Web
.
Mvc
;
using
Website
.
Models
;
namespace
Website
.
Controllers
{
public
class
HomeController
:
Controller
{
public
ActionResult
Index
()
{
return
View
();
}
[
OutputCache
(
Duration
=
0
)]
public
ActionResult
List
()
{
var
manager
=
new
NoteManager
();
var
model
=
manager
.
GetAll
();
return
PartialView
(
model
);
}
[
OutputCache
(
Duration
=
0
)]
public
ActionResult
Create
()
{
var
model
=
new
Note
();
return
PartialView
(
"NoteForm"
,
model
);
}
[
OutputCache
(
Duration
=
0
)]
public
ActionResult
Edit
(
int
id
)
{
var
manager
=
new
NoteManager
();
var
model
=
manager
.
GetById
(
id
);
return
PartialView
(
"NoteForm"
,
model
);
}
[
HttpPost
]
public
JsonResult
Save
(
Note
note
)
{
var
manager
=
new
NoteManager
();
var
noteId
=
manager
.
Save
(
note
);
return
Json
(
new
{
Success
=
noteId
>
0
});
}
}
}
The view for the note form,
NoteForm.cshtml
, looks like so:
@model
Website
.
Models
.
Note
@using
(
Html
.
BeginForm
(
"Save"
,
"Home"
,
FormMethod
.
Post
,
new
{
id
=
"NoteForm"
}))
{
@Html
.
Hidden
(
"Id"
)
<
label
class
=
"Title"
>
<
span
>
Title
<
/span><br /
>
@Html
.
TextBox
(
"Title"
)
<
/label>
<label class="Body">
<span>Body</
span
><
br
/>
@Html
.
TextArea
(
"Body"
)
<
/label>
}
It is a strongly typed view for our
Note
model class. We give the
<form>
element an
id
attribute so that we can reference it via jQuery. The
<label>
and
<span>
tags give our UX some structure that we can style with some CSS.
The
List.cshtml
view is used to render out a
<ul>
element with all of our notes.
@model
IEnumerable
<
Website
.
Models
.
Note
>
<
ul
class
=
"NotesList"
>
@foreach
(
var
note
in
Model
)
{
<
li
>
@note
.
Title
<
br
/>
@note
.
Body
<
br
/>
<
span
class
=
"EditLink ButtonLink"
noteid
=
"@note.Id"
>
Edit
<
/span>
</
li
>
}
<
/ul>
This view is strongly typed as well. It includes a
<span>
tag that we will use as an edit button. We add a custom attribute named
noteid
to the
<span>
tag that we can use in our jQuery to identify the
Id
of the note object we want to edit.
The view,
Index.cshtml
, contains a bit of html block structure and all of our jQuery logic code.
@
{
ViewBag
.
Title
=
"Index"
;
}
<
h2
>
Notes
<
/h2>
<div id="NoteListBlock"></
div
>
<
span
class
=
"AddLink ButtonLink"
>
Add
New
Note
<
/span>
<div id="NoteDialog" title="" class="Hidden"></
div
>
<
script type
=
"text/javascript"
>
$
(
function
()
{
$
(
"#NoteDialog"
).
dialog
({
autoOpen
:
false
,
width
:
400
,
height
:
330
,
modal
:
true
,
buttons
:
{
"Save"
:
function
()
{
$
.
post
(
"/Home/Save"
,
$
(
"#NoteForm"
).
serialize
(),
function
()
{
$
(
"#NoteDialog"
).
dialog
(
"close"
);
LoadList
();
});
},
Cancel
:
function
()
{
$
(
this
).
dialog
(
"close"
);
}
}
});
$
(
".EditLink"
).
live
(
"click"
,
function
()
{
var
id
=
$
(
this
).
attr
(
"noteid"
);
$
(
"#NoteDialog"
).
html
(
""
)
.
dialog
(
"option"
,
"title"
,
"Edit Note"
)
.
load
(
"/Home/Edit/"
+
id
,
function
()
{
$
(
"#NoteDialog"
).
dialog
(
"open"
);
});
});
$
(
".AddLink"
).
click
(
function
()
{
$
(
"#NoteDialog"
).
html
(
""
)
.
dialog
(
"option"
,
"title"
,
"Add Note"
)
.
load
(
"/Home/Create"
,
function
()
{
$
(
"#NoteDialog"
).
dialog
(
"open"
);
});
});
LoadList
();
});
function
LoadList
()
{
$
(
"#NoteListBlock"
).
load
(
"/Home/List"
);
}
<
/script>
The
<div>
tag with the
id
attribute of "NoteListBlock" is used as a container target for the load of the partial view content of our
List
action method. It starts out empty and will get loaded with content via jQuery once the DOM is loaded. The
<div>
tag with the
id
attribute of "NoteDialog" is the element for our dialog widget. The jQuery UI library will use the
title
attribute for the text in the dialog widget top header bar. We start out with it empty here and will dynamically change the text via jQuery based on the request to either add or edit a note. This
<div>
tag is given a CSS class named "Hidden" that will set the
display:none
style on the element. Since our call to the jQuery UI method to make the element a dialog widget will occur in the jQuery document ready code block, the end user will see the
<div>
element rendered in their browser as the page renders and then it will hide after that jQuery call. Adding the
display:hidden
to the
<div>
element via CSS will ensure that it is never rendered until the user triggers the request to open the dialog.
The jQuery document load block contains the setup for the dialog node, click event bindings for the edit and add links, and a call to a JavaScript function called
LoadList
that handles the AJAX call to the
List
action method. The
.dialog()
method is called on the "NoteDialog"
<div>
element and the options are set for the dialog widget. The
buttons
option defines 2 buttons and their click actions. The first is the "Save" button (the text in quotations is used as the text for the button) that will do an AJAX post to our
Save
action method and send the serialized form data from the note form (targeted with the
id
attribute "NoteForm"). Upon completion it will close the dialog widget and call the
LoadList
to update the UX without a redirect. The "Cancel" button simply closes the dialog widget.
The
.live()
method handles binding a function to the "click" event on all elements with the CSS class named
EditLink
. We use the
.live()
method because it will catch and bind our function to elements even as the DOM changes. Since we will be constantly changing the note list as we add and edit we want to ensure that the edit links get wired up with click events. The function for the click event on the edit links gets the
noteid
attribute and stores it in a local variable. Then it clears out the HTML in the dialog element (to ensure a fresh start), calls the
.dialog()
method and sets the "title" option (this sets the
title
attribute value), and then calls the
.load()
AJAX method to hit our
Edit
action method and inject the returned content into the "NoteDialog"
<div>
element. Once the
.load()
method is complete it opens the dialog widget.
The click event binding for the add link is similar to the edit, only we don't need to get the id value and we load the
Create
action method. This binding is done via the
.click()
method because it will only be bound on the initial load of the page. The add button will always exist.
Finally, we toss in some CSS in the
Content/Site.css
file to style our form and the add/edit links.
.
ButtonLink
{
color
:
Blue
;
cursor
:
pointer
;
}
.
ButtonLink
:
hover
{
text
-
decoration
:
underline
;
}
.
Hidden
{
display
:
none
;
}
#NoteForm label { display:block; margin-bottom:6px; }
#NoteForm label > span { font-weight:bold; }
#NoteForm input[type=text] { width:350px; }
#NoteForm textarea { width:350px; height:80px; }
With all of our code in place we can do an F5 and see our list of notes:
If we click on an edit link we will get the dialog widget with the correct note data loaded:
And if we click on the add new note link we will get the dialog widget with the empty form:
The end result of our solution tree for our sample:
