How to have a mobile version of a MVC website - asp.net-mvc

I currently converted my website from classic asp to ASP.NET MVC, I'll be putting it live in a few days. I'm now thinking that I should start supporting mobile device.
I was wondering if this could be a good idea to do things.
Have the same model
Have the same controller
Have two different view and chose the right one using Request.Browser.IsMobileDevice
One view for mobile display, one view for everything else.
This way I could keep the same URL.
Is this a good way of doing things?

Scott Hanselman blogged about this. He illustrated an example of how you could build a custom view engine which depending on the user agent would render a view situated in a different folder. This way you could have the same Model and Controller but different views.
And this functionality will be built-in out-of-the-box in ASP.NET MVC 4.

For the HTML, CSS, and JS, check out Bootstrap and jQuery Mobile. For Bootstrap, check out this link, scroll down to responsive utility classes and resize your screen.
They are other frameworks out there too that allow you to do similar things as bootstrap as well.

Related

Asp.NET MVC view engines, why they don't support "View designer" now?

With the asp.net MVC, we see a lot different view engines, like Razor, spark, webform etc.
I thought the idea of MVC is separating of data and view, I assume view part should be something that allows a designer to do some work, even after it is created by a developer. But I see now most if not all view engines introduce new syntax, not stick with html. The old web form, you can use "view designer" to see how a page looks like even with some code blocks, designer could at least move blocks and html elements around, but now with engine like Razor, you cannot even view a page in designer mode. So I don't quite get what is the point?
This came to me when I tried to search for a server side templating that allows end user do some changes on the page. I perfer something stick to pure HTML, maybe Spark is the one, but I am not sure. Please someone can give me some idea.
Thanks
Views are meant for that. It will not static design. Markup will be generated on fly.
If you take razor as an example, you will have the combination of c# and html as code in view page. So, as you may be able to understand now, you cannot see the actual design until the c# and html execution goes hand-in-hand.
Hope it clarifies a little!

Multiple view for multiple devices in ASP .Net MVC

What can be the best way for architecting an ASP .Net MVC project, which have common web service part and multiple views for multiple devices. I have started with a JQuery mobile project, and have view for mobile devices. Now I need to add web api controllers that should work as web services. Also another View part is needed for desktop browsers.
Is it good to assign different Areas to group different Views?
Web Request Flow:
Route mobile client request to MVCController in Mobile Area, and desktop client request to MVCController in Desktop Area from RouteConfig
Call web api controller(common) from MVC controllers
Return corresponding View from MVC controller
Is there any better approach available to do the same? I am confused if webservices and multiple views in same project will increase the complexity.
I think a better approach would be to pursue a responsive design. Ideally you'd end up with just one view for multiple devices instead of multiple views for showing the same information.
Take a look at this explanation.
You can use the Bootstrap framework to achieve a responsive design that will play nicely on any device.
See http://twitter.github.io/bootstrap/
For the most parts, you wont need jQuery mobile.

ASP.NET MVC Templated Control

I am currently building an ASP.NET MVC site after years of being in the Web Forms world (and taking a bit of getting used to!).
I have an admin dashboard which has several area's contained in boxes which can be collapsed etc. The basic layout of the box is the same for all - the only difference is the content inside the box. I don't really want to repeat the box code over and over (talking only about front end code here). What I would normally do in the Web Forms world is create a control with template region for the content (i.e http://weblogs.asp.net/scottgu/archive/2006/06/04/Supporting-Templates-with-ASP.NET-User-Controls.aspx)
This question is pretty similar to my scenario How do build a composite or template control in ASP.Net MVC, or the equivelant?. The top answer in the referenced question points to this article http://jeffreypalermo.com/blog/asp-net-mvc-and-the-templated-partial-view-death-to-ascx/ which I guess would work but seems somewhat of a hack. What is the best way to achieve this in MVC? How do others handle this?
If the sharing is in the layout, use master (a concept from web forms).
If it is in the content then use Display/Editor Templates.

ASP MVC 3 mobile strategy

I am starting a group uni project and we are using ASP MVC 3. We are going to have a mobile (web) component as well as a "traditional" web app. Some of the views will overlap (as in Incidents mobile view and Incidents ordinary view). ASP MVC 4 has the mobile features that we want, but we don't want to take chances with a Beta version.
What we were thinking of doing was having two MVC 3 projects in our solution, one for the mobile and one for the web app. Alternatively, we were thinking of having some mobile only controllers and having everything in one MVC project. For example (/AccountMobileController/Signup and /AccountController/Signup)?
What do you guys recommend? Is it silly to use ASP MVC 4 Beta?
You can get mobile view support fairly easily in MVC 3. Take a look at how they approached this on Stackoverflow.
http://kevinmontrose.com/2011/07/17/mobile-views-in-asp-net-mvc3/
For the most part, your controllers should be the same for mobile and full site, but the views will be different.
I'd say go for MVC4 Beta.
Although, yes, it is in Beta, it is ALMOST ready for production.
System.Web.Mvc has really not changed that much, and in reality the, "mobile templates" from MVC4 are mostly just Html, Css, and Js templates that come pre-bundled with the templates.
The main new mobile functionality in MVC4 is for swapping out views for different devices.
Plus the Web API is really awesome for creating an API.
http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features
I'd suggest you to look at frameworks like Bootstrap and Less, they'll help you build responsive websites without too much effort. Just be careful that you do not inject any css or styles from mvc code as it might interfere with them.

Proper way to use jQuery in an ASP.NET MVC 1.0 Masterpages

There are a few pages here addressing usage of jQuery with .net masterpages - fewer re: masterpages in MVC in .net MVC apps. But those few seem to be making distinctions re pre-release versions of MVC.
Is there now a consensus regarding how and where to include the lib and what potential problems we need to be aware of?
It _looks as though things are fairly straight forward...put the include in the masterpage's head and stuff works. (as it has for me _so far). I guess I'm looking for lessons learned and what to watch out for - i haven't scratched features like partial views and ajax yet.
thx
As Iconic mentioned, you're free to use jQuery however you see fit. I would decide this after planning my site - if only a page or two are using jQuery, I would include it in them only. If my whole site relies on it (like SO does, for example), I would include it in my masterpage. All it takes is a simple tag, and the only thing to watch out for is perhaps some bandwidth, if you expect to have much traffic to only several pages, which does not use jQuery.
There's no magic way to include jQuery. Since it's a client-side library, including it in the master page makes it easy to hook into $(document).ready from any view or partial view.
Once it's at the top of your page, it's trivial to include plugins or hook into events at any point. That way, you can encapsulate jQuery that is specific to your application in the view or partial view itself.

Resources