Dream. Dare. Do – that is Suyati’s work principle in a nutshell.
MVC 6 and Web API, merged into single software framework, is out with stunning new features. Its powerful patterns-based way to build dynamic website enables clean separation of concerns and gives you full control over markup for enjoyable and agile development. New features enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards. Join our Webinar to understand the role of WebAPI and MVC 6 for building modern apps.
VIDEO TRANSCRIPT :
MVC 1 started in the year of 2009. The major features in MVC 1 are: HTML Helpers, Ajax Helpers Routing and Unit testing. After a year they released MVC 2; features include Templated Helpers, Client side validation and asynchronous functionality. Coming to MVC 3 after one year again they introduced 2 options: Razor View Engine and Aspx engine and they gave us options to select which one you like. The 4th version of MVC was a revolutionized Web API—the most used web services nowadays. Coming to MVC 5, ASP.NET identity for authentication and authorization purpose, and Bootstrap features also introduced. So now we’ll look what is there for us in MVC 6.
MVC 6 and its features
Single and Unified Software Framework
So, coming to our 1st feature Single and Unified Software Framework. This is VS 2015 available in Microsoft website you can download it completely free, and I’ll show some example using this Ide now, I’m going to name this application Suyati Webinar so here I’ll show you what is Single & Unified Framework means, in the previous version here you can see 4.6 templates Web Forms, MVC, Web API all these are separate you can see it here, you even have options here to add that MVC, if you’re selecting Web Forms you have the options to add folders for MVC and Web API, If you select MVC ASP.NET MVC Applications you have these options to select Web API and Web Forms and if you have web API you have this option of web forms like that . So even though conceptually there are lot of similarities we were using it separately so we have to remember every name space, it was so confusing. So coming to ASP.net 5 MVC 6 you have only one all these frameworks are unified and combined into one, if you look here Web Forms MVC Web API all disabled it became one unified platform so we can go for it, we can see how MS has done it now it’s very easy for us I’ll show how it is structured and everything. It’s loading , the controllers, filters, models there are lots of similar functionality but in the previous versions we were using it as separate software framework here at solution explorer this is the structure and this is very familiar to you the controllers, Views and Models even though few other things like Configs, global access I’ll come to it later.
We’ll add a controller now, and I’ll show how that controller can be used for MVC and API as a single unified platform you can use, here I’ll give the name as Suyati, this is very familiar to you because this is a controller, so in this controller if you see this, we’ve inherited this controller so in MVC we’re inheriting this controller and Web API we’re inheriting Web API controller in the previous versions but here after, this single controller is enough for web API as well as for MVC I’ll click and show you what is… As you know before we were using System.web.mvc but now it is Microsoft.AspNet.Mvc so it has changed from system.web.mvc because for each request they were consuming 30k of memory space but now in new version more lean & fast version it is only consuming 2k and also if you see the action it is changed from ActionResult to IActionResult, here we’re using Microsoft.Aspnet.mvc I’ll show you what it is, here if we go to the reference you can see MS.AspNet.mvc if you take the properties, you can see the Package … before it was.. system.web.mvc we were using package so it was completely package based it is your choice to choose.
When comes to the routing, if we go to the startup class instead of this is the public static void main app instead of that we’re using Startup.CS so here you can see the routing you can do for MVC services, for the web API here if you go down the routing also you can use the web API that means altogether we can use this single framework for web API as well as MVC, that is the concept of Single Unified API.
Tag Helpers in MVC 6
Now we’ll go to the next feature introduced in MVC 6. Tag Helpers replaced MVC helpers what is Tag Helpers and what is MVC helpers? We go to the view, we go to the Login you can see there is @using @html.. these are called MVC Helpers so here in MVC 6 we’re using new concept called TagHelpers, it is something different and very easy especially because this client side area will be handled by designers so it is always confusing for them to use Csharp and html combined helpers so here MS introduced Tag Helpers which is very easy to use and it is almost similar to Html I’ll write an equivalent code to MVC helper in Tag helper here now, Form I’m using this is very simple I’ll show you we use asp-controller then asp-action then asp-route-returnurl we’ll copy this account, controller to here and login to here and this ViewBag.ReturnUrl to the space as well don’t forget to add @, here we have to mention the method “post” method and then for the class we’re using form-horizontal and for the role we’re using form so the entire form will be taken from here and we will put it in the closing brace you’re done with adding Tag Helper now you can remove MVC helper from here see, now we can use this form which is very convenient to look very easy to add … just like that you can add here text box also instead of asp-action you’ve to add asp so you can replace this text box you can replace this validation that means with that tag helper you can replace almost all MVC helpers ..
Inbuilt Dependency Injection in MVC 6
We can go to the next feature, it’s Inbuilt Dependency Injection, before we talk about Dependency Injection I’ll tell the definition of it, it is a design pattern which is used for the inversion control, I’ll tell you more detail like... it can be considered as a dependency as a service .. client will be there suppose and this dependency will be passed to that client or object, and not letting the object to build or … for that dependency that is the basic understanding of dependency and understanding the importance & wide use of dependency. MS Intel use in the framework default dependency injection I’ll show you how it had done we’ll go to Startup.cs in the previous versions we’re using autofact, third party dependency injection for this purpose but here in this MVC 6 we no longer have to depend on the third party autofact and… here you can see IserviceCollection, it’s the interface from Microsoft.framework.DependencyInjection this is the namespace added by MS to the framework to use this in-built dependency injection here you can see using the object they have added AddEntityFramework, here we can add the MVC like that whatever the dependency Injection is we can simply add in the configure services, you can simply add it, also if you want to use third party dependency injection just remove this and you can use the autofact or whatever it is.
View Components in MVC 6
Next we will go to main feature View Component. What is ‘View Components’? It is very similar to partial views I think you might have used many times in Partial Views, where we only want to run chunk of the base, no need to run all pages in such situations we can use View Component even though it is similar to Partial views it is more advanced and powerful than partial views, we can call it as mini controller especially when there are many complex situations are there where when we use partial views it becomes more complex such situations we can use this view component here are the situations I’ve listed here Login panel if you want to make it a login logoff things like that you can use View Component and Recently Published Articles, Dynamic navigation menus I’ll do a sample app it will be more clear for you I’ll add here, you can simply add a folder you can call it as Components I’ll add class to it and I’ll call that class as SuyatiViewComponent, now I’ll add … here, here we have to inherit default ViewComponent here, we add here a method IViewComponentResult, we simply give a method name what we do here is, we add a string items and we use some text like “Hi Suyati” and now we’ll return that text to the view return View we can give it as an object, so we’re done now, so this portion is ok so now in view we’ll add view portion shared folder I’ll add one more folder in Components one more folder Suyati I’ll add view as well from here we can add view, we’ll give the name as Default so we remove the code here and we’ll simply render that which we transferred from Controller, so now Model, so we need to call this from wherever you need, we’ll call this from Account login, from account login I’ll go down, from here I’ll write here @Component and Invoke we can write here and go to the Login and write “Suyati”, I think we’re done almost. Default we added, the class we added and the login now we can run the application, I’m going to run the application, now it is loading actually we’re using IIS Express the default server in MS VStudio, it is taking some time now the browser need to open the Express, so it is opened, we’ll get the default asp.net5 MVC 6 default template we’ll get it will render, so this is the default Visual Studio template for web purpose and I’ll click login I’ll add a respond see this one Hi Suyati like this you can add View Component, it is very light weight, very easy to use hope you all understand so this is all about View Component.
Self-hosting and Azure Deploying in MVC 6
So I’ll go back to our slide so this is the last feature which we are going to discuss here it is about Self-hosting and Azure Deploying so what is Self-hosting? I’ll go back to Visual Studio, in the previous versions you weren’t allowed to host apart from IIS Express because it was tightly coupled with IIS this is hostagnostic? The latest version is completely host.. you can run it even from Command prompt I’ll go to project.json here you can see lot of packages in this Microsoft.AspNet.Server.IIs is the package we used for IIS Express used for hosting, here you can see Microsoft.AspNet.Server.WebListener Weblistener is going to do the magic now here you can see the commands where we have given the port number as localhost 5000 so we’re just copying it so in the empty template we have to manually type all these express in this IIS Express we’re changing it to web and all done and I saved it and I hit F5 now you can see this is not hosted in IIS Express instead of that this command prompt will come and we’ve hosted in the command prompt and you can use this and see here the port number we can use that port number and … the browser and it’s all done, loading and yes this is the command prompt and now you can see here it is started, so it is started that means it’s hosted successfully now you can put it here the port number and I clicked Enter now it’s coming that means it got hosted in Command prompt and.. hosted it, no longer you require IIS Express to host this one now what we’re going to do is we’re going to publish this directly into Azure cloud. As you know this is completely cloud optimized you can simply take this publish and Microsoft Azure Websites you can take click there whatever required for example I’ll give the name Suyati , so this is already taken, so Suyati1 here you can choose the region if you’re from for example Southeast Asia you can choose No database we have so I’m not … now Create, now see actually I’ve connected my Azure account to Visual Studio, you can also do it I’m using my… account so here few more things to be done you can validate your connection here we have given Suyai1 as our main, validating will take few minutes we’ll go for next, here we can choose Release you can also KRE this is the option which you may not see in the previous version here there are 4 options we have kre-clr-win-x64, 86 is there which means that we have 2 frameworks the old and new clr core is there, we can choose which one we need, I’ll just choose this kre-clr-win-x64 I’m choosing next and it’s all done I’m publishing it, you can see here publishing happens, it’s running see how easy it is this is my account this is my portal I’ll refresh it, I can hope I can see it there we have named Suyati1, it is taking some time, it is loading only I have given Suyati1 this is loading, see this one, Suyati1 it’s already hosted now you can see it hosted here click it directly you can run the application, so this is already here clicking here it’ll go straight let’s start, some errors are coming it’s not finished yet.
Now let’s move to the demo so I’m going to take Visual Studio, I’m going to select the Visual Studio here we’ll be selecting New Project, we’ll be selecting ASP.NET Web Application, we’re going to create an Employ management system so I’ll name EmployeeManagement, under this we’ll be going to select ASP.NET 5 Preview Starter Web and here we’re going to create a demo, it is to explain a sample project using web API, at the end of this. So it’s loading so here we’ll create a light weight application that is using web API and Angular base and backend will be created using localdb using Entity Framework 7 So the basic template is displayed here, you can see this one, first of all I am going to create a web API project so for the time saving I will copy and paste some code from here first we’re going to create Employee Model.
Yeah! Here it is. It is a basic employee model. That all have all the basic validation rules and the basic properties. Name, designation, salary, and date of join. And here is the identity model that is used. Here is an identity model, this is an, if u don’t know, MVC6 Asp.net Identity user. Using this we’ll be using a login manager. Using this we’ll be going to implement employee authentication. So here we’ll be going to create an application context, Employee Application Context. This will be created dynamically when the first step, when the application will be running at first stage. So here we’ll be inheriting it from the IdentityDbContext. And, now we’re going to create the webapi controler. So we’re going to create a new folder. It will be named as API. Now we can check in to the api controller. Here what we’re going to do is that 1) we will be just inheriting the employee controller from just a controller class. So it is no more depending on system.web
So we’ll be just using the MVC6 controller. And it all leads into the basic employee rule operation
Get all employees, post operation, and updation and deletion. And the delete action. Here we’ll be implementing the webapi log using that attribute logs. So we can specify the attribute like this.
When we call a function, we’ll be specifying local host that odd number and that api/ which controller it will be specified.
So here it’s an employee controller. So we’ll be calling localhost/api/employee. So we can access those functions inside this function. And we can also specify the specific routes. If you want to delete an employee we need to specify that employee id.
So we'll be specifying inside the curly braces. So employee id is this attribute and that should be in integer format. Otherwise that route cannot be hit here.
And now we’re going to create a repository inside this one.
Creating a repository
So we’re going to create a repository. Here is the repository that is leading into the local db. Local db employee crude operations.
So this repository will be inheriting from the iemployee repository that have the basic functionalities.
Here those implementations are there.
Here we’ll be just creating a db context, i.e., EmployeeAppContext and we’ll be getting those data from local db and we'll pulling into the client side. This is just crude operations. Now we’re going to create a dependency injection inside the startup class. So we’re going to setup that start up class.
When you are looking into this one, inside that configuration service section and this will be automatically invoked at the first time that the application will be running. So we’ll be specifying its dependency injection.
In this configurations section. So when the client will be requesting this repository, it will be automatically resolved and it will be returning its corresponding objects. That will be handled by the MVC6. Here we'll be setting that dependency injection and this is the basic routing, and here we'll be creating the entity framework MVC6
That means if the application is running at first time, it will be automatically creating a database ad it will be adding these employees inside that database. And we also creating two applications users. Once is an admin role and other is usual normal role. Admin has the ability to add, delete, and do any operation inside this application.
But a normal user can only see the list of employees. So we'll be creating an application user that will be inserted into asp.net application user interface. So here we'll be specifying its persuasions. So this is an admin user and so he’ll have ability to edit, update and every permission we'll be setting as true.
And this will be running only one time in the application lifecycle.
Here's a normal user, you need password also. Now we're going to save this one. And we'll be giving a breakpoint here. We’re going to run. What is going to happen?
It’s loading. That means I didn’t update those rules that is why! So now we can update those views also and we can run this application.
So I'm going to delete the unwanted classes that is default with Visual Studio. These are coming defaultly in Visual Studio. So I just deleted those controllers.
Here is the account controller. I’m replacing it with my custom code.
Here's our code. When the user will be logging this will be executed. First this will be judgmental
And after here we'll be coming and we'll be validating the user has enough permissions to access this information. So as I previously said we'll be setting the user credentials in iusermanager getting from the SignInManager. So it will be getting from the SignIn Manager. So we'll be creating its object from the application user.
So we'll be validating that one. If the validation is success that will be redirected to the employee page. This is a sign out function that will also be dealing with the SignInManager.
Replacing the home controller
Then Home controller. We are also going to replace the home controller.
Here is the home controller. Here when a user is going to access an employee page, It first going to check if the user has enough permission to access that page. That’s why here I was setting an application user as an admin and a normal user. So if a user has enough permissions, then this will be checking if the user is an admin and the he can edit. So it will be running.
After that I’m going to add the angular portions into this folder.
I am going to add this one and this portions. So inside this, what we’re going to do is that we’ll be using angular js to call the web API things from the client side and we’ll be displaying those data inside this folder. So this is the angular base module and that will be named as employeeApp and here we will
Be specifying all basic routes and it will be running as HTML5 module.
Here is a controller. That controller has the functionalities. This is an employee list; this is an employee ad controller. This will be, it is using an employee factory. Factory means nothing; when we check into an employee factory. We will be specifying the end point of the employee. That means employee controller, this will be the API/employee.
So we'll be specifying api.Employee, this is an optional id. So whenever a controller will be making a,
User clicks an action. That will be hitting here, this will be going to save inside our local
Api controller and user should be added into this db.
So likewise we'll be adding, editing, and deleting this employees and so on. So here's an application, here we’ll be specifying which all modules would be depending on the services. So here these modules would be depending on this one.
So next I'm going to configure grunt, before that I'm going to add the rules that will be used by the angular js. So, I’ve already created those fields. So just copy and paste those things inside that ww root folder. Here we'll be creating all static pages that will be using that employee. So this is an employee js
This is a just a basic HTML using basic angular modules.
Replacing basic models
Now we'll be going to replace some basic models. So we'll be deleting these default templates that is MVC providing.
So here’s the log in module. That is defaultly using.
I’m deleting that basic things that is provided by asp.net.
So this is the basic layer. Here we'll be starting the application using angular js, i.e, this code. And here we basi
After this we’ll be rendering this body. And it will coming into this dashboard page. From here onwards it will be dealing with the angular js. So we will specifying ng-view here.
So according to the route that is displayed in the angular js it will be moved into its corresponding route on the controller. Now we're going to configure the grunt.
Here is a gruntfile. Grunt file is using for bundling and simplification and lots of other tasks. Here we'll be taking all script files and bundled and minified it. So here we’ll be registering a hidden task and each will be uglify unified all script from the script folder and it will be making as a single script. So it can be easily loaded from the client side. It will be only given one request to getting all scripts. So it can be uglified this is a target part. This is a watch function that will be using uglify. So after that we'll be adding some scripts inside that script folder. It will be automatically watching if we'll be making some changes. So it will be rebuilding that application and automatically that will be created. So for the time sake I'll be taking an application that I already developed and I will be running that application. So here's the actual application. For the time sake I'm going to take and …..
That is a bundling and minification. If you want to run this task, we’ll be going to view and other window.
We’ll be taking that explorer and here that will be listed. So we'll just click on that numbers. Here I'm going to show a demo of something I have already done.
Here's the db that I'm going to use. Db name…. In startup I’m going to configure the name.
Now I'm going to run this application. Just wait for a few minutes. This is going to create the bundling task. This is run from the NPM task manager and ………..
This is loading……..
Now that application is running. It takes some time because this will be creating an employee entity from a corporate approach. So it will be creating that database from the .. and its going to run.
We will log in as an administrator. This one I already set up.
The log in page
This is log in page. This is a log in application. Now there is no employee in this application. So we're going to add a new employee. We will be selecting and we'll be saving. Then this details will be added into our local db. So we have also permission to edit this one and also to save this one.
New one, we're going to add.
Because the salary field filled is invalid.
Now this label, if you want to, you can delete this employee.
If you want to see the database, you just go into SQL server and refresh.
Here the database you are creating.
That's all from my end. I got you got a better understanding with the help of this.
Is Microsoft a cloud service free for small scale purpose?
The question is if it is free or not. It is not free completely. You will have to pay as you go, otherwise you can use it for one month for that you have to enter your credit card credentials for it. After one month, it will get expired. Otherwise there’s no other option to do it. I am using the default account. If you are in a company you can, you get that default account. But normally it is not free. You can use it for one month. After that it will expire and you will have to pay.
Can you show how the Unified MVC asked by Irshad.
And yeah! That is the first line I have shown you, right. That is the unification happens when MVC, it is combined that means MVC, webapi, and web pages are combined to a single framework. That is it was shown in the starting. You can use it as a wall.
It can be completely restructured. The rooting methods and controllers everything you can use it as a wall. You can use it an MVC or you can use it as a web API. No issues. That is the unified framework.
In startup class among configure and configure service methods, which could be called and how?
Okay. In a startup class already said, data is equivalent to global effect.
The request will come first. You can see two methods, configure and configure service.
Among that configure I will take that to show you. Wait a minute. I will take the application and I will show you that. Okay. So you ask what is this configure service and configure right?
We'll stop the application. Here in startup, this is the question you asked.
Which one will be called first? It’s a very good question.
The configure service, here itself it is different. The method gets called by the runtime.
That means the framework will call the configure service first and all the service things will happen and then only it will call this configure.
Why are there 2 confusing options .net and .net core interactions?
Okay fine. So if you open, if you are familiar with the previous version, only this Reference was there.
So now it has been confusing for the new users. asp.net 5 and asp.net core. Asp.net 5 is the full framework which we were using for the last versions and last few versions.
Asp.net core 5 is the new .net CLR.
It has all the features, now open source feature, and everything.
Course platform and compatibility and everything.
But you have the choice of choosing, you have a choice which we one you have to choose.
This application has to be in asp.net5 or this application needs to be in core that you can decide.
That is up to you. That is the new feature introduced in asp.net5. You can choose it.
In MVC6 why web API controller is inherited from controller instead of API controller?
Now Microsoft created a unified framework for both MVC and API because MVC controller is not more dependent on system.web. So the controller is independent of the UI logics
So it makes it a single unified framework.
Since application development was stopped in between, will the source code be available?
I am really sorry about due to some of some time constraints, I cannot complete that part. I will surely upload the source code in gethub and I will share the link later on.
If you require the source code, you can either email to us or let us know. We will surely email it to you and it will also be shared in gethub.
How rooting and formatting works in webapi?
I have already shown that one. So here's the project.
When we are taking that employee and entering the WEBAPI portion, here there's an option for route.
So we can specify the route attributes for the particular web API. If it’s created as a route attribute, that will be local host/API/controller. So here we just give a controller, if later on if renamed the controller, it will automatically converted as a corresponding name
And also, what about formatter means. We can also create producers. Here we can specify a producer like this. Inside this one we can specify it will be returning which type of results. That is, we can return an application/json or application/some other.
Aswajith M P is working as a software engineer at Suyati Technologies, and has three years of expertise in Microsoft-related technologies. Apart from his technical skills, he also has a penchant for creative writing, blogging and inbound marketing. Aswajith is an active participant in tech user groups and communities. He is an ardent traveler, and is an aspiring trainer.
Linoy is a software developer at Suyati Technologies, and works on both server side and client side technologies such as MVC, WCF, WebAPI, HTML5, Jquery, Angularjs. etc. He possesses strong analytical abilities and is both an individual and a team worker. Lenoy’s personal interests lie in Cricket—he is a big fan of the Indian cricket team, especially Sourav Ganguly.