ایتا - پروژه ASP.Net Core MVC (وب و سی شارپ)

پروژه ASP.Net Core MVC (وب و سی شارپ)

تا اینجا  ScaffoldingUserController مورد نیاز نوشته شد از ایجا می خواهیم ویوها را هم بنویسیم از آنجا که خروجی را ببینیم چیز تمیزی نشان دهم من یک Repository می نویسم که یک داده های فیک برای ما برگردونه 
using AspNetCoreMvc.Models.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace AspNetCoreMvc.Models.Repositories
{
    public class UserRepository
    {

        private readonly List<Users> _users = new List<Users>();

        public UserRepository()
        {
            _users.Add(new Users
            {
                Age = 25,
                Email = "info@bugeto.net",
                Id = 1,
                Mobile = "09121000000",
                Name = "میثم"
            });

            _users.Add(new Users
            {
                Age = 30,
                Email = "info@bugeto.net",
                Id = 2,
                Mobile = "09122000000",
                Name = "سامیار"
            });
        }
        public List<Users> Get()
        {
            return _users;
        }
        public Users Find()
        {
            return _users.FirstOrDefault();
        }
    }
}
در Repository یک لیست از user ایجاد کردم که در متد سازنده این کلاس دو تا مقدار دوتا user اضافه کردم چون هنوز دیتابیس نداریم دیتابیس را شبیه سازی کردم و داده ها را برگشت بدهم 
در پایین دو تا متد دارم یکیش get  و دیگری Find متد get لیست تمام user را برگشت می دهد و متد Find برای جستجو استفاده می شود

1 مشاهده13:20

پروژه ASP.Net Core MVC (وب و سی شارپ)

من در کنترلر ScaffoldingUserController در ایجا یک نمونه از UserRepository ایجاد کنم و در متد سازنده مقدار دهی کنیم
private readonly UserRepository _userRepository;

        public ScaffoldingUserController()
        {
            _userRepository = new UserRepository();
        }

1 مشاهده13:28

پروژه ASP.Net Core MVC (وب و سی شارپ)

برای اینکه لیست user ها را ببینم به صورت Scaffolding این را ایجاد کنم میتوانم روی اکشن کلیک راست کنم و ایجا Add view را بزنم Razor View را انتخاب می کنیم در قسمت Template چه نوع view را ایجاد می کنید به صورت پیش فرض empty خالی هست که یک view خالی برای ما ایجاد می کند و ما می خواهیم یک view از نوع List ایجاد کنیم وقتی لیست را انتخاب می کنیم Model class برای ما ایجاد می شود و از ایجا مدل Model ما را می خواهد در ایجا مدل را از نوع کلاس User انتخاب می کنیم در گزینه Create as a Partial View که یک Partial View ایجاد می شود و گزینه بعدیReference script Libraries را بزنید script های مورد نیاز لیست یا هر نوع view را ایجاد کنیم اون script به view ها اضافه می شوند و گزینه آخر Layout های مورد نظر انتخاب کنیم و اگر Add را بزنیم view ایجاد می شود

1 مشاهده15:02

پروژه ASP.Net Core MVC (وب و سی شارپ)

کدهای یک view را برسی می کنیم 
@model IEnumerable<WebApplication4.Models.Entities.Users>
@{
    ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Age)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Phone)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Mobile)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Mobile)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </tbody>
</table>
توضیحات:
@model IEnumerable<WebApplication4.Models.Entities.Users>:
 این خط مشخص می‌کند که مدل ویو یک لیست از کاربران (Users) است.

@{ ViewData["Title"] = "Index"; }:
 این خط عنوان صفحه را به "Index" تنظیم می‌کند.

<h1>Index</h1>:
 این خط عنوان صفحه را در یک عنصر <h1> نمایش می‌دهد.

<a asp-action="Create">Create New</a>:
 این خط یک لینک ایجاد می‌کند که به اکشن Create هدایت می‌شود.

