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 .
Related
We have an application built with ASP.NET MVC 5.
For that application, we've built several URL-related HTML helpers that act like this:
Imagine there is an anchor that leads to certain URL, i.e. /Customer/Edit/5. We have a helper that will in the background ask ClaimsAuthorizationManager (which is part of Windows Identity Foundation API) whether the current user can perform action Edit on resource Customer. If yes, HTML markup for anchor tag will be rendered. Otherwise, nothing will be rendered.
With these helpers, we've been able to have dynamic website based on background policies that define URL's user can access based on specific claims.
Now we need to push the same logic to AngularJS based SPA.
So again, goal is to skip rendering of URL-related HTML if user is not allowed to access that particular URL.
I've not been able to find any good resources on how to perform this kind of authorization with AngularJS.
Is there a proper way to do this or should I go with some custom logic?
Are there any good references that I can read on?
Angular works great in RESTful applications. In your case, you could set up your app to fetch your claims as JSON and set your angular template to render accordingly.
But you can also use MVC's helper methods on partial views and use those partials as templates for your angular application. So when your angular app fetches the html template at foo/bar/baz (via route or ng-include or directive template or whatever), your html template will come back with the MVC partial view instead of a static html file. It's a little dirty, but it works in a pinch.
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.
I have a asp.net mvc4 web application which for example allows me to manage members and member resources to the site.
On the member's home page there are several different sections of details about their profile. I want to use angular.js and webapi(entityframework) to allow them to edit their address details in place and save them without a page postback. I imagine the best place to start is to have a partialview which displays these address details as part of the main page view.
Are there any examples of such a setup?
You can definitely do this. First, for switching the details based on which section the user selects you have two options:
1) Create a module and setup routes. The routes will allow you to have a base HTML page with an area where you can switch partial HTML 'views' in and out based on the URL that you are clicking on in the application. The AngularJS site has a tutorial where they do something similar. Pay notice to the ng-view explanation.
2) You can create custom directives and fetch an external HTML partial page. In the directive you 'compile' the HTML partial which allows you to use any directives that are on that page (ng-click, ng-class, etc) and then render it where the div is declared in the original page. This is a bit more advanced, so look at the ng-view example first.
For sending the data back to the mvc application, all you need to do in angular is declare a resource with the url back to the mvc app where you post the data and then send it some data. Something like this:
$resource('api/updateUserData',
{userName: userNameVar, userEmail: userEmailVar},
function(data){
//callback code where you do something with the returned data if any
}
);
There is a nice github project called angular-app that has a basic CRUD setup, shows you how to layout the angular app itself, how to use tests, how best to structure the angular files, etc. This may also be a bit more than you need for this small project, but it can at least give you some ideas on how to move forward if your app grows.
In my ASP.NET MVC site all pages share the same content (header & top menu).
What are my options to generate that content is only one place and reuse it in all pages. I also want the link the user is currently on to be handled appropriately (not show up as a link).
In MVC3 this is usually done in the layout page: http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx
In my ASP.NET MVC 2 application, I use a Master Page as suggested by Rich. I just wanted to add that I use a Master Model that all of my view models inherit from to return dynamic data that is needed in the master page (i.e. something to help you determine the active link to highlight). Every time I render a view I explicitly pass it a view model so those values from the master model are always available.
That master model gets its data from things that are globally available (i.e. my custom identity, http context properties, etc.) - because I don't want to manually initialize those properties every time I render a view (which defeats my goal of thin controllers).
You can also use ASP.NET Master pages. http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
If you start a new ASP MVC project in Visual Studio I believe it'll give you a masterpage in /Views/Shared
If it's dynamic data; then you can always use a RenderAction() inside of a Masterpage. Is this dynamically generated data?
I have an MVC application that I am creating that I have to integrate regular WebForms into the site. The WebForm pages will be using a ReportViewer control so I believe that won't work in a regular MVC view because ReportViewer uses ViewState, etc.
Is it possible for me to create a regular Web Form that uses an MVC View Master page? If so...is it possible to use the Html helper methods such as RenderPartial?
Is it possible for me to create a
regular Web Form that uses an MVC View
Master page?
I don't know for sure, but it might work, as long as it's just markup and doesn't use any MVC-specific features.
If so...is it possible to use the Html
helper methods such as RenderPartial?
Nope. If you use it this way, the Html property will not be set automatically, and I don't know of any way to hack it in.
We began a project in WebForms and realized partway through that MVC suits our purposes far better, so until we can finish migrating away from WebForms we have to maintain two separate versions of each of our "portal" elements (tabs, logout buttons, etc.). It's a pain, but it's doable.
Instead of using RenderPartial you could call a MVC controller with ajax from your webforms app and use the html it returns.
if (Request.IsAjaxRequest())
return View("someascx", model);