MVC and Web API Projects in the same Solution - c#

I created a solution a while ago that contains a Web API 2 project (provides JSON data to mobile devices) and a Class Library (includes my data access services).
The Web API project uses Ninject for DI and everything works fine.
Now I need to add a separate MVC project for a few web pages. The api should be accessible from www.example.com/api/controller, while the website should be accessed through www.example.com/controller.
The problem is that each of these two, has a different "Register" method with seemingly incompatible route collections. If I set the MVC project as the startup project, routes for the api are not registered, and vice versa. If I set "Mutiple startup projects", they run on different ports which is not my cup of tea.
How I can set the MVC project as the startup project, while registering all routes for both of them?
One more thing. Because the Web API project was created sooner, Ninject configuration has been written inside it. Of course, some of the services from the Class Library project are needed inside the new MVC project. Do I have to move Ninject configuration to the MVC project, or they just work because they are run on startup of the Web API Project?


This 2 projects are independent from each other like 2 different applications even if they are in the same solution.
To succeed what you try to achieve you have to:
1) Deploy your MVC project to www.example.com (main virtual application).
2) Deploy your WebAPI project to www.example.com/api (api folder is a virtual application). Don't forget to remove api from your WebAPI routes (other wise you have to use this route www.example.com/api/api/controller).
Doing this you can acces independently both projects in the same url.
For NInject part, you can register again the services in the MVC project. Another solution will (which i recommend) be to make a class library project and register there the services after that you reference this class library in both projects.


What I like to do, is to have the MVC and WebAPI project in two separate projects (separation of concerns) but let them share the same business logic.
I like to utilize the Command and Query pattern. So all commands and queries is located in another solution project, which both the MVC and WebAPI project has access to.
I deploy the MVC project on the www.domain.com path, the WebAPI project on the api.domain.com and enable CORS on WebAPI for the www origin.

Related

How to publish multi-project solution on Azure

I have a solution with 2 projects (MVC and API) and 2 class libraries.
I have successfully published the MVC project to Azure (azurewebsites.net) through Visual Studio. However, when I try to publish the API project (which the MVC "frontend" uses to query the database), it breaks: meaning, the published MVC project - which was previously accessible - returns HTTP 404 instantly. The API project isn't available either.
I have tried the following:
API has the same URI as the MVC +/path
API has a different URI than the MVC (differentPath.azurewebsites.net)
Use the same publish profile for both projects

VS Solution Configuration for Web API / MVC