<table class="table">:
 این خط یک جدول HTML با کلاس CSS "table" ایجاد می‌کند.

<thead>...</thead>:
 این بخش شامل سرستون‌های جدول است. برای هر خاصیت از مدل (Id, Name, Age, Phone, Mobile, Email) یک سرستون ایجاد می‌شود.

<tbody>...</tbody>:
 این بخش شامل بدنه جدول است که برای هر کاربر در مدل، یک ردیف (<tr>) ایجاد می‌کند.

@foreach (var item in Model) { ... }:
 این حلقه foreach برای هر کاربر در مدل یک ردیف جدول ایجاد می‌کند.

@Html.DisplayFor(modelItem => item.Property):
 این متد مقدار هر خاصیت (Id, Name, Age, Phone, Mobile, Email) را در سلول‌های جدول نمایش می‌دهد.

@Html.ActionLink("Edit", "Edit", new { id = item.Id }):
 این لینک به اکشن Edit با شناسه (id) کاربر مورد نظر هدایت می‌شود.

@Html.ActionLink("Details", "Details", new { id = item.Id }):
 این لینک به اکشن Details با شناسه (id) کاربر مورد نظر هدایت می‌شود.

@Html.ActionLink("Delete", "Delete", new { id = item.Id }):
 این لینک به اکشن Delete با شناسه (id) کاربر مورد نظر هدایت می‌شود.

این کد به شما یک لیست از کاربران را در یک جدول HTML نمایش می‌دهد، با قابلیت ایجاد، ویرایش، مشاهده جزئیات و حذف هر کاربر.

1 مشاهده15:36

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید کدهای کنترلر ScaffoldingUserController را بررسی کنیم تا بفهمیم هر بخش چه کاری انجام می‌دهد.

کلیات:
این کنترلر از Controller ارث‌بری می‌کند و شامل اکشن‌هایی برای عملیات‌های CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) برای مدل User است.

UserRepository برای دسترسی به داده‌های User استفاده می‌شود.

کد کامل:
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using WebApplication4.Models.Repositories;

namespace WebApplication4.Controllers
{
    public class ScaffoldingUserController : Controller
    {
        private readonly UserRepository _userRepository;

        public ScaffoldingUserController()
        {
            _userRepository = new UserRepository();
        }

        // GET: ScaffoldingUserController
        public ActionResult Index()
        {
            return View(_userRepository.Get());
        }

        // GET: ScaffoldingUserController/Details/5
        public ActionResult Details(int id)
        {
            return View(_userRepository.Find());
        }

        // GET: ScaffoldingUserController/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: ScaffoldingUserController/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(IFormCollection collection)
        {
            try
            {
                return RedirectToAction(nameof(Index));
            }
            catch
            {
                return View();
            }
        }

        // GET: ScaffoldingUserController/Edit/5
        public ActionResult Edit(int id)
        {
            return View(_userRepository.Find());
        }

        // POST: ScaffoldingUserController/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(int id, IFormCollection collection)
        {
            try
            {
                return RedirectToAction(nameof(Index));
            }
            catch
            {
                return View();
            }
        }

        // GET: ScaffoldingUserController/Delete/5
        public ActionResult Delete(int id)
        {
            return View(_userRepository.Find());
        }

        // POST: ScaffoldingUserController/Delete/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Delete(int id, IFormCollection collection)
        {
            try
            {
                return RedirectToAction(nameof(Index));
            }
            catch
            {
                return View();
            }
        }
    }
}
جزئیات اکشن‌ها:
Index:

روش HTTP: GET

توضیحات: این اکشن لیستی از کاربران را از _userRepository.Get() می‌گیرد و به ویو می‌فرستد.

Details:

روش HTTP: GET

توضیحات: این اکشن جزئیات یک کاربر خاص را با id از _userRepository.Find() می‌گیرد و به ویو می‌فرستد.

Create (GET):

روش HTTP: GET

توضیحات: این اکشن ویوی ایجاد یک کاربر جدید را برمی‌گرداند.

