JQuery Mobile Madness with MVC 4 Web API

Tags: Knockout, pubsub, observer, MVC, jQuery, Ajax, EF, Validation, FluentValidation, Visual Studio 2010, ASP.NET, JSON, FullCalendar, Silverlight, Architecture, Vista, IIS, Generics, NHibernate, WCF, RIA Services, Visual Studio 2008, SQL, STORM!, Nullable, ChannelFactory, netTCPBinding, VSPAT, responsive, design, HTML5, CSS3, MVC WebAPI, MVC 4, WebAPI, JQuery Mobile, ScheduleWidget, recurring events, Ninject, Pluggable, CQRS DDD, Windows

In my last post I introduced MVC 4 Web API. In keeping with the spirit of things I'd like to throw a little JQuery Mobile into the mix for fun. As in my previous blog post fire up Visual Studio 11 Beta and create a new MVC 4 Web API project. Last time we posted a plain old string value back to the ValuesController. Now let's post a Widget class back. Go ahead and add this model to the project:

public class Widget
    public int ID { get; set; }
    public string Color { get; set; }
    public string Shape { get; set; }

Modify the ValuesController and replace the out-of-the-box Post verb method with this one:

public HttpResponseMessage<Widget> Post(Widget value)
    var r = new Random();
    value.ID = r.Next(1, 1000); // using System.Net;
    return new HttpResponseMessage<Widget>(value, HttpStatusCode.Created);

I'm really digging the new HttpResponseMessage. You can get really fancy with custom formatters here but I want to keep it really simple. So we're going to simulate a database call by just randomly picking an ID value and returning it back to the UI. 

Ok now add this navigation method to the HomeController:

public ActionResult Widget()
    return View();

With that in place we need to provide a Widget view. Go ahead and add Widget.cshtml as a partial view in the Home folder and put in this simple Widget data entry form:

<ul data-role="listview" data-inset="true">

    <li data-role="list-divider">Create Widget</li>

    <li data-role="fieldcontain" class="ui-hide-label">
        <label for="widget-color">Color</label>
    <input type="text" name="widget-color" id="widget-color" value="" placeholder="Color"/>
    <label for="widget-shape">Shape</label>
        <input type="text" name="widget-shape" id="widget-shape" value="" placeholder="Shape"/>

    <li data-role="fieldcontain">
        <input id="submit-button" type="submit" value="OK" />

    <li id="post-result"/>

<script type="text/javascript">
    $('#submit-button').click(function () {
        var color = $('#widget-color').val();
        var shape = $('#widget-shape').val();
        $.post("/api/values", { Color: color, Shape: shape },
            function (data) {
                $('#post-result').text('Success posting ' + data.Color + ' ' + data.Shape + 'widget with ID ' + data.ID);

The last step is to put a plain old anchor tag in the Home Index.html page so that we can navigate to the data entry form. Insert this just above the H1 welcome tag:

    @Html.ActionLink("Favorite Widget", "Widget", "Home")
<h1>Welcome to ASP.NET Web API!</h1>

Enough code. Fire this guy up and make sure it works. Go ahead and click on the "Favorite Widget" link to be taken to the data entry form. Pretty ugly huh? That's because the markup in Widget.cshtml is using an unordered list that has no style. That's by design. I want to illustrate how JQuery Mobile transforms this into something that looks awesome on a smart phone.

To see this in action go into the Shared _Layout.cshtml file and replace the three references to the CSS and javascript files with these JQuery Mobile references:

<!-- JQuery Mobile -->
<p><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /></p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Now fire up the app and navigate to the form. Mobile friendly!

1 Comment

Comments have been disabled for this content.