خانه / برنامه نویسی / آموزش ASP.NET MVC برای مبتدیان-جلسه هفتم-ساخت لینک با استفاده از ActionLink Helper

آموزش ASP.NET MVC برای مبتدیان-جلسه هفتم-ساخت لینک با استفاده از ActionLink Helper

اگر به خاطر داشته باشید در قسمت قبل دسترسی به داده ها از ظریق Entity Framework رو یاد گرفتیم و مشخصات کارمند رو از بانک اطلاعاتی دریافت کردیم و نمایش دادیم.

در این قسمت قراره لیستی از کارمندان رو واکشی و نمایش بدیم و با استفاده از ActionLink Helper کاربر رو به صفحه جزئیات کارمند که در جلسه پیش ساختیم ریدایرکت (هدایت) کنیم.

قسمت های قبلی آموزش ASP.NET MVC :

آموزش ASP.NET MVC برای مبتدیان – مقدمه

آموزش ASP.NET MVC برای مبتدیان-جلسه اول

آموزش ASP.NET MVC برای مبتدیان-جلسه دوم

آموزش ASP.NET MVC برای مبتدیان-جلسه سوم

آموزش ASP.NET MVC برای مبتدیان-جلسه چهارم

آموزش ASP.NET MVC برای مبتدیان-جلسه پنجم

آموزش ASP.NET MVC برای مبتدیان-جلسه ششم

همونطور که در تصویر میبینید یک لیست از کارمندان رو در صفحه ی اول نمایش دادیم که با کلیک روی هرکدام به صفحه جزئیات هدایت میشیم :

ActionLink Helper در MVC
ActionLink Helper در MVC

ابتدا اکشن متد ای به نام Index رو به کنترلر EmployeeController اضافه میکنیم به صورت زیر :

public ActionResult Index()
        {
            return View();
        }

کاری که باید این اکشن متد برای ما انجام بده به این صورت که یک نمونه از EmployeeContext میسازیم و از پراپرتی های Employee که در EmployeeContext هست استفاده میکنیم تا لیستی از کارمندان رو برای ما برگردونه و سپس این لیست رو به ویو پاس میدیم تا اطلاعات رو رندر کنه و به کاربر نمایش بده.کدها به صورت زیر میشن :

public ActionResult Index()
        {
            var employeecontext = new EmployeeContext();
            var employees = employeecontext.Employees.ToList();

            return View(employees);
        }

همونطور که گفته شد ابتدا یک نمونه از EmployeeContext ساختیم و سپس از پراپرتی های کلاس EmployeeContext استفاده کردیم و با استفاده از Linq لیست کارمندان رو به شئ employee دادیم و این لیست رو به ویو پاس دادیم.

تا اینجای کار تنها اکشن متد Index رو ساختیم، حالا نوبت به ساختن ویو Index میرسه که داخل این ویو از ActionLink Helper استفاده میکنیم برای ساختن لینک.

برای این کار همونطوری که در قسمت های قبل انجام دادیم ویو Index رو اضافه میکنیم، روی اکشن متد مورد نظر کلیک راست میکنیم و گزینه ی Add View رو انتخاب میکنیم، در پنجره جدید همون نام Index رو قرار میدیم و گزینه ی Create a strongly-typed view رو علامت دار میکنیم و از منوی پایین افتان Model Class مقدار Employee(MVCDemo.Models) رو انتخاب میکنیم، دقت کنید نا نیاز به یک لیست داریم پس میتونیم از قسمت Scaffold Template مقدار List رو انتخاب کنیم اما احازه بدید همون Empty رو انتخاب کنیم تا در باره Scaffold Template در جلاسات بعد مفصل صحبت کنیم حالا دکمه ی Add رو بزنید تا ویو ما ساخته بشه.

ابتدا تغییری که باید تو این ویو بدیم به این صورته : به بالای صفحه دقت کنید، مدل ما یک رکورد از بانک اطلاعاتی است ولی ما لیستس از رکوردها (کارمندان) رو به ویو پاس دادیم پس اون رو به IEnumerable تغییر میدیم چون لیست در اینترفیس IEnumerable پیاده سازی شده :