Create (POST):

روش HTTP: POST

توضیحات: این اکشن داده‌های ارسال شده از فرم را دریافت می‌کند و تلاش می‌کند تا کاربر جدیدی ایجاد کند. اگر موفقیت‌آمیز باشد، به اکشن Index هدایت می‌شود، در غیر این صورت، ویوی ایجاد را دوباره نمایش می‌دهد.

Edit (GET):

روش HTTP: GET

توضیحات: این اکشن جزئیات یک کاربر خاص را با id از _userRepository.Find() می‌گیرد و به ویو برای ویرایش می‌فرستد.

Edit (POST):

روش HTTP: POST

توضیحات: این اکشن داده‌های ارسال شده از فرم ویرایش را دریافت می‌کند و تلاش می‌کند تا اطلاعات کاربر را به‌روزرسانی کند. اگر موفقیت‌آمیز باشد، به اکشن Index هدایت می‌شود، در غیر این صورت، ویوی ویرایش را دوباره نمایش می‌دهد.

Delete (GET):

روش HTTP: GET

توضیحات: این اکشن جزئیات یک کاربر خاص را با id از _userRepository.Find() می‌گیرد و به ویو برای حذف می‌فرستد.

Delete (POST):

روش HTTP: POST

توضیحات: این اکشن داده‌های ارسال شده از فرم حذف را دریافت می‌کند و تلاش می‌کند تا کاربر را حذف کند. اگر موفقیت‌آمیز باشد، به اکشن Index هدایت می‌شود، در غیر این صورت، ویوی حذف را دوباره نمایش می‌دهد.

1 مشاهده15:46

پروژه ASP.Net Core MVC (وب و سی شارپ)

نکات:
برای هر اکشن POST، از [HttpPost] و [ValidateAntiForgeryToken] استفاده شده است تا اطمینان حاصل شود که درخواست‌ها از منابع معتبری ارسال شده‌اند و امنیت فرم‌ها حفظ می‌شود.

UserRepository به عنوان یک منبع داده برای دسترسی به کاربران استفاده شده است.

1 مشاهده15:46

پروژه ASP.Net Core MVC (وب و سی شارپ)

در ASP.NET Core MVC، ویوها (Views) برای نمایش اطلاعات به کاربر استفاده می‌شوند. برای ایجاد و مدیریت ویوها در کنترلر، می‌توانید از اکشن‌های مختلف استفاده کنید که هر کدام ویوهای متفاوتی را نمایش می‌دهند.

مراحل ایجاد و مدیریت ویوها در کنترلر:
ایجاد ویوها:

ویوهای خود را در پوشه Views ایجاد کنید. نام پوشه باید مطابق با نام کنترلر باشد (بدون پسوند "Controller").

ویوها معمولاً با پسوند .cshtml ایجاد می‌شوند.

تعریف اکشن‌ها در کنترلر:

اکشن‌هایی را در کنترلر تعریف کنید که ویوهای مختلف را برمی‌گردانند.

مثال:
فرض کنید یک کنترلر به نام HomeController دارید و می‌خواهید چند ویو مختلف برای نمایش اطلاعات مختلف ایجاد کنید.

کنترلر (HomeController.cs):

public class HomeController : Controller
{
    // اکشن برای ویوی Index
    public IActionResult Index()
    {
        return View();
    }

    // اکشن برای ویوی About
    public IActionResult About()
    {
        return View();
    }

    // اکشن برای ویوی Contact
    public IActionResult Contact()
    {
        return View();
    }
}
ویوها:
ویوی Index (Views/Home/Index.cshtml):


@model YourNamespace.Models.SomeModel

<h1>صفحه اصلی</h1>
<p>این محتوای صفحه اصلی است.</p>
ویوی About (Views/Home/About.cshtml):


<h1>درباره ما</h1>
<p>این محتوای صفحه درباره ما است.</p>
ویوی Contact (Views/Home/Contact.cshtml):


