Display and Sort Data from Sql-Server Table in Asp.net Core (db First Approach EF-CORE) (Part-4)
Hello & As-salam u alikum ! , In this article we will learn to read data from sql server table to asp.net core view page.
Note : For Beginner Guide Articles :
https://dotnetcorecommunity.blogspot.com/p/aspnet-core-tutorials-paracticals.html
@{
ViewData["Title"] = "Index";
}
<div style="border:1px solid black;box-shadow:13px 9px 32px 2px blanchedalmond;padding:10px;">
<a asp-action="Create" class="btn btn-primary btn-block">Create New</a>
@if (Model == null)
{
<h1 style="color:red;text-align:center">No data Found</h1>
}
else
{
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>
<a asp-action="Index" asp-route-sortOrder="@ViewData["NameSortParm"]"> <span class="glyphicon glyphicon-sort"> Name</span> </a>
</th>
<th>Email</th>
<th>
<a asp-action="Index" asp-route-sortOrder="@ViewData["DateSortParm"]"> <span class="glyphicon glyphicon-sort"> Added Date</span> </a>
</th>
<th>Is Login</th>
<th>Is Approved</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.UId</td>
<td><img src="~/img/@item.UProfilePicture" style="height:70px;width:70px;" /></td>
<td>@item.UUserName</td>
<td>@item.UEmail</td>
<td>@item.UAddedDate</td>
<td>@item.UIsuserlogin</td>
<td>@item.UIsuseraproved</td>
</tr>
}
</tbody>
</table>
}
</div>
Note : For Beginner Guide Articles :
https://dotnetcorecommunity.blogspot.com/p/aspnet-core-tutorials-paracticals.html
Step# 1:
Watch previous article if you don't know how to connect Sql-Server in asp. Net core
Step#2 :
Right click on Controllers folder---> add -----> Controller
select controller and name is as "CustomController" .
select controller and name is as "CustomController" .
Step#3 :
Paste the code in Custom controller ,this is an action method which will help you retrive data from sql server and two viewdata storage variable is used to manage sorting on the page.
--------------------------------------------------------------------------------------------
DB_SOCIALAPPContext db = new DB_SOCIALAPPContext();
[HttpGet]
public async Task<IActionResult> Index(string sortOrder)
{
ViewData["NameSortParm"] = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
ViewData["DateSortParm"] = sortOrder == "Date" ? "date_desc" : "Date";
var li = from s in db.TblUser
select s;
switch (sortOrder)
{
case "name_desc":
li = li.OrderByDescending(s => s.UUserName);
break;
case "Date":
li = li.OrderBy(s => s.UAddedDate);
break;
case "date_desc":
li = li.OrderByDescending(s => s.UAddedDate);
break;
default:
li = li.OrderBy(s => s.UUserName);
break;
}
return View(await li.AsNoTracking().ToListAsync());
}
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
DB_SOCIALAPPContext db = new DB_SOCIALAPPContext();
the above line of code represents the db_context class which we had created in last article.
Step#4 :
Right click on Index action method and Add view
Step#5 :
Paste the below code in view page :
--------------------------------------------------------------------------
@model IEnumerable<WebApplication7.Models.TblUser>@{
ViewData["Title"] = "Index";
}
<div style="border:1px solid black;box-shadow:13px 9px 32px 2px blanchedalmond;padding:10px;">
<a asp-action="Create" class="btn btn-primary btn-block">Create New</a>
@if (Model == null)
{
<h1 style="color:red;text-align:center">No data Found</h1>
}
else
{
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>
<a asp-action="Index" asp-route-sortOrder="@ViewData["NameSortParm"]"> <span class="glyphicon glyphicon-sort"> Name</span> </a>
</th>
<th>Email</th>
<th>
<a asp-action="Index" asp-route-sortOrder="@ViewData["DateSortParm"]"> <span class="glyphicon glyphicon-sort"> Added Date</span> </a>
</th>
<th>Is Login</th>
<th>Is Approved</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.UId</td>
<td><img src="~/img/@item.UProfilePicture" style="height:70px;width:70px;" /></td>
<td>@item.UUserName</td>
<td>@item.UEmail</td>
<td>@item.UAddedDate</td>
<td>@item.UIsuserlogin</td>
<td>@item.UIsuseraproved</td>
</tr>
}
</tbody>
</table>
}
</div>
--------------------------------------------------------------------------
Previous Lesson Next Lesson
Previous Lesson Next Lesson
1 Comments:
Thanks for publishing it Team!
Post a Comment
Do not Add Spam links in the Comment Box
Subscribe to Post Comments [Atom]
<< Home