How to make My MVC4 application to mobile /tab compatibility? - asp.net-mvc

Its my basic question, but I think it is worth it. I have MVC4 application which is working absolutely on my PC/laptop browser. What next to do work in mobiles/tab also? The application has all latest Jquery, bootstrap, HTML5 and Razor engine code.
Will same application open mobile browser in smaller size? How to make to work?

There are three alternatives.
You can create a native mobile application (IOS, Android and so on) for your web application. Assuming you want to stick with your current app, this choice is useless for you.
There are frameworks such as jQuery Mobile that enables you to write views for your web application that are used in when your application is accessed via mobile devices such as tablets and phones.
Last option is using responsive design techniques. This is especially good when most of the content on the pages are static. If you have used bootstrap, as far as I know, it is a front-end framework that is responsive. In that case, you do not need to do anything.
You can test your application behavior using Chrome developer tools (F12). Just go to settings in developer tools and override the device metrics to resolution you want to test. It should do the trick.

http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T?ocid=aff-n-in-loc--hr
You have all u want here in above link...

Related

How to create mobile only website

I have presently using bootstrap to make a responsive website. But problem is that, in this case we need to load all the same content for mobile as well which is not required, like heavy images, text etc. which are good only for desktop websites. So, I thought of creating a mobile version of this website which based on User-agent will open.
But I am confused with technology stack to make such website. I need to give users view as well as features which are available in native app. So user coming from mobile do not feel odd using our website. I have found two libraries for such purpose (jquery mobile and angular mobile ui)
I am impressed by mobile view of following website:
zivame.com
cilory.com
For these two websites I fail to understand what library they are using to deliver such smooth and native view and functionality. Please suggest me which tools or libraries should I use to make such beautiful website like zivame.com ?

Available technologies for Mobile Web Development

Recently we have finished the development of our application and we have used Spring , Hibernate,Jquery etc in it.
Now today my manager came to me and asked , hey we have to develop a mobile version of our application so that it can work efficiently on mobile devices. He was more focusing on the responsive design.
So, i think in this case we have to change only the view component of
the application. Am i correct ?
What all technologies are available at our disposal that we can use
to develop an efficient mobile version of application ?
I have heard about Spring mobile , jquery mobile etc , but I am not sure from where to start basically i have to give a list of technologies/library/framework that can be used for the mobile web development.
Please help with your valuable suggestions.
First I think I should caveat that this question is only going to get opinion based answers since there are many different ways to support mobile platforms from web applications and the right solution will largely depend upon what platform the majority of your end users will be using and the amount of content you need to display.
If the majority of your users will be pc/tablet based but you also want to support mobiles with the one application then you should take a look at the bootstrap css framework which provides an easy way to create a responsive UI which will look usable on most screen sizes however it won't look like a native mobile app, which from my experience is where jquery/spring mobile have the advantage they make web apps look like native mobile applications although whilst they can viewed on a pc/tablet they won't look great scaled up.
In my experience if you want a great user experience on both mobile and pc you should create 2 separate User Interfaces each one focused on a specific platform otherwise one or other user experience will be compromised in some way.

Converting a regular MVC site for use in phonegap

