Using Asp.net MVC 4 to Make Mobile Applications as Presented by Steve At Techdays?

I been doing asp.net mvc for a while now and recently came across this techdays tutorial .

This seemed very interesting but has left me kind of confused on how do I get started doing something similar.

Currently I have a web application made with

1.  Jquery
2.  Asp.net mvc 3 razor
3.  Nhibernate 

My application is basically one page with a couple tabs and everything is controlled by ajax and jquery model dialog.

I followed this patterned for my stuff

View -> View Model -> Controller -> Service layer (in a separate library)-> nhibernate

[HttpGet]
public ActionResult Courses()
{
    // get all courses back from service layer
    // automap domain results to view model
    return View(vm);
}

[HttpPost]
public ActionResult CreateCourse(CourseFormViewModel vm)
{
   // check if data meets basic validation
    if (ModelState.IsValid)
    {
       //map back to domain object
        // send to service layer
        // return data back view through json.

        return Json(data);

    }
    // return errors back to server
    return Json(wrapper);
}

// my view model that contains basic validation

   public class CourseFormViewModel
    {
        public int CourseId { get; set; }

        [Required(ErrorMessage = "Course name is required")]
        [StringLength(40, ErrorMessage = "Course name cannot be this long.")]
        public string CourseName { get; set; }
    }

// View

My view is pretty much has some strongly typed html helps that use the view model.

// Javascript

As I mentioned I use a lot of Ajax. I will most of the time use serliazeArray and then post the data to a controller Action Result(CreateCourse) which will then in turn bind the values for the view model.

// Service Layer

In my service layer I will do some business logic and then save to the database using nhibernate if needed. If I feel it is necessary I will make Domain Transfer Object otherwise I will just use my Domain Object.

I been recently looking at jquery mobile and phone gap as I been put on a project that uses this technologies and they just seemed very useful. As I am very familiar with asp.net mvc I then started to look if I could use mvc in the mix, that’s when I came across the video I posted at the top of this post.

I am still not 100% sold on single page applications as for instance if I were to look at my current personal project I am making and wanted to make a mobile version of it, the application would have to be quite different in presenting the data to the user.

For instance my web application has a table that just needs lots of space to display everything and probably would not look good on mobile. This would lead me to either have to trim the table down or think of a different way of displaying it (What I probably would do).

I like the fact that what Steve made would work on all mobile devices and I would like to try to something similar to what he is doing but the version I would make would just be for mobile devices and maybe small tablets.

Everything else that could support 1024 resolution and higher I would think should use the current web application.

I just don’t where to begin and how to make it fit with what I am using.

1. He is using webapi and Entity frame work but how do I make this work with nhibernate?

2. Do I not use View Models anymore? It seems like he just hooked up his domain model and sent that all to the view. I am not too crazy about that as I like view models.

3. He uses Knockout.js and all its binding stuff such as binding to a button he uses to send data back to the server. That is nice but what happens when you’re using jquery dialogs and stuff that generate its own buttons. How do you hook knockout in these cases?

4. He mentions that he could then take his project and use something like phonegap to put it in a market place. How could he do that if he is using asp.net mvc code as phone gap only supports html/javascript/css?

With regards to point #3. I'm using Knockout with jqQuery dialog boxes without any problem. First, you can't attach data binding to the dialog created buttons. I'm not sure that you really need to. The dialog box buttons act as click event handlers. In those handlers, you can then do what every you need to the bound View Model.

---

Edit I've put a demo at http://jsfiddle.net/ex5Qy/3/

One thing to remember is what Knockout is designed to do. It binds a viewmodel to the html elements. That's all. You still need all the rest of the normal logic to make the page do what you need.