I've been working in ASP.Net WebForms for the last 10 years and am trying to move myself into some more current technologies. I therefore am just doing a small Todo list project with the following outcomes.
Setup a central SQL DB
Create an ASP.Net Core Web API project to handle data requests
Have a ASP.Net Core MVC project that has a web interface
Create a PWA application to install on both iOS and Android
I have completed steps 1 and 2. I have got to step 3 and not sure how to configure the MVC app. I have a few questions around how I should set this up.
Please note that I have setup the Web API project with .Net Core 3.1 and have used Entity Framework and so therefore have a DB Context.
Should I house the MVC project in the same solution as the Web API project.
If I do house the MVC project in the same solution should I be calling the DBContext directly (c# not javascript) from the WebAPI (setup as a reference) or should I be calling the Web API controllers directly?
If I do house the MVC project and the web API project in the same solution - when I go to deploy this real world will I be able to separate the 2 projects as different hosts so that my WPA can get to the Web API.
Should I have the MVC project completetly seperated and consume the WebAPI project as an external project.
Thanks
2.

This can be organized in many ways. I can tell you how I would proceed.
(Assuming you are moving to .net core world).
I will try to describe how to organize your solution in separate projects, and I will assume you want to use entity-framework, repository and unit of work patterns for DB access.
I would create the following projects in my solution:
one .NET Standard project to hold only models (entities and DTO's) - name it "YourNamespace.Models"
one .NET Standard project to hold repository and unit of work contracts/interfaces - name it "YourNamespace.Contracts"
one .NET Standard project to be your data access layer - name it "YourNamespace.DAL". This is where you install EF Core, where you would have your entities configurations (if using Fluent API), your migrations would be here also (if needed), your repositories implementations, as well as the unit of work and database context.
one .NET Standard project for your services - name it "YourNamespace.Services"
one API project for your API controllers/REST services - name it "YourNamespace.TodoAPI"
one MVC project for MVC controllers - name it "YourNamespace.TodoMVC"
This structure is nice for using dependency injection for your services and anything else you need.
Make sure to select the Multiple Startup Projects option under Set StartUp Projects (right-click on your solution).
Select both API and MVC as startup projects.
Something similar is described here

Add Angular 4 to an ASP.NETCore Project

I want to utilize Angular 4 in my ASP.NetCore 1.1 project, within Visual Studio 2017 (read as: *.csproj file)
Previously with ASP.NET Core 1.0 and Visual Studio 2015, you could simply add AngularJS (1.x.x) into the project.json as a dependency and it would wire itself in.
Now, with ASP.NetCore and VS2017, the project.json file has gone away, and the only documentation I can find refers to STARTING an Angular 4 project by using the CLI and using the CLI to generate a NEW angular app. I don't really want a new project or have to refactor everything I have created to provide a service to a separate UI project. I just want to augment my app with some added client-side UI experience.
Any suggestions?
Update
This questions has been getting a lot of views and the information is of little help so I'm providing this update.
Visual Studio 2017 (*.csproj)
Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: Use the built in template! Best option IMO.
Asp.Net Core 1.X + Angular (v2.0~v4.0)
Create VS Project.
Create Angular Project via Angular CLI
Configuration and setup details : Link
Visual Studio 2015 (project.json)
Tooling: up to version -preview2 - No further updates, all new .NET Core features will be moving to VS 2017
Asp.Net Core 1.X + Angular (v2.0~v4.0)
Asp.Net Core Template Pack
Note: I wouldn't endorse a bad VS Plugin, Mads Kristensen does good work.
Configuration and setup details : Blog post
Asp.Net Core 1.X + AngularJS (~1.5)
Configuration and setup details : Microsoft Tutorial
Asp.Net MVC 5 + AngularJS (~1.5)
Pluralsight Blog Guide
Notes: There are many other ways to get Angular to work with ASP.Net / .NetCore projects such as NPM, Bower, NuGet, etc. I tried to highlight the ones which are simple and actually work. Also these are in line with the direction Microsoft is moving in, according to the Pluralsight blog post above.

[i am aware you didn't ask this specifically but just wanted to share a thought which is very relevant in my opinion]
I was at the exactly the same point a few months ago and i decided going with angular cli. and i thank God i made that decision.
Uncomparably more clear and it actually put things how they should be: .net core web api backend and completely separated angular client. just exactly the same as you wouldn't put your iphone/android app into VS solution, there is no real reason to put angular one neither.
UPDATE
Either use MVC with Razor, OR use Angular as a SPA, and if you use Angular, use the Angular CLI.
And if you use angular, feed data into it with asp.net (core) Web Api as a REST backend

I can see how this is confusing, but dee zg is correct. You're going to want two separate projects. One will be the .net core backend api (REST) and the other will be the Angular 2 spa. There will be a complete separation.
With AngularJS, you could just drop in the js file into a razor view and call it a day. However, with Angular 2/4 and React, it's best to host each project in it's own solution. This might seem silly at the beginning, but when you build out your api, it can be easily future proofed by having the capability of also being consumed by mobile apps, desktop apps, etc.
I know there is a dotnet spa services angular cli powershell command for .net core, but it is really kind of a mess and actually outputs invalid html that could possibly be detrimental to SEO, etc. It's best, IMO, to just use the angular CLI in a separate project.
When it comes to production, you'll host the .net core api and the angular 2 projects separately.

It’s not totally clear to me what you mean by "Add Angular 4 to an ASP.NET Core Project", but one way to do this is the following:
Create an Angular 4 project (using angular-cli).
Create an ASP.NET Core project (using .NET Core CLI) in the same directory as the Angular project.
Adjust the webpack.config.js file (which is part of the angular-cli installation) in order to automatically put bundled files in the wwwroot directory (webpack will be responsible for this).
On my blog, I have a detailed tutorial demonstrating this approach.

I have been working on a Angular 4(SPA) and .Net core web api. You can check out the repository and you might get a better understanding.
I had to find solutions to many areas like authentication, authorisation, social login, MongoDB connector e.t.c
Hope this would save time for someone stumbling on this.
https://github.com/Sathya-B/Angular-.NetCore-MongoDB

I am using Angular 6 and ASP.NET CORE 2.1 but this might work on Angular 4.
CREATE A NEW ANGULAR PROJECT IN VS2017:
Create a new Web App in VS. The folder name should not contain '.' since
Angular will not accept it. For example: DatingApp-SPA. And then select 'Blank'.
Close VS so that it will not lock the folder for any permission
Navigate to the base path of the project folder.
Run 'ng new DatingApp-SPA'. This will add Angular goodies to the existing DatingApp-SPA project.
Open the solution again on VS.
CREATE A NEW COMPONENT:
Open command prompt and navigate to the project folder
Run the command:
ng generate component component-name-with-lowercase
This will generate the .html, .spec.ts, .ts, .css files and update the app.module.ts
CREATE A NEW SERVICE:
Open command prompt and navigate to the project folder
Run the command:
ng generate service _component-name-with-lowercase_
This will generate the .ts and .spec.ts by default in the \app folder. We can move these files on another folder like \app\_services

Share views (.cshtml files) between projects in asp.net core solution

I have a project which for various reasons have a number of controllers and views that are essentially the same. At the moment they are replicated between projects so there are several copies of each in each project.
I was wondering if there was anyway to put these in a separate project (e.g. a class library project) and amend the View Locator capabilities (IViewLocationExpander?) or some other means to get it to look in a different project for these views.
I know it was possible in “full” asp.net with a bit of hacking about and it was never very clean or elegant, so wondered if there was any better way with asp.net core?
Thanks

You could create a AspNetCore Class Library and use AspNetCore Precompiled Views. Also as indicated in this StackOverflow answer. That should allow you to compile and share the Controllers and Views as you want. The views (.cshtml files) would no longer need to be deployed as they would be compiled and available in this class library.
Then either add a reference to this class library project (if in the same solution) or create it as a Nuget package and add it to the other projects. (This can be done by a private Nuget server or Local Nuget repository folder).
Update: ASP.NET Core 2.1 has a new Razor SDK which makes this simpler. It emits a Views assembly (AppName.Views.dll).

How to publish Dot.Net solution correctly with multiple project reference

I have a solution that contains multiple projects
PROJECT SOLUTIONS:
ASP MVC Project
Web Api project
BLL project (class library)
DAL project (class library)
the web api project depends on the BLL and DAL project
the ASP MVC Project has no dependence , it consumes the only service from web api project
I start by deploying web api project in IIS 7(by right click and choose to publish in the contextual menu), when deployment is finished I receive an error message :
the library BLL and BAL were not recognized
I can not identify the source of this problem
can someone help please ?

If you have used BLL and BAL to web api project. Then expand the Reference section of web api project then open this two BLL and BAL properties and make their property copy local as true

Categories

Resources