HTML Helper در ASP.NET Core قسمت دوم – جلسه ۲۹

HTML Helper در ASP.NET Core قسمت دوم

در این جلسه از آموزش ASP.NET Core به ادامه مبحث HTML Helper در ASP.NET Core خواهیم پرداخت و نحوه ارسال آیتم‌های DropDownList از Controller را بررسی خواهیم کرد. در جلسه 28 با نحوه عملکرد DropDownList آشنا شدیم و لیست آیتم‌های آنرا درون خود View ایجاد نمودیم. در ادامه‌ی این جلسه، لیست را درون Controller و Action Method مربوطه ایجاد میکنیم و به View ارسال میکنیم.

ارسال SelectList از Controller به View

SelectList در واقع یک لیست از SelectListItem میباشد که حاوی آیتم‌های DropDownList است. برای ارسال این لیست از کنترلر به نما، ابتدا میبایست آنرا از پایگاه داده یا یک ریپازیتوری استاتیک فراخواند و یا آنرا درون Action Method مورد نظر فراخوانی نمود. ما در این جلسه ابتدا آنرا درون اکشن متد Create از کنترلر Cost ایجاد میکنیم.

            List<SelectListItem> CatList = new List<SelectListItem>
               {
                   new SelectListItem{Text = "Grocery", Value = "Grocery", Selected=true },
                   new SelectListItem{Text = "Bill", Value = "Bill" },
                   new SelectListItem{Text = "Rent", Value = "Rent" },
                   new SelectListItem{Text = "Home Appliance", Value = "Home Appliance" },
               };

سپس توسط ViewBag میتوان آنرا به View ارسال نمود. توجه داشته باشید در صورتی که Dynamic Property مربوط به ViewBag دقیقا همنام با Expression مربوط به DorpDownList موجود در View باشد، داده به صورت خودکار درون Drop Down List نمایش داده میشود.

قطعه کد مربوط به Controller در زیر قابل مشاهده میباشد و آیتم Rent به عنوان آیتم پیشفرض انتخاب شده است.

        public IActionResult Create()
        {
            List<SelectListItem> CatList = new List<SelectListItem>
               {
                   new SelectListItem{Text = "Grocery", Value = "Grocery" },
                   new SelectListItem{Text = "Bill", Value = "Bill" },
                   new SelectListItem{Text = "Rent", Value = "Rent" },
                   new SelectListItem{Text = "Home Appliance", Value = "Home Appliance" },
               };
            ViewBag.category = new SelectList(CatList,"Value","Text","Rent");

            return View();
        }

همچنین قطعه کد زیر، مربوط به نما و DowpDownList HTML Helper است و همانگونه که مشاهده میکنید Dynamic Property مربوط به ViewBag و Expression مربوط به DropDownList دقیقا همنام میباشند.

@Html.DropDownList("category","Select a Category")

در روش فوق به صورت پیش فرض، امکان استفاده از Attribute در DropDownList HTML Helper وجود ندارد. همچنین برای انتخاب گزینه پیشفرض از لیست مربوطه امکان استفاه از فیلد Selected نیز وجود دارد که در ادامه به آن خواهیم پرداخت.

برای انتخاب گزینه پیش فرض، درون لیست بوسیله فیلد Selected تغییرات زیر را ایجاد می‌کنیم و نحوه ارسال آن توسط ViewBag را اعمال میکنیم.

        public IActionResult Create()
        {
            List<SelectListItem> CatList = new List<SelectListItem>
               {
                   new SelectListItem{Text = "Grocery", Value = "Grocery", Selected=true },
                   new SelectListItem{Text = "Bill", Value = "Bill" },
                   new SelectListItem{Text = "Rent", Value = "Rent" },
                   new SelectListItem{Text = "Home Appliance", Value = "Home Appliance" },
               };
            ViewBag.category = CatList;

            return View();
        }

با تغییرات فوق، آیتم Grocery به عنوان مقدار پیشفرض انتخاب خواهد شد. همچنین با تغییرات زیر در HTML Helper DropDownList استایل مورد نظر و کلاس مورد نظر را در HTML Helper اعمال می‌کنیم.

@Html.DropDownList("category",ViewBag.category, "Select a Category", new { @class = "form-control" })

در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. همچنین لیست کامل جلسات در این قسمت در دسترس شما میباشد.

تماشای ویدیو در یوتیوب ما

دانلود اسلایدهای آموزشی این جلسه از اینجا

برچسب ها

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
0
افکار شما را دوست داریم، لطفا نظر دهید.x