@model IEnumerable<MVCDemo.Models.Employee>

حالا چون یک لیست از کارمندان رو داریم پس از تگ ul استفاده میکنیم به صورت زیر :

@model IEnumerable<MVCDemo.Models.Employee>
@using MVCDemo.Models

@{
    ViewBag.Title = "Employees List";
}


<h2>Employees List</h2>
<ul>
    @foreach (Employee employee in Model)
    {
        <li>@Html.ActionLink(employee.Name, "Details", new { id = employee.EmployeeId })</li>
    }
</ul>

اگر دقت کنید میبینید که تگ ul رو باز کردیم و داخل تگ ul از حلقه foreach استفاده کردیم و به برنامه گفتیم برای هر مورد(کارمند) یک li بساز و درون هر li از ActionLink Helper استفاده کردیم تا لینک هر کارمند رو بسازه.

ActionLink Helper ها برای ما تگ های a رو میسازن.

ActionLink Helper اورلودهای متفاوتی داره که در این مثال اورلودی که استفاده کردیم 3 مقدار رو میگیره :

مقدار اول عنوان لینک که همون متن لینک هست، مقدار دوم نام اکشنی که قراره کاربر رو به اون هدایت کنه رو میگیره و سومین مقدار، به سومین مقدار دقت کنید، اگه به خاطر داشته باشید در قسمت قبل (دسترسی به داده ها از طریق Entity Framework) همراه با آدرس صفحه پارامتری رو هم داشتیم که آی دی کارمند بود و با استفاده از اون پارامتر مشخصات کاربر رو واکشی میکردیم، مقدار سوم همون پارامتر هست که به صفحه جزئیات ازسال میکنیم.

حالا پروژه رو اجرا کنید و آدرس localhost/MVCDemo/Employee/Index رو باز کنید، لیست کارمندان رو مشاهده میکنید که نام هر کارمند به صورت لینک هست که ActionLink Helper برای ما ساخته، ماوس رو روی نام ها نگه دارید و آدرس ها رو ببینید، روی هر نام کلیک کنید میبینید که به صفحه جزئیات کارمند هدایت میشید.

دوباره به Visual Studio برگردید و ویو Details رو باز کنید، ActionLink Helper زیر رو به انتهای کدها اضافه کنید :

@Html.ActionLink("Back to list","Index")

از این ActionLink Helper برای بازگشت به صفحه قبل استفاده میکنیم، میبینید که در این ActionLink Helper از یک اورلود دیگر استفاده کردیم که دو مقدار رو میگیره (عنوان لینک و نام اکشن مورد نظر) پس ویو Details باید به صورت زیر باشه :

@model MVCDemo.Models.Employee

@{
    ViewBag.Title = "Employee Details";
}

<h2>Employee Details</h2>

<table>
    <tr>
        <td>Employee Id</td>
        <td>@Model.EmployeeId</td>
    </tr>
    <tr>
        <td>Employee Name</td>
        <td>@Model.Name</td>
    </tr>
    <tr>
        <td>Employee Gender</td>
        <td>@Model.Gender</td>
    </tr>
    <tr>
        <td>Employee City</td>
        <td>@Model.City</td>
    </tr>
</table>
@Html.ActionLink("Back to list","Index")

در قسمت بعد درباره کار با جداول مختلف در MVC صحبت خواهیم کرد.

مطلب پیشنهادی

کمپایلر زبان های برنامه نویسی

دانلود کمپایلر زبان های برنامه نویسی

کمپایلر زبان های برنامه نویسی AIDE مخفف محیط یکپارچه توسعه دهندگی اندروید می باشد. با ...

۳ دیدگاه

  1. بازتاب ها: آموزش MVC برای مبتدیان 14،تفاوت UpdateModel و TryUpdateModel

  2. بازتاب ها: آموزش MVC برای مبتدیان ساخت ویو برای ثبت اطلاعات در بانک اطلاعاتی

  3. بازتاب ها: آموزش ASP.NET MVC برای مبتدیان-واکشی اطلاعات از چند جدول

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای مشاهده محصولات به قسمت فروشگاه سایت مراجعه نمایید. رد کردن