Say Hello to Project jQMvc

After my previous post about jQuery Mobile and ASP.Net MVC, I found myself using jQM in a project. Now, it would be a shame if I didn’t share the goodies I built for MVC with jQM.

So, I give you Project jQMvc. Really, it’s a collection of HTMLHelper extensions that build on jQM. With jQMvc you’ll be able to build full HTML5 compatible and mobile ready views but with the lovely MVC behind it at all times. Let me show you some of the things it can do.

Lists, a lot of them

In the project there a several types of lists, with and without searching. Thanks to jQM, it’s a treat! And really useful.

The below code,

@using jQM
@model IEnumerable

@{
    ViewBag.Title = "Unordered List With Search";
}

@Html.UnorderedListWithSearchFilter(Model)

And a little bit of sauce from the controller will give you,

jQMvc List with Search Preview

Buttons, all sorts of them

@using jQM

@{
    ViewBag.Title = "Buttons";
}

@Html.ActionButton("Hi. I am a simple button.", "Index", "Home")

@Html.ActionButton("Hey! Look, I am a settings kind'a button.", "Index", "Home", ButtonIcon.gear)

@Html.ActionButton("Unlike others, I have route values.", "Router", "Home", new { id = "value" })

The code above will create a neat little stack of different kinds of button.

So that’s it for now. As the project grows, I will be sure to update with the neat things that will go into jQMvc.


MVC Now Stands for Mobile Views Conquered

Say hello to my little friend. Always wanted to say that. But seriously, say hello to jQuery Mobile. It’s pretty obvious what its all about so I’ll get straight to it. Here’s a little look at how pages of ASP.Net MVC applications can be hosted to work with mobile devices et with amazing interfaces.

Link ‘em.

We’ll need to link the resources either from the CDN that’s mentioned on jQMobile’s download page. Or you can… download them. As I have.

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.mobile-1.0a4.1.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jqmobile/jquery.mobile-1.0a4.1.min.css")" rel="stylesheet" type="text/css" />

Give it structure.

I gave this MVC3 project’s _Layout.cshtml the following layout so that I can use it throughout my other views and modify those as required.

<div data-role="page">
   <div data-role="header">
       <h1>@ViewBag.Title</h1>
   </div>
   <div data-role="content">@RenderBody()</div>
   <div data-role="footer">
       <h4>Footer here</h4>
   </div>
</div>

Using the data-role attribute, we can specify different parts of the page as we like. And as you might guess RenderBody() will be the mode of transaction for all your data. Data transactions can also happen through the jQMobile framework itself (using JavaScript that is). As you might imagine, each page can have be strongly typed to a model.

From there on it’s just good old MVC with jQMobile doing all the neat work, preparing the application for mobile platforms.


More DatePickers!

In continuation of my previous post on jQuery UI, I updated the project on CodePlex with a demo of how multiple date pickers can be included. It’s very simple, just requires a little bit of nifty JavaScript. In fact, it’s a one-liner.


$("*[id*=date]").datepicker();

Yep! That simple. This will activate the date picker on every element whose id has "date"-something in it. Like so:


@Html.TextBoxFor(model => model.DateTime1, new { id = "date1" })
@Html.TextBoxFor(model => model.DateTime2, new { id = "date2" })

Here’s a screenshot of how that looks:

Get the project from CodePlex and play around. I will be updating it soon again.


jQuery UI in MVC3 to Spice It All Up

Look here!
jQueryUI in MVC3 Project

It’s jQuery UI! You might have read about it in Scott Gu’s post about MVC3 RC2. jQuery UI is going to be added by default in MVC3 projects. So, rejoice. And read on.

To find out how to use them in the projects, I went a-testing. Figured it would be easy and it was. But I made little progress, so I made a project out of it and put it on CodePlex.

Here’s the project. You’re welcome to help me extend it. It will be great to have a base project set up for future use.


Multiple Datepickers

Using ASP.NET MVC with Javascript is like a breeze and really quite useful too. I needed to have several date fields in a form for the project I am currently working on. I found jQuery UI to be a great and very pretty solution and thought I might share.

First I got the jQuery UI and placed it in the Content folder of the MVC project. I had put my script in a file called datepicker.js also in the Content folder. They can be anywhere else too, depending on that the following paths will have to be changed. Furthermore the jQuery JavaScript library will also be needed. It’s already there in the MVC project’s Scripts and jQuery UI’s js folder.

Referring to them all:

<link type="text/css" href="<%= Url.Content("~/Content/jqueryUI/css/smoothness/jquery-ui-1.7.2.custom.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/Script/jquery-1.3.2.min.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Content/jqueryUI/js/jquery-ui-1.7.2.custom.min.js") %>"></script>
<script src="<%= Url.Content("~/Content/datepicker.js") %>" type="text/javascript"></script>

I placed a wildcard in the datepicker function to pick up any element with date in its id:

$(function() {
$("*[id*=date]").datepicker();
});

Now in the form that contains the date fields:

            <p>
                <label for="DateStarted">Date Started:</label>
                <%= Html.TextBox("DateStarted", String.Format("{0:d}", Model.DateStarted), new { @id = "date1" })%>
                <%= Html.ValidationMessage("DateStarted", "*") %>
            </p>
            <p>
                <label for="TerminationDate">Termination Date:</label>
                <%= Html.TextBox("TerminationDate", String.Format("{0:d}", Model.TerminationDate), new { @id = "date2" })%>
                <%= Html.ValidationMessage("TerminationDate", "*") %>
            </p>

I added the id attribute to each text box that was meant as a date field. It’s important to specify date1 and date2 (in lines 3 and 8) or other unique names containing date because the wildcard would cause any name with date in it to register as elements for the datepicker to be applied on.

Hope it will be useful for someone, it surely was for me.


Follow

Get every new post delivered to your Inbox.

Join 256 other followers