با سلام خدمت شما دوستان و همراهان سایت میزفا ، در خدمت شما هستم با یکی دیگر از جلسات آموزشی طراحی سایت با ASP.NET ، در این جلسه آموزش ASP.NET Core قصد دارم تا نحوه نمایش اطلاعات یک لیست در View را به شما آموزش دهم.
نمایش اطلاعات List در View
در جلسه گذشته در ویوی Thanks.cshtml لینکی قرار دادیم که با کلیک بر روی آن باید لیستی از مهمان ها به کاربر نشان داده شود برای این منظور از asp-action (یک Tag Helperدیگر ) به شکل زیر استفاده کردیم:
<a asp-action="ListGuests">مشاهده شرکت کنندگان در جشن</a>
پس از اجرای برنامه ، اگر اشاره گر موس را بر روی این لینک قرار دهید ، متوجه می شوید که به آدرس /WellCome/ListGuests اشاره دارد . این آدرس با هیچ کدام از متدهای اکشن کنترلر هم خوانی ندارد. و اگر بر روی آن کلیک کنید ، صفحه ای خالی را نمایش میدهد.
برای رفع این مشکل یک متد اکشن به نام ListGuests در کنترلر WellCome ایجاد کنید . کد تغییر یافته کنترلر WellCome به صورت زیر است:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WellComeProject.Models;
namespace WellComeProject.Controllers
{
public class WellCome : Controller
{
public ViewResult Index()
{
ViewBag.WellCome = "سلام مهمان گرامی به جشن ما خوش آمدید";
return View();
}
[HttpGet]
public ViewResult Create()
{
return View();
}
[HttpPost]
public ViewResult Create(GuestResponse guestResponse)
{
Repository.AddResponse(guestResponse);
return View("Thanks",guestResponse);
}
public ViewResult ListGuests()
{
return View(Repository.Responses.Where(r=>r.WillAttend==true));
}
}
}
در کد بالا متد اکشن جدید با نام ListGuests ، نمای هم نام خود را فراخوانی کرده و پارامتری از نوع Responses را برای آن ارسال می کند . این نوع فراخوانی متد ()View در MVC ، برای ارسال اطلاعات به نماهایی است که به داده ها مقید شده اند . کلکسیون اشیای GuestResponses برای نمایش افرادی که پاسخ مثبت برای شرکت در مهمانی داده اند ، با یک کوئری LINQ فیلتر شده است. در فصل های آینده با کوئری LINQ بیشتر آشنا خواهید شد.
برای این که نمای ListGuests را ایجاد کنید به روش گذشته یک View در پوشه Views/WellCome با نام ListGuests به پروژه اضافه کنید سپس کدهای زیر در آن کپی کنید :
@model IEnumerable<WellComeProject.Models.GuestResponse>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
<style>
.container {
margin-top: 40px;
direction: rtl;
width: 40% !important;
line-height: 28px;
}
label {
font-weight: 100 !important;
}
table {
width: 100%;
}
td, th {
padding: 0;
text-align: right !important;
padding: 5px 15px;
}
</style>
</head>
<body>
<div class="container alert">
<h4 class="text-center">لیست اسامی مهمانان جشن</h4><br />
<table class="teble table-bordered">
<thead>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>تلفن</th>
</tr>
</thead>
<tbody>
@foreach(var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Family</td>
<td>@item.Phone</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
از آنجا که فایل های نمای Razor ترکیبی از کدهای HTML و #C هستند پسوندی به صورت cshtml می گیرند. این موضوع را می‌توانید در کد ویوی ListGuests در حلقه foreach ببینید ، این حلقه اسامی مهمانان را لیست میکند و بر خلاف یک حلقه معمولی foreach ، دارای کد HTML (برای نمایش جدول) هم هست.
برای دیدن این صفحه ، پس از اجرای برنامه ، اطلاعاتی در فرم اضافه و روی لینک “مشاهده شرکت کنندگان در جشن” کلیک کنید لیستی به صورت زیر نمایش داده می‌شود. من برای زیباتر شدن جدول از کلاس های بوت استرپ استفاده کرده ام.
بسیار خب ، به پایان این جلسه آموزشی رسیدیم . در صورتی که سوالی داشتید حتما در قسمت نظرات مطرح کنید.
