Using Visual Studio For Mac Asp.net Core Mvc

Introduction

Using Visual Studio For Mac Asp.net Core Mvc Conference

Complete the New ASP.NET Core Web Application (.NET Core) - MvcMovie dialog: Visual Studio used a default template for the MVC project you just created. You have a working app right now by entering a project name and selecting a few options. This is a basic starter project, and it's a good place to. Developing ASP.NET Core Applications on a Mac With Visual Studio Code ¶. Start Visual Studio Code; Tap File > Open and navigate to your ASP.NET Core app; When the application is opened, Visual Studio Code will prompt to restore the needed project dependencies as well as add build and debug dependencies. In this article, we are going to create a web application using ASP.NET Core MVC with the help of Visual Studio Code and ADO.NET. We will be creating a sample Employee Record Management System and will be performing CRUD operation on it. This tutorial teaches you the basics of building an ASP.NET Core MVC web app using Visual Studio for Mac. This tutorial teaches ASP.NET Core MVC web development with controllers and views. If you're new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point. In Asp.net core mvc apps, this can not work due to the directory pathing needed for deploying these kind of apps. Allow for us to set the working directory of iis express to the output folder of the application, so we can debug with it in visual studio. I own a Mac and it is really great to use Visual Studio to create ASP.net core applications, but my partners have Windows machines. The thing is, if I create a repository and push my MVC project to GitHub, my partners can't open the solution from the repo, neither by cloning the project nor downloading the zip.

In this article we are going to create a web application using ASP.NET Core MVC with the help of Visual Studio Code and ADO.NET. We will be creating a sample Employee Record Management System and performing CRUD operation on it.

Prerequisites

  • Install .NET Core 2.0.0 or above SDK from here
  • Download and install Visual Studio Code from here
  • SQL Server 2008 or above

Before proceeding further i would recommend to download the source code from Github.

Creating Table and Stored Procedures

We will be using a DB table to store all the records of employees.

Open SQL Server and use the following script to create tblEmployee table.

Now, we will create stored procedures to add, delete, update, and get employee data.

Insert an Employee Record

Update an Employee Record

Delete an Employee Record

View all Employees Record

Now, our Database part has been completed. So, we will proceed to create the MVC application using Visual Studio code.

Create the MVC Web Application

We will be creating a source project from the terminal window in Visual Studio Code. Open VS code and navigate to view >> Integrated Terminal.

This will open the terminal window as shown in the image below.

Type the following sequence of commands in the terminal window. It will create our MVC application “MvcAdoDemo”
  • mkdir MvcAdoDemo
  • cd MvcAdoDemo
  • dotnet new mvc

Now open this “MvcAdoDemo” project file using VS code. If it prompts the message “Required assets to build and debug are missing from MvcAdoDemo. Add them?”, select “Yes”.

You can observe in the solution explorer that we already have folders created with name Controllers, Models and Views. We will be adding our code files in these folders only.

Adding the Model to the Application

Right click on Models folder and select “New File”. Name it as Employee.cs. It will create a file inside Models folder.
Add one more file to Models folder. Name it as EmployeeDataAccessLayer.cs. This class will contain our Database related operations.
Open Employee.cs and put following code inside it. Since we are adding the required validators to the fields of Employee class, so we need to use System.ComponentModel.DataAnnotations at the top

Open EmployeeDataAccessLayer.cs and put the following code to handle database operations. Make sure to put your own connection string

To use ADO.NET functionalities in VS code we need to add the nuget package reference toSystem.Data.SqlClient. Open MvcAdoDemo.csproj file and put following code into it.

Put this code in the location highlighted in the image below.

Adding the Controller to the Application

Right click on Controllers folder and select “New File”. Name it as EmployeeController.cs. It will create a new file inside Controllers folder.
Now our EmployeeController has been created. We will put all our business logic in this controller.

Adding Views to the Application

To add views for our controller class, we need to create a folder inside Views folder with the same name as our controller and then add our views to that folder.

Right-click on the Views folder, and select “New Folder” and name the folder as Employee.
To add view files, right click on Employee folder inside Views folder and select “New File”. Name it asIndex.cshtml. This will create a view file inside Employee folder. Thus, we have created our first view. Similarly add 4 more views in Views/Employee folder, Create.cshtml, Delete.cshtml, Details.cshtml, andEdit.cshtml.

Now our Views folder will look like this

Since all our Views has been created, we will put codes in View and Controller for performing CRUD operations.

Index View

This view will be displaying all the employee records present in the database. Additionally, we will also be providing action methods Edit, Details and Delete on each record.

Open your EmployeeController.cs file, you can observer that it is empty. Put following code into it.

To handle database operations, we have created an object of EmployeeDataAccessLayer class inside theEmployeeController class.
Visual studio for mac tutorial

Create View

This view will be used to Add new employee data to the database.

Open Create.cshtml and put following code into it.

To handle the business logic of create, open EmployeeController.cs and put following code into it.

Using
The [Bind] attribute is used with parameter “employee” to protect against over-posting. To know more about over-posting visit here

Edit View

This view will enable us to edit an existing employee data.

