CT071-3-3-DDAC Managing data in SQL Server with ASP .

Net Core

Lab 3 – Managing data in SQL Server with ASP .Net Core: Part 1
Estimated usage time: 1 Hour 50 Minutes

Lab 3.1. Create tables in SQL Server with ASP .Net Core.
This tutorial will teach the student how to create a table in the SQL database and how to add data
in the SQL table.

a. Create new table in existing Identity DB

(Estimation of Total Time Used: 20 minutes)

1. Continued from the Lab 2.2 project.

2. Go to Solution Explorer > Right click on the Models Folder > Select Add > Select Class.

3. In the Add New Item dialog, named the class file as Flower.cs. Then, tap the Add button.

Level 3 Asia Pacific University of Technology & Innovation Page 1 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

4. An empty Flower.cs file is generated as shown below.

5. Assume we need to prepare a table as below:

Flower ID Flower Name Flower Type Flower Produced Date Flower Price

Thus, edit the Flower.cs model class file based on the above table structure. Save the file after
finish editing the file.

Level 3 Asia Pacific University of Technology & Innovation Page 2 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

using System.ComponentModel.DataAnnotations;

public class Flower

{
[Key]
public int FlowerID { get; set; }

public string ? FlowerName { get; set; }

public string ? FlowerType { get; set; }

public DateTime FlowerProducedDate { get; set; }

public decimal FlowerPrice { get; set; }

}

Level 3 Asia Pacific University of Technology & Innovation Page 3 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

6. Now, open the MVC_APU_FlowerShop2023Context.cs.

7. Then, add the new table details to the context class: MVC_APU_FlowerShop2023Context.cs.

using MVC_APU_FlowerShop2023.Models;

public DbSet<Flower> FlowerTable { get; set; }

Level 3 Asia Pacific University of Technology & Innovation Page 4 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

b. Create Migration Schema Code for New Flower Table

(Estimation of Total Time Used: 15 minutes)

1. Now, start the PMC, click on the Tools > NuGet Package Manager > Package Manager
Console.

2. In the Visual Studio Package Manager Console, type the below commands:

Add-Migration addNewFlowerTable

Level 3 Asia Pacific University of Technology & Innovation Page 5 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

c. Learn How to Manually Setup the Table in SQL Server Without Using Update-Database
Command.
(Estimation of Total Time Used: 15 minutes)

1. SQL Server Object Explorer (SSOX) in Visual Studio and create the table in the
MVC_APU_FlowerShop2023.

2. Right click the Databases > MVC_APU_FlowerShop2023 > Tables > Add New Table….

3. Add the below SQL Queries to the T-SQL corner.

CREATE TABLE [dbo].[FlowerTable]

(
[FlowerID] INT NOT NULL PRIMARY KEY IDENTITY(1,1),
[FlowerName] NVARCHAR(255) NOT NULL,
[FlowerType] NVARCHAR(255) NOT NULL,
[FlowerProducedDate] DATETIME2(7) NOT NULL,
[FlowerPrice] DECIMAL (18,2) NOT NULL
)

Level 3 Asia Pacific University of Technology & Innovation Page 6 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

4. Now, click on the Update button to add the table to the database.

Level 3 Asia Pacific University of Technology & Innovation Page 7 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

5. Finally, click on the Update Database button and the Flower table will be added to your current
database.

6. Next step we need to learn how to add the data to the Flower Table.

Level 3 Asia Pacific University of Technology & Innovation Page 8 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

d. Add data into the Flower table.

(Estimation of Total Time Used: 40 minutes)

1. Create a controller for managing the flower views.

2. Go to Solution Explorer > Right click on the Controllers Folder > Select Add > Select
Controller.

3. In the Add New Scaffolded Item dialog, select MVC Controller – Empty. Then select
Add.

Level 3 Asia Pacific University of Technology & Innovation Page 9 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

4. In the Add New Item dialog, select MVC Controller – Empty and name the file as
FlowersController.cs.

5. Then, select the Add button. A new controller has been added to your Controllers folder
now.

Level 3 Asia Pacific University of Technology & Innovation Page 10 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

6. Now, highlight the Index() function and right click on the highlighted function. Select
Add View.

7. In the Add New Scaffolded Item dialog, select Razor View and press button Add.

8. In the Add Razor View dialog, directly create on the Add button.

Level 3 Asia Pacific University of Technology & Innovation Page 11 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

9. The Index.cshtml page will be added to a folder named Flowers.

10. Now, in the Index.cshtml, add the below sentence to link to your Index.cshtml page with
the coming Add Data page.

<p><a asp-action="AddData">Add Flower Record</a></p>

11. To add data to the Flower table, we need to create another .cshtml page. To create that
page, we must write a function named AddData in the controller file.

Level 3 Asia Pacific University of Technology & Innovation Page 12 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

12. Now, same as the creation steps in Index.cshtml page, we must right click on the
AddData() function.

13. In the Add New Scaffolded Item dialog, select Razor View and press button Add.

Level 3 Asia Pacific University of Technology & Innovation Page 13 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

14. In the Add Razor View dialog, directly create on the Add button.