<h1>تماس با ما</h1>
<p>این محتوای صفحه تماس با ما است.</p>
توضیحات:
Index: اکشنی است که ویوی Index را برمی‌گرداند. ویوی مربوطه در پوشه Views/Home/Index.cshtml قرار دارد.

About: اکشنی است که ویوی About را برمی‌گرداند. ویوی مربوطه در پوشه Views/Home/About.cshtml قرار دارد.

Contact: اکشنی است که ویوی Contact را برمی‌گرداند. ویوی مربوطه در پوشه Views/Home/Contact.cshtml قرار دارد.

با این روش، می‌توانید چندین ویو را با اکشن‌های مختلف در یک کنترلر مدیریت کنید. هر اکشن یک ویوی خاص را برمی‌گرداند که محتوای مربوط به آن اکشن را نمایش می‌دهد.

1 مشاهده15:51

پروژه ASP.Net Core MVC (وب و سی شارپ)

برای ساخت یک کنترلر در ASP.NET Core MVC که شامل عملیات CRUD (ایجاد، خواندن، به‌روزرسانی و حذف) برای موجودیتی با فیلدهای Id, Name, Age, Mobile و Email باشد، نیاز به ایجاد چند View دارید. در اینجا یک راهنمایی کلی برای ایجاد این Views و کنترلر آورده شده است:

مدل (Model):
public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public string Mobile { get; set; }
    public string Email { get; set; }
}
کنترلر (Controller):
public class PersonsController : Controller
{
    private readonly ApplicationDbContext _context;

    public PersonsController(ApplicationDbContext context)
    {
        _context = context;
    }

    // GET: Persons
    public async Task<IActionResult> Index()
    {
        return View(await _context.Persons.ToListAsync());
    }

    // GET: Persons/Details/5
    public async Task<IActionResult> Details(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var person = await _context.Persons
            .FirstOrDefaultAsync(m => m.Id == id);
        if (person == null)
        {
            return NotFound();
        }

        return View(person);
    }

    // GET: Persons/Create
    public IActionResult Create()
    {
        return View();
    }

    // POST: Persons/Create
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("Id,Name,Age,Mobile,Email")] Person person)
    {
        if (ModelState.IsValid)
        {
            _context.Add(person);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(person);
    }

    // GET: Persons/Edit/5
    public async Task<IActionResult> Edit(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var person = await _context.Persons.FindAsync(id);
        if (person == null)
        {
            return NotFound();
        }
        return View(person);
    }

    // POST: Persons/Edit/5
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(int id, [Bind("Id,Name,Age,Mobile,Email")] Person person)
    {
        if (id != person.Id)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _context.Update(person);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!PersonExists(person.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToAction(nameof(Index));
        }
        return View(person);
    }

    // GET: Persons/Delete/5
    public async Task<IActionResult> Delete(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var person = await _context.Persons
            .FirstOrDefaultAsync(m => m.Id == id);
        if (person == null)
        {
            return NotFound();
        }

        return View(person);
    }

    // POST: Persons/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> DeleteConfirmed(int id)
    {
        var person = await _context.Persons.FindAsync(id);
        _context.Persons.Remove(person);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    private bool PersonExists(int id)
    {
        return _context.Persons.Any(e => e.Id == id);
    }
}
ویوها (Views):

Index.cshtml:
 لیست اشخاص

Details.cshtml:
 نمایش جزئیات یک شخص

Create.cshtml:
 فرم ایجاد یک شخص جدید

Edit.cshtml:
 فرم ویرایش یک شخص

Delete.cshtml:
 فرم تأیید حذف یک شخص

1 مشاهده16:06

پروژه ASP.Net Core MVC (وب و سی شارپ)

بیایید ادامه‌ی کدهای ویو را با هم بررسی کنیم تا کامل شوند:

Viewها:
Index.cshtml
این فایل لیست تمامی اشخاص را نمایش می‌دهد:


@model IEnumerable<Person>

@{
    ViewData["Title"] = "Persons List";
}

<h2>Persons List</h2>

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Mobile</th>
            <th>Email</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Name</td>
            <td>@item.Age</td>
            <td>@item.Mobile</td>
            <td>@item.Email</td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
    }
    </tbody>
