پروژه‌ی عملی – نمایش اطلاعات یک لیست در View

آموزش ASP.NET Core
آموزش ASP.NET Core

با سلام خدمت شما دوستان و همراهان سایت میزفا ، در خدمت شما هستم با یکی دیگر از جلسات آموزشی طراحی سایت با 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 (برای نمایش جدول) هم هست.

برای دیدن این صفحه ، پس از اجرای برنامه ، اطلاعاتی در فرم اضافه و روی لینک “مشاهده شرکت کنندگان در جشن” کلیک کنید لیستی به صورت زیر نمایش داده می‌شود. من برای زیباتر شدن جدول از کلاس های بوت استرپ استفاده کرده ام.

نمایش اطلاعات لیست در View در ASP.NET Core
نمایش اطلاعات لیست در View در ASP.NET Core

بسیار خب ، به پایان این جلسه آموزشی رسیدیم . در صورتی که سوالی داشتید حتما در قسمت نظرات مطرح کنید.

 

فیلم آموزشی asp.net core 2

آرزو ابراهیمی
بیش از 6 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و … بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

فیلم آموزشی asp.net core 2

بدون نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=