I have a site that's done using ASP.NET MVC and jQuery. Is it possible to modify my existing project without too much of rework so that it can be used in phonegap to create iphone/android apps?
Here's an approach: move your logic to an MVC WebAPI (or other REST/webservice) project, then convert the MVC site into a simple html/javascript/css/image site (Mobile site). Then refactor your Mobile site to use Ajax/JS to query the WebAPI/Rest services you created. Once you've separated your code this way, you can then package the Mobile site with Phonegap. I'm not sure how much work that will be for you or your project. If you're using a lot of Html Helpers or Razor markup in your views it may be too involved.
The core point of my suggestion here is to separate your mobile UI layer and the backend processing layer so you can only package the Html5/UI/Javascript layer with Phonegap and leave the backend processing on your web server. I don't think I need to explain this, but obviously the app packaged with Phonegap is not going to have the MVC/.Net framework available on the mobile device to render views or execute controllers, etc. By migrating your UI to be simple Html5 and Javascript you can use Ajax/Jquery/Javascript calls against your backend, which you will probably want to host in ASP.Net MVC WebAPI.
Edit: Guess there was some confusion about my suggestion. I'm not saying this is the only way to do go, but this is what I'm familiar with as it's how our team builds our desktop/web + mobile + phonegap + mvc4 + webapi + kendoui application. This pattern works well for us so maybe it'll work for you too, or at least give you some ideas on how to structure your solution. Good luck!
I'm not sure but you need a server to compile the ASP.NET right? so I don't think that will work for you. I think you need to work with AJAX to do your ASP.NET work and separate your ASP.NET code and your HTML-jQuery because Phonegap wants a index.html file. You can store your ASP.NET files at a server tough
The answer to your question really depends on the type of site you are trying to convert. Are you just trying to put a native framework around HTML and get your app into an app store?
If it is is mostly or entirely informational in nature and you have simply used MVC to build brochure-ware type pages then it should be fairly easy to move. This assumes that there is little to no logic other than page to page navigation.
If your site instead pushes a lot of data around that relies on a back-end server you will need to re-architect it to store data locally or pre-fetch it via a manifest. Next you will need to implement a strategy that allows you to push your local data back to the server.
Does you app need to run in a disconnected state?
Phonegap is one of the options if you want to target multiple mobile platforms & may be most widely used. Since you are using jQuery, jQueryMobile will be a least learning-curve path to use. Effort is mostly on the front-end UI and will depend on how many screens you want to design to provide a sub-set or the full set of functionality you already have on the web UI. Most likely you will have to redesign your screens using the jquery-mobile UI widgets documented here. It is also a good way to show it to your customer the initial screen design with navigation.
jquery mobile is great for learning and designing , but it's slow in the web browser control that phone gap runs in .
you'll need a more lightweight framework for this .
you can use an inappbrowser control to show your site in case it's responsive , but you wont have the device camera and contacts and so ...
take a look at : http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

javascript framework for ipad safari browser and desktop web browser

i am in the process of selecting a technology for building an application which would be targeted on the ipad safari browser or the normal desktop web browser. I am leaned towards YUI since it has mobile support and custom libraries. i am not going for DOJO since it doesnt support addition of custom features on their libraries and not GWT because it is a single page application which causes the flow between pages very slow. any ideas are welcome
I would go with jQuery mobile.
Sencha Touch uses all the latest doodads in webkit, and if you're only looking at Apple OS's you would be insane not to look at it as a framework - but then again, I do work for Sencha. In addition to the aforementioned JQuery Mobile, you should also take a look at jqTouch if you want to stick with a markup based approach. (BTW, there's nothing inherently slow about an SPA. A well programmed SPA should be lower latency than a page-driven one.)

How to develpo the web based application that can be viewed on the mobile phone in asp.net(vs2008)

sir
I am the beginner of the asp.net,for my current project i need to develop a mobile web application using asp.net 3.5 that can be viewed on an Phone and all other browser what to support it, but there is no longer a template in VS2008 to enable mobile development. please give some more idea about that sir,Thank you.
You would need to create a page that is specific to each mobile browser you want to target, or create one that works on the lowest common feature set across all.
Using ASP.NET or any other server based framework should make any difference, it is more how you render it and what functionality you provide to the limited mobile browsers that is key.
Learn about General Mobile development at http://www.mobiforge.com/
For ASP.NET specific technologies look at http://mdbf.codeplex.com/
Details about using MDBF (with ASP.NET MVC - but the basics still apply) cand be found at:
http://www.hanselman.com/blog/MixMobileWebSitesWithASPNETMVCAndTheMobileBrowserDefinitionFile.aspx or the video at http://videos.visitmix.com/MIX09/T20F.
For publishing mobile content from the same URL than web content you can use mobile phone detection software. Try:
http://www.moviladetection.com/

Resources