19

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?

appanponn
  • 465
  • 4
  • 9
Prabhu
  • 12,995
  • 33
  • 127
  • 210

5 Answers5

34

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!

mellodev
  • 1,597
  • 12
  • 20
  • 3
    Not sure why this was downvoted but this is the correct path. – Joey Gennari Oct 30 '12 at 21:07
  • 1
    Why does this need to become a Web API project? (And I didn't down vote it.) – andleer Oct 30 '12 at 21:49
  • 2
    Of course it doesn't have to be WebAPI, that's just one approach and probably the best practice if you're already .Net and MVC. The real suggestion here is to break the project into a UI/Javascript/Html layer calling backend services. – mellodev Oct 31 '12 at 01:13
  • 3
    Problem is when you use some ASP.NET MVC functionality that cannot be converted like AntiForgeryToken? Can you explain how to use AntiForgeryToken for login security and still migrate everything to simple HTML views ? – Radenko Zec Feb 20 '13 at 13:15
  • How does phonegap handle the layout.html file? Does it know this is the parent file? – Matt Aug 26 '14 at 14:03
  • @RadenkoZec It is quite easy to use the anti-forgery token in an HTML/Ajax app. You need a custom attribute to validate the token though, and of course you need to include it in form data you return from the server. E.g. http://stackoverflow.com/questions/22780958/where-exactly-to-put-the-antiforgerytoken – ProfK Sep 18 '15 at 14:42
1

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

Reshad
  • 2,570
  • 8
  • 45
  • 86
1

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?

andleer
  • 22,388
  • 8
  • 62
  • 82
  • The app doesn't need to run in a disconnected state. But it does interact with the database to load data dynamically based on user action. I'm using jquery to make ajax calls and to update the DOM based on the response. – Prabhu Oct 30 '12 at 21:55
  • 1
    I don't have any direct experience with PhoneGap but it sounds like you mostly need to adjust your views to become mobile friendly. I don't see any specific need to go to Web API and you can likely just continue with your current server end points via ajax. No super easy solutions but it doesn't sound impossible. – andleer Oct 30 '12 at 22:15
1

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.

appanponn
  • 465
  • 4
  • 9
1

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

Uri Bahbut
  • 11
  • 1