15. The AddData.cshtml page will be added to a folder named as Flowers.

Level 3 Asia Pacific University of Technology & Innovation Page 14 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

16. Now, design the Add Data page using the below code:

@model MVC_APU_FlowerShop2023.Models.Flower
<center>
<h1>Add Data Example:</h1>
<hr />
<form asp-action="AddData" method="post">
<table>
<tr>
<th><label asp-for="FlowerName"></label> </th>
<td><input asp-for="FlowerName" required /></td>
<td><span asp-validation-for="FlowerName"></span></td>
</tr>
<tr>
<th><label asp-for="FlowerType"></label> </th>
<td><input asp-for="FlowerType" required /></td>
<td><span asp-validation-for="FlowerType"></span></td>
</tr>
<tr>
<th><label asp-for="FlowerProducedDate"></label> </th>
<td><input asp-for="FlowerProducedDate" required /></td>
<td><span asp-validation-for="FlowerProducedDate"></span></td>
</tr>
<tr>
<th><label asp-for="FlowerPrice"></label> </th>
<td><input asp-for="FlowerPrice" required /></td>
<td><span asp-validation-for="FlowerPrice"></span></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="Add Data to table" />
</td>
</tr>
</table>
</form>
</center>

Level 3 Asia Pacific University of Technology & Innovation Page 15 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

17. Now, go back to FlowersController.cs again.

18. First, add the below libraries into the controller.

using MVC_APU_FlowerShop2023.Models;
using MVC_APU_FlowerShop2023.Data;
using Microsoft.EntityFrameworkCore;

19. To connect to the database, add the below lines inside the controller.
private readonly MVC_APU_FlowerShop2023Context _context;

public FlowersController(MVC_APU_FlowerShop2023Context context)

{
_context = context;
}

Level 3 Asia Pacific University of Technology & Innovation Page 16 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

20. Now, add another AddData() function to receive the user inputs and store the inputs to the
database.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AddData(Flower flower)
{
if (ModelState.IsValid)
{
_context.Add(flower);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(flower);
}

Level 3 Asia Pacific University of Technology & Innovation Page 17 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

21. Now, to test the add data action, we must add the Flowers page link to the navigation bar.
Thus, we must open the _LoginPartial.cshtml and attach the Flowers > Index.cshtml
link inside the navigation bar.

<li class="nav-item">
<a id="addflower" class="nav-link text-dark" asp-action="Index" asp-controller="Flowers">
View Flower List</a>
</li>

Level 3 Asia Pacific University of Technology & Innovation Page 18 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

22. Now, once every step for creating and adding the data is done, we can start testing our
application now.

Level 3 Asia Pacific University of Technology & Innovation Page 19 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

23. Once added the data, let’s look at the database table. If you successfully add the data, the
data will appear in the Flower table now.

Level 3 Asia Pacific University of Technology & Innovation Page 20 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

Lab 3.2. View Data from the tables of SQL Server with ASP .Net Core.
This tutorial will teach the student how to view data from a table in the SQL database.

e. View Data from the Flower Table

(Estimation of Total Time Used: 20 minutes)

1. Now, go back to FlowersController.cs again.

2. Modify the Index() function by following the below code.

public async Task<IActionResult> Index()
{
List<Flower> flowers = await _context.FlowerTable.ToListAsync();
return View(flowers);
}

Level 3 Asia Pacific University of Technology & Innovation Page 21 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

3. Now, go back to the Index() function by right clicking on the Index() function.

4. Modify the Index.cshtml file with the below code so that it can display the current data
from the Flower table.
@model List<Flower>

<center>
<table border="1">
<tr style="background-color: yellow;">
<th>Flower ID</th>
<th>Flower Name</th>
<th>Flower Type</th>
<th>Flower Produced Date</th>
<th>Flower Price</th>
<th>Update Action</th>
<th>Delete Action</th>
</tr>
@foreach(var item in Model)
{
<tr>
<td>@item.FlowerID</td>
<td>@item.FlowerName</td>
<td>@item.FlowerType</td>
<td>@item.FlowerProducedDate</td>
<td>@item.FlowerPrice</td>
<form asp-action="DeleteData" asp-controller="Flowers" asp-route-
FlowerId="@item.FlowerID">
<td><button>Delete</button></td>
<td><button asp-action="EditData" asp-controller="Flowers" asp-route-
FlowerId="@item.FlowerID" >Edit</button></td>
</form>
</tr>
}
</table>
</center>

Level 3 Asia Pacific University of Technology & Innovation Page 22 of 23

CT071-3-3-DDAC Managing data in SQL Server with ASP .Net Core

5. Now, click on the Start Without Debugging button and restart the website again. You
should see the data displayed in the current Index.cshtml in the Flower Folder.

Summary:
In this tutorial, we have learnt how to create a new table and add data into the new table through
the existing ASP .Net Core project. Besides, in the next tutorial, we have also learnt how to read
records from the table through the existing ASP.NET Core project.

In the next tutorial, we will learn how to update and delete records from / to the table using the
existing ASP .NET Core project.

Level 3 Asia Pacific University of Technology & Innovation Page 23 of 23