</table>

<a asp-action="Create">Create New Person</a>

Details.cshtml
این فایل جزئیات یک شخص خاص را نمایش می‌دهد:

@model Person

@{
    ViewData["Title"] = "Person Details";
}

<h2>Person Details</h2>

<div>
    <h4>Person</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">Name</dt>
        <dd class = "col-sm-10">@Model.Name</dd>
        <dt class = "col-sm-2">Age</dt>
        <dd class = "col-sm-10">@Model.Age</dd>
        <dt class = "col-sm-2">Mobile</dt>
        <dd class = "col-sm-10">@Model.Mobile</dd>
        <dt class = "col-sm-2">Email</dt>
        <dd class = "col-sm-10">@Model.Email</dd>
    </dl>
</div>

<div>
    <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
    <a asp-action="Index">Back to List</a>
</div>

Create.cshtml
این فایل فرم ایجاد یک شخص جدید را نمایش می‌دهد:

@model Person

@{
    ViewData["Title"] = "Create Person";
}

<h2>Create Person</h2>

<h4>Person</h4>
<hr />

<form asp-action="Create">
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Age" class="control-label"></label>
        <input asp-for="Age" class="form-control" />
        <span asp-validation-for="Age" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Mobile" class="control-label"></label>
        <input asp-for="Mobile" class="form-control" />
        <span asp-validation-for="Mobile" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Email" class="control-label"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

<div>
    <a asp-action="Index">Back to List</a>
</div>

1 مشاهده16:14

پروژه ASP.Net Core MVC (وب و سی شارپ)

Edit.cshtml
این فایل فرم ویرایش یک شخص موجود را نمایش می‌دهد:

@model Person

@{
    ViewData["Title"] = "Edit Person";
}

<h2>Edit Person</h2>

<h4>Person</h4>
<hr />
<form asp-action="Edit">
    <div class="form-group">
        <input type="hidden" asp-for="Id" />
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Age" class="control-label"></label>
        <input asp-for="Age" class="form-control" />
        <span asp-validation-for="Age" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Mobile" class="control-label"></label>
        <input asp-for="Mobile" class="form-control" />
        <span asp-validation-for="Mobile" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Email" class="control-label"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</form>

<div>
    <a asp-action="Index">Back to List</a>
</div>

Delete.cshtml
این فایل فرم تأیید حذف یک شخص را نمایش می‌دهد:

@model Person

@{
    ViewData["Title"] = "Delete Person";
}

<h2>Delete Person</h2>

<h4>Person</h4>
<hr />
<dl class="row">
    <dt class = "col-sm-2">Name</dt>
    <dd class = "col-sm-10">@Model.Name</dd>
    <dt class = "col-sm-2">Age</dt>
    <dd class = "col-sm-10">@Model.Age</dd>
    <dt class = "col-sm-2">Mobile</dt>
    <dd class = "col-sm-10">@Model.Mobile</dd>
    <dt class = "col-sm-2">Email</dt>
    <dd class = "col-sm-10">@Model.Email</dd>
</dl>

<form asp-action="Delete">
    <input type="hidden" asp-for="Id" />
    <input type="submit" value="Delete" class="btn btn-danger" /> |
    <a asp-action="Index">Back to List</a>
</form>
به این ترتیب می‌توانید کنترلر و ویو‌های مورد نیاز برای عملیات CRUD را در ASP.NET Core MVC ایجاد کنید.

1 مشاهده16:14

پروژه ASP.Net Core MVC (وب و سی شارپ)

WebApplication4.zip

حجم: 18.3M

پروژه  Scaffolding
آدرس اکشن
 localhost:28987/scaffoldinguser

1 مشاهده16:20

مطالب بعدی

پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی