All the examples I've seen, even the "official examples" (spa) all use an MVC project always having a view (index.cshtml) to run a project using angular (2/4).
Angular is a front-end framework that does not need a view (index.cshtml) to fulfill its function, the concept of front-end is to develop everything next to the client without depending on the backend.
Then, because you have to use a server-side view to work the client side.
What would be the best way to work with an application using angular (2/4)? Of course it would be better to use a single solution for all projects, but i see that can't separate the front end with back end.
Related
I maintain an ASP.NET MVC web application that uses the conventional MVC architecture except for any route that starts with /admin, which is handled by an older WebForms architecture. The MVC and WebForms code coexist in the same .NET 4.8 Framework project, and the user of the site can't even tell there's any difference, because the styling is the same and we use url prettifying tricks so that you can request /admin/something rather than /admin/Something.aspx.
This all works fine, except that WebForms is really showing its age and now we want to port the admin stuff to Vue. But I can't figure out how to deploy Vue such that it has the same coexistence with MVC.
I know that I could continue to use Razor pages and add Vue with a script tag, progressive enhancement style, but I think that makes it impossible to use single file components, which is one of the Vue features that seems important.
It seems like the most functional way to use Vue is to create a proper Vue site, with build step tooling, but how can I do this within an existing MVC project and just delegate one route to the new code, and port other routes over as needed?
In VS 2012, I am attempting to create an MVC 4 web application with jQuery calls to a Web API project. (Other devs will be consuming the API with our current, native app, and probably adding to the API in the future.) So I have one project that is the Web API, and another project that is the MVC 4 website. I can only set one of them to run, and they use localhost:xxxxx.
How do I debug changes to both? For example, let's say I add a new API path /api/customer/get and then a new jQuery ajax call to that path and do something with the resulting JSON. I've changed code in both projects and want to follow it end-to-end; how do I launch both? How do I debug both?
Just to be clear, the MVC app isn't making server-side calls to the API, I'm using MVC mostly to be able to easily use bundling, minification, and (hopefully) pre-compiled Handlebars templates in .NET; the API calls are coming from jQuery. As I am still relatively new to these technologies, alternate suggestions are welcome.
Thank you in advance.
I had the same problem and have found a solution from here:
forums.asp.net
The fix is to do the following:
In your solution file, click properties go to the Startup project node (if it is not already selected)
Next select Multiple startup projects. Select your website and your webservice and in the Action column make sure both of them have "Start" selected.
Now when you debug your website and put a break point in your webservice, it should hit the break point.
Coming late to the party but in case anyone else is looking for a solution, this is what was best for me: Set the Api project up to be the starting project (I needed to limit to one startup so that I could flip between browsers more easily). After firing up the service project, right click on the web/ui project and select debug, start new instance. You'll have both running and you'll seamlessly step from web to api.
I had a similar problem with my web api project. My solution consisted of an angular front end with 2 web api projects on the backend. One web api project handled "authorization" and the other handled "resources". I used the following tutorial by Taiseer Joudeh as a starting point:
http://bitoftech.net/2014/09/24/decouple-owin-authorization-server-resource-server-oauth-2-0-web-api/
Breakpoints worked on the "authorization server"... but not on the "resource server". I compared the packages from the two projects to see what was different. Once I added "Microsoft.AspNet.WebApi.Cors" to the "resource server" project, the breakpoints starting working.
I'm creating an application with a .Net Web Api project wanting to use pure AngularJS as the client side. Since Web Api is built on top of MVC, it creates MVC specific and default items that I feel is not needed. These items include the HomeController, _ViewStart.cshtml, _layout.cshtml, etc. I tried removing them but it comes up with errors. Has anyone tried to remove the MVC stuff out of the web api project and used separate client side front-end? Is it even possible to remove the MVC items without errors?
Remove RouteConfig.cs from App_Start, remove the Views directory and all sub-directories including the Views internal web.config file. Comment out or delete all the lines in the Global.asax.cs Application_Start method except GlobalConfiguration.Configure(WebApiConfig.Register). Remove the HomeController, add an index.html and any needed Angular scripts and go at it. I also added solution folders to organize my views as reusing the existing Views folders did not work. I'm using VS 2015 but is should work for 2013 also. PWE
Web API is not built on top of MVC.
The default templates bring in MVC for the sake of supporting a help page, but you don't need to use it.
You can start with an empty web project and just check Web API.
The routing piece is server routing and it's part of what maps the URL to Controllers+Actions, it has nothing to do with Angular routing.
As Mike Cheel alluded to, there are no dependencies between MVC and Web API. However, if you use the built-in templates, it's easy to get the impression that the 2 are linked. They include a lot of stuff in these templates because they can't anticipate where you want to go with your project... so they try to cover all the bases.
For your purposes, you would probably be better off to start with an empty project and add only the components that you actually need. For this approach, some of the best tutorials and starter projects are from Taiseer Joudeh's "Bit of Technology" blog. His tutorials helped me to build an "MVC Free" web application from scratch that uses JSON Web Tokens and AngularJS Interceptors for security and Web API 2 and Entity Framework to serve up the data.
He has many tutorials on his website... but you might want to start with "AngularJS Token Authentication using ASP.NET Web API 2, Owin, and Identity". What what.. you didn't ask about security? Well... security is an issue that you will need to confront at some point anyway... and Taiseer presents a nice solution for securing an Angular/Web API application.
I have a web page developed in Catalyst MVC framework. I am using Template Toolkit for my views. I have two tables in one of my web page. I want to hyperlink one table to the other and open the other table (i.e. linked table) in a new tab or in the same page using ajax.
I am very new to Catalyst as well as Template Toolkit. I kindly request you to help me in understanding how do I make it possible? Is it possible to call a template within a template? If so how do I achieve it?
I would be grateful to accept any other suggestions apart from above mentioned.
Template Toolkit and Ajax does not naturally go together. Template Toolkit is a server side technology and Ajax is mix of JavaScript and a web browser API called XMLHttpRequest.
Catalyst can respond to Ajax requests by returning a compiled .tt-template. Template Toolkit does not care about what Catalyst is doing.
The magic is in the mix of Catalyst, Template Toolkit and Ajax. Normally this is done, as in your case, that a link in #table1 subscribes to a JavaScript event that fetches #table2. #table2 can be a Catalyst action (/my_app/tables/2) which stashes data and compiles a .tt-template.
Outside #table1 we have a #table_wrapper.
# jQuery
$('#table1 .next').click(function () {
$('#table_wrapper').load('/my_app/tables/2');
});
Does this make sense to you? I can follow up if you need more input.
Are there any recommendations for a design surface (or design tool) that could be used by a designer (the dude/dudette with the black turtleneck) in the process of building an ASP.Net MVC application?
Such that once there is agreement on the structure of the Model, and the interactions required by the app, then the designer goes away and builds out the UI (V in MVC) using this design tool, while the developer goes away and builds out the code (M&C in MVC) using Visual Studio.
As I understand it now, this designer person would also need to use Visual Studio and build the Views using Razor (or other view engine) syntax, instead of having the ability to build the Views using a design surface with drag-drop layout and property settings and the like.
I think you could ask them to give you a harcoded HTML for each view... then, you replace the harcoded data once you place it in Razor.
That is the beauty of Razor... it is very easy to pass from fixed HTML to a razor view.
Razor requires programming, and creating views is not an arbitrary task. I'd let the designer work in whatever program they like where they can excel about design and let the programmers worry about how best to create the views and programming in Razor (which is really just C#/VB with some extra syntax).
It depends.. what kind of skills does your designer have? Are they a true designer (no JS/jQuery/etc knowledge.. they live & breath PSDs) or are they a designer/front end engineer (they know js/jQuery, the diff. between IE7 and IE9 from a rendering pov).
If you've got a true designer then the best thing to get would be HTML. A PSD would be okay as well but if they can convert their design into HTML they've done a lot of the hard work for you (unless you love figuring out floats and margins and all that jazz). That said if you're using something like Twitter Bootstrap or Blueprint CSS then they would obviously have to know how to use that as well.
If you're lucky enough to have a designer/front end engineer then it's well worth your time to teach them some basic razor synax like #Url.Action and #Html.BeginForm. They can tell you the actions they need and you can work together by giving them a fake data/response version first which they can use while you create a real version. And in this case they can either use Visual Studio OR you can set it up so that they have your site hosted via IIS on their machine and they just use your source control to get latest which automatically gets placed in the right directory. Then they can just continue working in whatever editor they prefer as they should only be working in html which will get updated live. That said if you're using ASP.Net MVC 4 bundling you'll have to decide how to maintain bundles.