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.
Related
I have MVC application. In one of the views I need to show or return a light weight WPF xbap page (running in IE or Firefox).
What will be the best approach to combine these two technologies in one.
Perhaps you have to create 1 extra project with WPF XPAB and just attach like sub-project under IIS to the primary one and refer to that page.
I come from using ASP.NET MVC/Web API and now I am starting to use Angular but I am not clear on the proper way to mix them.
Once I am using Angular does the MVC sever side concepts still provide any value ? Or should I strictly be using Web API purely to get data for the angular HTTP calls ?
Any tips you have for a ASP.NET MVC guy transitioning to Angular would be helpful
Pure Web API
I used to be pretty hardcore with ASP.NET MVC but since I've met Angular I do not see one reason why I would use any server side content generation framework. Pure Angular/REST(WebApi) gives a richer and smoother result. It's much faster and allows you to build websites that come quite close to desktop applications, without any funky hacks.
Angular does have a little learning curve, but once your team has mastered it, you'll build much better websites in less time. Mainly this has to do with the fact that you don't have all these state(less) issues anymore.
For example imagine a wizard form with any traditional server side framework. Each page needs to be validated and submitted separately. Maybe the content of the page is dependent on values from a previous page. Maybe the user pressed the back button and is re-submitting an previous form. Where do we store the state of the client? All these complications do not exist when using Angular and REST.
So ... come over to the dark side ... we've got cookies.
Similar question
AngularJS is more associated with the single page application paradigm, and as such, doesn't benefit much from server-side technologies that render markup. There is no technical reason that precludes you using them together, but in a practical sense, why would you?
An SPA retrieves the assets it needs (JS, CSS, and HTML views) and runs on its own, communicating back to services to send or retrieve data. So, a server-side technology is still necessary for providing those services (as well as other means such as authentication and the likes), but the rendering parts are largely irrelevant and not particularly useful because it's a duplication of efforts, except MVC does it on the server side and Angular does it on the client. If you're using Angular, you want it on the client for best results. You can make Angular post HTML forms and retrieve partial views from MVC actions, but you'd be missing out on the best and easiest features of Angular and making your life harder.
MVC is pretty flexible and you could use it to service calls from an SPA application. However, WebAPI is more finely tuned and a bit easier to use for such services.
I've written a number of AngularJS applications, including a couple that migrated from pre-existing WebForms and MVC applications, and the ASP.NET aspect evolves towards a platform for delivering the AngularJS app as the actual client, and for hosting the application layer the client communicates to via REST (using WebAPI). MVC is a fine framework, but it usually finds itself without a job in these sorts of applications.
The ASP.NET application becomes another layer to the infrastructure, where its responsibilities are limited to:
Host the dependency container.
Wire the business logic implementations into the container.
Set up asset bundles for JS and CSS.
Host WebAPI services.
Enforce security, perform logging and diagnostics.
Interfacing with application caches for performance.
Another great thing about an SPA is it can increase bandwidth of your team. One group can blast out the services while the other lays in the client app. Since you can easily stub or mock REST services, you could have a fully working client app on mock services and swap out for the real ones when they're done.
You do have to invest up front on Angular, but it pays off big. Since you are already familiar with MVC, you have a leg-up on some of the core concepts.
It depends on the project you are working on.
If angularJS is something new for you I would rather pick a small low risk/pressure project to get started and ensure you learn how to do things in the right way (I have seen many projects using Angularjs wrong because of pressure, deadlines... lack of time to learn it in a proper way, e.g. using JQuery or accesing the DOM inside the controllers, etc...).
If the project is a green field one, and you have got some experience on AngularJS, it makes sense to abandon ASP.net MVC and in the server side go for pure REST/WebAPI.
If it's an existing project, you can pick up a complex subset of functionality and build that page as a separate angularJS app (e.g. your app is composed of a big bunch of standard simple / medium complexity Razor based pages but you need and advanced editor / page, that could be the target piece to build with AngularJS).
You can use Angular framework for front end development i.e to construct views. It provides you a robust architecture and once you learn you will find it's advantages over Asp.net MVC's razor view engine. To fetch data you have to use WebAPIs and now ASP.Net MVC project support both WebAPI and MVC controllers out of the box. You can refer below link start with Angular and ASP.Net MVC application development.
http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/
There are two frameworks currently available for developing UI components for angular applications. I have used both these frameworks in one of the angular projects that I worked.
Material
https://material.angular.io/
PrimeNG
https://www.primefaces.org/primeng/#/
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
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.
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.