To handle the business logic of Edit view, open EmployeeController.cs and add following code to it.

As you can observe that we have two Edit action methods, one for HttpGet and another for HttpPost.The HttpGet Edit action method will fetch the employee data and populates the fields of edit view. Once the user clicks on Save button after editing the record, a Post request will be generated which is handled by HttpPost Edit action method.

Details View

This view will display the details of a particular employee.
Open Details.cshtml and put following code into it.

To handle the business logic of Details view,open EmployeeController.cs and add following code to it

Delete View

Open Delete.cshtml and put following code into it.

To handle the business logic of Delete view, open EmployeeController.cs and add following code to it.

To complete Delete operation we need two Delete methods accepting same parameter (Employee Id). But two methods with same name and method signature will create a compile time error and if we rename the Delete method then routing won’t be able to find it as asp.net maps URL segments to action methods by name. So, to resolve this issue we put ActionName(“Delete”) attribute to the DeleteConfirmed method. This attribute performs mapping for the routing system so that a URL that includes /Delete/ for a POST request will find the DeleteConfirmed method.

Visual Studio For Mac

When we click on Delete link on the Index page, it will send a Get request and return a View of the employee using HttpGet Delete method. When we click on Delete button on this view, it will send a Post request to delete the record which is handled by the HttpPost DeleteConfirmed method. Performing a delete operation in response to a Get request (or for that matter, performing an edit operation, create operation, or any other operation that changes data) opens up a security hole. Hence, we have two separate methods.

Before launching the application, we will configure route URLs. Open Startup.cs file to set the format for routing. Scroll down to app.UseMvc method, where you can set the route url.

Make sure that your route URL is set like this

This url pattern sets HomeController as default controller and Index method as default action method, whereas Id parameter is optional. Default and optional route parameters need not be present in the URL path for a match. If we do not append any controller name in the URL then it will take HomeController as default controller and Index method of HomeController as default action method. Similarly, if we append only Controller name in the URL, it will navigate to Index action method of that controller.

Execution Demo

Now press F5 to launch the application and navigate to Employee controller by appending /Employee in the URL.
Click on CreateNew to navigate to Create view. Add a new Employee record as shown in the image below.
If we miss the data in any field while creating employee record, we will get a required field validation error message.
After inserting the data in all the fields, click on “Create” button. The new employee record will be created and you will be redirected to the Index view, displaying records of all the employees. Here, we can also see action methods Edit, Details, and Delete.
If we want to edit an existing employee record, then click Edit action link. It will open Edit View as below where we can change the employee data.
Here we have changed the City of employee Dhiraj from Mumbai to New Delhi. Click on “Save” to return to the Index view to see the updated changes as highlighted in the image below.
If we miss any fields while editing employee records, then Edit view will also throw required field validation error message
If you want to see the details of any Employee, then click on Details action link, which will open the Details view, as shown in the image below.
Click on “Back to List” to go back to Index view. Now, we will perform Delete operation on an employee named Rahul. Click on Delete action link which will open Delete view asking for a confirmation to delete.
Once we click on Delete button, it will send HttpPost request to delete employee record and we will be redirected to the Index view. Here, we can see that the employee with name Rahul has been removed from our record.

Conclusion

We have learned about creating a sample MVC web application using ASP.Net Core 2.0, ADO.NET and SQL server with the help of Visual Studio Code. Post your valuable feedback in comment section.

You can also find this article at C# Corner.

Download the source code from Github.

You can check my other articles on ASP .NET Core here

See Also

  • ASP.NET Core – CRUD Using Angular 5 And Entity Framework Core
  • Getting Started With Angular 5 Using Visual Studio Code
  • CRUD Operations With ASP.NET Core Using Angular 5 and ADO.NET
  • CRUD Operation With ASP.NET Core MVC Using ADO.NET and Visual Studio 2017
  • ASP.NET Core – Getting Started With Blazor

Found the article helpful!!! Share this with your Friends

Related

-->

Visual Studio for Mac makes it easy to develop your app’s service with its support for the latest ASP.NET Core Web development platform. ASP.NET Core runs on .NET Core, the latest evolution of the .NET Framework and runtime. It’s been tuned for fast performance, factored for small install sizes, and reimagined to run on Linux and macOS, as well as Windows.

Installing .NET Core

.NET Core 2.1 is automatically installed when you install Visual Studio for Mac.

Creating an ASP.NET Core app in Visual Studio for Mac

Open Visual Studio for Mac. On the Start Screen, select New Project...

This will display the New Project dialog, allowing you to select a template to create your application.

There are a number of projects that will provide you with a pre-built template to start building your ASP.NET Core Application. These are:

  • .NET Core > Empty
  • .NET Core > API
  • .NET Core > Web Application
  • .NET Core > Web Application (Model-View-Controller)

Select the ASP.NET Core Empty Web Application and press Next. Give the Project a Name and press Create. This creates a new ASP.NET Core app, that should look similar to the image below:

The ASP.NET Core Empty template creates a web application with two default files: Program.cs and Startup.cs, which are explained below. It also creates a Dependencies folder, which contains your project’s NuGet package dependencies such as ASP.NET Core, the .NET Core framework, and the MSBuild targets that build the project:

Program.cs

Open and inspect the Program.cs file in your project. Notice that several things are happening in the Main method – the entry into your app:

An ASP.NET Core app creates a web server in its main method by configuring and launching a host via an instance of WebHostBuilder. This builder provides methods to allow the host to be configured. In the template app the following configurations are used:

  • .UseStartup<Startup>(): Specifies the Startup class.

However, you can also add additional configurations, such as:

  • UseKestrel: Specifies the Kestrel server will be used by the app
  • UseContentRoot(Directory.GetCurrentDirectory()): Uses the web project's root folder as the app's content root when the app is started from this folder
  • .UseIISIntegration(): Specifies that the app should work with IIS. To use IIS with ASP.NET Core both UseKestrel and UseIISIntegration need to be specified.

Startup.cs

The Startup class for your app is specified in the UseStartup() method on the CreateWebHostBuilder. It is in this class that you will specify the request handling pipeline, and where you configure any services.

Open and inspect the Startup.cs file in your project:

This Startup class must always adhere to the following rules:

  • It must always be public
  • It must contain the two public methods: ConfigureServices and Configure

The ConfigureServices method defines the services that will be used by your app.

The Configure allows you to compose your request pipeline using Middleware. These are components used within an ASP.NET application pipeline to handle requests and responses. The HTTP pipeline consists of a number of request delegates, called in sequence. Each delegate can choose to either handle the request itself, or pass it to the next delegate.

You can configure delegates by using the Run,Map, and Use methods on IApplicationBuilder, but the Run method will never call a next delegate and should always be used at the end of your pipeline.

The Configure method of the pre-built template is built to do a few things. First, it configures an exception handling page for use during development. Then, it sends a response to the requesting web page with a simple 'Hello World'.

This simple Hello, World project can run now without any additional code being added. To run the app, and view it in your browser, press the Play (Triangular) button in the toolbar:

Visual Studio

Visual Studio for Mac uses a random port to launch your web project. To find out what port this is, open the Application Output, which is listed under View > Pads. You should find output similar to that shown below:

Once the project is running, your default web browser should launch and connect to the URL listed in the Application Output. Alternatively, you can open any browser of your choice, and enter http://localhost:5000/, replacing the 5000 with the port that Visual Studio output in the Application Output. You should see the text Hello World!:

Adding a Controller

ASP.NET Core Apps use the Model-View-Controller (MVC) design pattern to provide a logical separation of responsibilities for each part of the app. MVC consists of the following:

  • Model: A class that represents the data of the app.
  • View: Displays the app's user interface (which is often the model data).
  • Controller: A class which handles browser requests, responds to user input and interaction.

For more information on using MVC refer to Overview of ASP.NET Core MVC guide.

Visual Studio For Mac Download

To add a controller, do the following:

  1. Right-click on the Project name and select Add > New Files. Select General > Empty Class, and enter a controller name:

  2. Add the following code to the new controller:

  3. Add the Microsoft.AspNetCore.Mvc dependency to the project by right-clicking the Dependency folder, and selecting Add Package....

  4. Use the Search box to browse the NuGet library for Microsoft.AspNetCore.Mvc, and select Add Package. This may take a few minutes to install and you may be prompted to accept various licenses for the required dependencies:

  5. In the Startup class, remove the app.Run lambda and set the URL routing logic used by MVC to determine which code it should invoke to the following:

    Make sure to remove the app.Run lambda, as this will override the routing logic.

    MVC uses the following format, to determine which code to run:

    /[Controller]/[ActionName]/[Parameters]

    When you add the code snippet above, you are telling the app to default to the HelloWorld Controller, and the Index action method.

  6. Add the services.AddMvc(); call to the ConfigureServices method, as illustrated below:

    You can also pass parameter information from the URL to the controller.

  7. Add another method to your HelloWorldController, as illustrated below:

  8. If you run the app now, it should automatically open your browser:

  9. Try to browse to http://localhost:xxxx/HelloWorld/Xamarin?name=Amy (replacing xxxx with the correct port), you should see the following:

Download Microsoft Visual Studio For Mac

Troubleshooting

If you need to install .NET Core manually on Mac OS 10.12 (Sierra) and higher, do the following:

  1. Before you start installing .NET Core, ensure that you have updated all OS updates to the latest stable version. You can check this by going to the App Store application, and selecting the Updates tab.

  2. Follow the steps listed on the .NET Core site.

Make sure to complete all steps successfully to ensure that .NET Core is installed successfully.

Using Visual Studio For Mac Asp Net Core Mvc

Summary

This guide gave an introduction to ASP.NET Core. It describes what it is, when to use it, and provided information on using it in Visual Studio for Mac.For more information on the next steps from here, refer to the following guides:

  • ASP.NET Core docs.
  • Creating Backend Services for Native Mobile Applications, which shows how to build a REST service using ASP.NET Core for a Xamarin.Forms app.
  • ASP.NET Core hands-on lab.

Related Video