I have finished a few MVC partial views which load their data using calls to a webapi Get method, to preload the data used by the angular controller.
This method works but it feels more logical to do this via the initial asp.net-MVC Partial view load via #Model for example. Rather than waiting for the page to load and angular to call the get method of my webservice i could have prepopulated the Model, but im not sure how this would pass the data to Angular using this method.
I have had the same issue (if one call this an issue) and ended up doing binding the model to the partial view at the server side. The main rational for the decision was that the model was already available at the time at the server side and I was not building a Single Page Application.
Had I been developing a SPA, I would store the partials as templates at the client side, then grab the model via WebAPI and do the binding
If you use AngularJS,then it's not need ASP.NET MVC. Just use web api for get data.I written a demo site for AngularJS+ASP.NET WEB API,hope to help you,this is the source code.
Does your web page have a lot of heavy client-side interaction or are you simply using Angular to initialize the data for your page on load?
If there's a lot of client-side interaction, you will probably want to keep using Angular. If not, you might want to go back to using MVC since your use case doesn't really require Angular.
Related
I'm looking at creating an mvc app with vue js with 'mini spas'.
Each page would be a mini spa.
I'd like to know how best to get data onto the page.
should the controller action render empty views with no model, then in vue call a web api to fetch the model and assign to data - is this the correct way to load a page seems like an extra request is required?
First of all, I highly advice against using one SPA per page. I've actually worked in a project that used that approach and it's been a nightmare for frontend developers to maintain on the long run. There are two ways you can and should use vue and the "mini SPA" approach is the worst of both worlds.
You can either
Use vue to only render single components for interactivity and let your backend framework do the rest of the rendering and data gathering and pass that data via static property bindings to the used components.
Or use vue as a SPA that communicates asynchronously with an backend api. In either of these cases you have a clear seperation of concerns, which you'll lose when doing 'mini SPAs'.
If you still chose to do it: pretty much the only way is what you've already mentioned, with your backend controller returning one compound vue component that renders the rest of the page and uses asynchronous calls to fill itself with data. Le me say it again though: This will be a nightmare when it comes to state management and maintainability.
In my opinion, the cleanest way to go is seperate frontend into a vue SPA with vuex as state management and backend into an HTTP (REST) API.
I'm learning AngularJS and playing with mixing it with ASP.Net MVC. I'm wondering, should I still pass model from MVC controller to the View and then load it to Angular model? Or should I just open View without model and request data needed by $http by AngularJS? What is the preferable approach?
You should request data from AngularJS to your own controller or api, its not good practice to load all data at once with model, but part by part that is needed.
For example if you have a 1000 pages, and user comes to your website it's not good to load data for all 1000 pages. Its much better to load data for pages that user wants to see.
I'm developing an MVC website for mobile. The website should be compatible with Phonegap in the future, so I've done most of the client side logic using Web Api controllers and Ajax calls and my views are not linked to any Models. All my .cshtml files are now pure html/javascript codes.
But can I use MVC controllers to return empty views alone?
Will this work when I'm converting the code to phonegap?
because controllers usually return .cshtml files as views , but I will convert all cshtml to pure html in the future.
There is nothing to do with MVC in phonegap, phonegap uses Html/CSS for designing (front end) and JavaScript/JQuery/Ajax for logic (back-end).
Yes, you can return empty view but what about query and database related stuff, you have to use controller or model. This is all server-side stuff.
So answer is totally dependent on how is your Mobile App, for database connection you have to pass controller method's url in ajax call. For now, go ahead...
TL;DR
What are the best practices when using .NET Razor views and AngularJS?
Context
We are developing a public website (not an intranet application) using mvc4 with razor, and we weren't very familiar with client script, so we started with what we knew: jQuery.
But now things are getting more complicated and we'd like to switch to AngularJS.
On the .NET part, we use Razor templates and UIHintAttribute (plus some custom ones) to render the right html "control". We also add custom html attributes to give extra information to the jQuery part (like title for a tooltip....)
So we already use a declarative way of setting the user interface behavior, that's why AngularJS seems a good option.
Questions
Since we already have models defined server side, and since AngularJS also uses models, wouldn't it force us to duplicate code?
How do we deal with data binding feature, since we already do some binding server side (in the views). Should we make a completely asynchronous application, making AJAX calls from AngularJS to load data, or can we mix both?
Anything else we should be aware of when trying to use both of these technologies?
I did some research on Google, but I can't find detailed ways of mixing Razor views and templates with AngularJS... Perhaps that's just not a good thing to do?
We dealt with this issue for months when working with MVC plus another JavaScript framework (Knockout). Ultimately, if you're going to be using a client-side MV* framework for rendering your user interface, you will find that mostly ditching Razor is going to be your best bet.
Most of the major MV* JavaScript frameworks, including AngularJS, assume you will be maintaining UI state and rendering your user interface based on JavaScript models or view models. Trying to mix in server-side rendering is just not going to work very well.
That's not to say there is no use for MVC when it comes to developing an Angular application. You can still take advantage of some great features like ASP.NET Bundling and Minification. And sometimes it works really well to embed JSON directly into the page using a Razor view or partial as opposed to making an additional AJAX call.
As for models, you may want to take a look at Breeze.js. It's a JavaScript library for data access that goes great with ASP.NET on the server side to share model metadata.
We wrote our own data binding mechanism that synchronizes the angular.js model with a view model on the server side. The javascript model is generated from a JSON serialization of the server-side view model to avoid the duplicate code that you were talking about.
We are using SignalR to update the client's view model from the server.
Server-side changes of the C# view model properties are sent to the client as a packet containing the path to the property, e.g. Persons[42].Address.City, and the value itself, e.g. New York. The view model inherits a base class that takes care of generating the property path, so the actual view model looks quite clean and we can concentrate on business logic.
Client-side changes of the javascript view model properties are sent to the server in the same way. To catch the change events, we encapsulate all fields of the original javascript model in get/set properties where the setter sends the update packet to the server.
Server-side methods of the view model can be invoked in a similar way. All objects in the view model have an invokeMethod function that can be used like this: Products[42].Manufacturer.invokeMethod('SendEmail', 'mailsubject', 'mailbody'). This will send a packet to the server containing the method path Products[42].Manufacturer.SendEmail and the arguments as an array of ['mailsubject','mailbody'].
In conclusion, the html view (kind of) binds to the view model on the server side where other systems, such as regular Razor views can work on the same objects.
The source code can be found here: SharpAngie.
Is there any sane way to use these?
What I want to have - is a single page with a nav-menu and <ng-view> below it.
And all the routing should be angular's responsibility.
But, I'd like to keep mvc goodness as well. I like neatly organized server-side controllers and razor pages.
I can't access .cshtml directly though, so how do I access my templates?
I don't want the main page and its content to be reloaded ever. It loads once and after that, all the navigation to other pages should be loading associated templates only.
How can I achieve that?
I can't find a single thorough example how to use them together.
Angular is used for single page web applications (SPAs).
ASP.NET MVC is used for server-side pages.
In ASP.NET MVC with Angular, your Index.cshtml or whatever your main view page is will contain all your JavaScripts and load your Angular app. You shouldn't ever navigate away from that page again. Angular's router just changes the URL (using a hash) and rebuilds the DOM based on the route.
They aren't supposed to "work together" for navigation. The only way they work together is if you create a REST API (or any API I suppose) with MVC and access it through Angular ($http, $resource, etc).
Checkout this project https://github.com/kazimanzurrashid/my-walletz-angular/blob/master/source/MyWalletz/Views/Home/Index.cshtml#L11 (shameless plug i am the owner) there is a helper method called IncludeClientView which inlines all the client side templates in the view. If you want to dynamically load the templates then create a controller and pass the template name from the client, then in the controller use partial view to return the template.
please install the AngularJS SPA Template from visual studio>> extensions and updates .