How To Develop A Web Application In ASP.NET

Hey everyone, and welcome you all to another session by AG in this session, we will learn how to create aspnet web application. Aspnet is a free online framework that allows you to create amazing websites and web apps with HTML CSS and JavaScript. You can also leverage real-time. He's like websockets to construct web apis. So in this Blog, we are going to create a login application which has username, password and login button. So without wasting any further time. 

Let's get started. So let's go to visual studio. After opening Visual Studio on the left hand side, you have all the recent applications which you have opened. And on the right hand side, you have the options to clone a repository, which means you can get a quote from an online repository like GitHub or as your devops, or you can open an existing project or a solution, or you can open a local folder or create a new project. So we'll create a new project. Once you create a new project here, you can select the template. So we'll search for the aspnet web application template. So in the search for templates search box, right aspnet web application. 

So here you can see we have two aspnet web application, dotnet framework templates. The difference between these two is this template uses Visual Basic and this tablet user C sharp. So you can select the template will choose a C sharp. This template is basically used for creating aspnet web application, where forms MVC or web API applications. So select this template and click on next and provide a suitable project name. Since we are creating a sign-in page, I have entered the project name as sign in Project. Similarly, if you want to change the location, you can change the location and provide the solution name and select the framework version which you want. So I will keep the default creamer. Latest one in my system is four point seven point two. So click on create. So here we need to select a template. Whether we want empty web forms, MVC web, API or single page application empty. It is basically a template which does not have any content in it. And web forms reform is a template for creating web form applications. It is used to build Dynamic websites using the familiar drag-and-drop functionality it is. It has the event driven model. Similarly, we look at mvcc. This template allows to build applications using the model view controller architecture. So model view controller has the features that enable fast, test-driven development for creating applications that use the latest standard. And we have web API web. Api is used for creating a restful HTTP services that can reach a broad range of clients, including browsers and mobile devices. And we have single page application. This template it is basically used to create client side JavaScript 21st ml5 application using aspnet web API. So for this project, we will select MVC and will not change any Authentication, and if all the settings as it is, and click on create. 

So here we go. We have successfully created the project. So if you look at the right-hand side in the solution Explorer, we have a list of folders. So we have the root folder. This is the root folder. So the default root folder is used for storing the static files related to the project, and those files can be accessed programmatically with the relative path. And we have the controller folder. So this controller folder contains controller classes where the optician related code is written. The model folder contains the domain or entity classes. Models can be written anywhere in the solution, such as in separate class library or folder, Etc. Similarly, we have views folder. So the views folder holds the razor Pages, which are responsible for showing and getting the data from the user. Similarly, in the folders way, we will have an app setting dot Json file. This folder contains the configuration and secret details of the application, and we will have the programcs fun. The programcs file is the starting point of the application, which will create the host for an application to run the application. And we will have this startup dot CSS file. So this startup dot CSV file allows to configure the behavior of the application, such as defining the roots and dependency injection. So we'll get started with this. So we'll run the application and see the default output. So the bill has started.

 

So this is the default output. Then we have application name home home page about and contact. So what we'll do is we'll create a login page that is a sign in page here. So we'll go back to visual studio, go to solution, Explorer, right, click on the controller, folder, add, add a controller, select MVC controller Mt. And click on ADD. And name the controller, so we will keep it as default controller and click on that.select the class and click on ADD here. You can see a class is created. So what we'll do is we'll rename this class. I click rename and will rename this as user controller class. Once the class is renamed, go inside this public class and write a code Type prop hang double tap. So the first property will be of the type integer, and it will be remember ID number, similarly, second property, crop and double tap will be of the type string. In this will be username similarly, third so after writing this code, go back to the default controller. Here, go to the action result index page, right click and click on ADD View. You can see contains MVC 5 you select this and click on ADD and provide the index name. So I'll keep it as it is and select the template in the template. It has create delete details, edit MD list all this templates, but we'll select the create template and select the model class select the user controller. This was the model class, which we created. User controller, select user controller and options select the a test partial View, then click on ADD. 

Here you can see this page is created. So we'll run this page and see the output. So here you can see this is the sign-in page which we created. We have the number username and password. So what we'll do, we'll make some changes will change this create button to sign in button, and we'll change this user controller. So we'll go back to the visual studio. And here you can see we have user controller will change it to. Sign in page. So we'll save this and click on run. So here you can see this is change the sign in page, and the button has changed to sign so you can enter the any value here you number and enter the username password and click on sign.