Just Starting, MVC3 and jQuery UI

I am just starting on MVC and at the same time, jQuery.  Probably not the smartest move, but since I believe I have the fundamentals of MVC3 I thought I would throw in some jQuery UI.  Let me start by saying that it really isn’t all that hard, once you know what to change and where.

For this post I am just going to put what little I have done so far.  I have been using Visual Studio 2010 in various flavors depending on where I am (Professional, Premium, and Ultimate).  It should be enough to get most people started who may be in the same boat as I am.  I am also not using a custom theme or anything, just the jQuery that comes with MVC3.

First thing I did was create my empty MVC3 project.  I had read a post on Stefan’s Tech Notes that you should update your package references.  This is simple enough.  Right click on your project in solution explorer, in the menu that pops up click “Add Library Package Reference”.  When it comes up you will see a list of installed packages and another menu on the left side.  Click the word Updates on that left hand side.  Now you will see a list of packages in the project that can be updated; I updated everything except EF.  At work I had to keep going back to jQuery after I did each of the others, because it would not update that one until some reference was updated, which was in one of the others.  At home I did not have this problem.

Now that my stuff is all up to date I added an empty controller which I called Home and added a View.  I added the view by right clicking on my Index method in my controller and selecting Add View.

Now  you have a view that you can use to play.  To take advantage of the jQuery UI you need to set some references.  I learned about most of these from a post on stevescodeingblog.  The stuff we need to change is the css and js references at the top of Views/Shared/_Layout.cshtml.  I’ll paste mine below.

<script type="text/javascript" src="@Url.Content("></script><script type="text/javascript" src="@Url.Content("></script>
<script type="text/javascript" src="@Url.Content("></script>

By the time you read this your version numbers may have changed, so pay attention to where you can find them and edit them as needed.  Now the fun part, getting to the view itself to play with this stuff.  First I’m going to try to explain what I wanted to do, and then I’ll put the HTML down for you to see.  For this test I wanted to use the tab control, a button, and a datepicker.  jQuery references things by their id, so you should pay attention to the ids I give to my tags/controls and the JavaScript functions.  One thing that will jump out at you is the size of the jQuery stuff.  I looked and found something on jQueryFAQsto change the size by setting the font-size.  The easiest way is to add another style sheet, you’ll see my style tag after the script block near the top. And now, here is my HTLM for my Views/Home/Index.cshtml

@{
    ViewBag.Title = "Index";
}
<script type="text/javascript">
    $(document).ready(function() {
        $("#divTabs").tabs();
        $("#date").datepicker({ showButtonPanel: true });
        $("#btnTest").button();
    });
</script>
<h2>Index</h2>
<div id="divTabs" style="width: 400px;">
<ul>
	<li><a href="#tabTest">Test 1</a></li>
	<li><a href="#tabTest2">Test 2</a></li>
	<li><a href="#tabTest3">Test 3</a></li>
</ul>
<div id="tabTest"><input id="date" style="width: 100px;" type="text" />
 <input id="btnTest" style="width: auto; height: auto;" type="button" value="A Testbutton" />
</div>
<div id="tabTest2">This is the second tab.</div>
<div id="tabTest3">
This is the third tab.</div>
</div>

And here is an image of what it created, the button is hidden behind the datepicker. To get the datepicker to popup I clicked inside my textbox. In my test it does not stay up there all the time.

Advertisements

About SheldonS

Web developer for over 15 years mainly with Microsoft technologies from classic ASP to .NET 4. Husband, father, and aspiring amateur photographer.

Posted on May 10, 2012, in jQuery, Learning, MVC and tagged , . Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: