• بررسی چگونگی ایجاد Custom Tag Helper در ASP.NET MVC Core – قسمت اول
بررسی چگونگی ایجاد Custom Tag Helper در ASP.NET MVC Core – قسمت اول
1395/02/19 - 11:09:00 // MVC 5 & 6 // 1 نظر // 779 بازدید

با توجه به سلسله مقالاتی که در زمینه Core 1 داشته ایم ، وضعیت Tag Helpers مشخص است ، ولی به جهت به بررسی سریع دوباره ، مجددا با پاسخ به این سوال ؛ آغاز می کنیم .

بسمه تعالی

بررسی چگونگی ایجاد Custom Tag Helper در ASP.NET MVC Core قسمت اول

با توجه به سلسله مقالاتی که در زمینه Core 1 داشته ایم ، وضعیت Tag Helpers مشخص است ، ولی به جهت به بررسی سریع دوباره ، مجددا با پاسخ به این سوال ؛ آغاز می کنیم .

Tag Helper ها چی هستند و به چه دردی میخورند ؟

برای پاسخ به این سوال ، اجازه بدهید یک پروژه MVC 5 را با هم بررسی کنیم . دقت کنید منظور از MVC 5 یعنی یک نسخه قبل از MVC 6 و این با ASP.NET 5 تفاوت دارد. به سراغ یک MVC 5 View باید برویم و ببینیم درون آن چه خبر است . به تصویر زیر که یکی از View های یکی از پروژه های من است ، دقت کنید.

همانطور که میبینید در این دریای کدی که وجود دارد ، هم HTML Tag وجود دارد و هم کدهایی شبیه دستورات C# همراه با @ و .... اکثر این کدهای شبیه C# با @Html همراه هستند . به این آیتمها Html Helper گفته میشود و بسیار همچنام طرفدار دارد . این توانایی که در MVC 5 وجود داشت ، این امکان را فراهم میکرد که بر اساس آنچه در ViewModelها وجود داشت ، بتوان ماهیتهایی مانند Html Tag تولید کرد و آنها را مدیریت نمود. بیشتر علاقه برنامه نویسان به آنها نزدیک بودن آنها به تگهای Html بود. اجازه بدهید یکی از آنها را در اینجا بیشتر بررسی کنیم.

مثلن یکی از دلایل ذوق زدگی و خوشحالی برنامه نویسان ، امکان اختصاص Css Class و Style و ... درون خود این Helper ها بود ، ولی باز هم آنها یک ماهیت خارج از Html بوده و هستند و پس از Compile و اجرای پروژه بر اساس آنچه از Model به آنها ارسال میشود ، شکل و مقدار میگیرند .

هرکاری بکنیم ، باز هم View ها ما با Html Helper ها شکل زیبایی نخواهد داشت و ضمننا برنامه نویس را مجبور کرده ایم از یک آیتم خارج از HTML استفاده کند . این چیزی است که باز ماکروسافت را گرفتار انتقادهای بسیار قرار دارد .

در MVC 6 این مشکل هم حل شد و واقعن هم به زیبایی حل شد . اگر یک وب سایت را به طراح بدهید تا برای شما HTML و ... تولید و به شما تحویل دهد ، پروژه همان جا تمام شده است . کافی است فقط با ایجاد چند Property در HTML Tag ها آنها را به قول معروف به دیتابیس وصل کنید و کار تمام است . اگر در یک Form مثلن 50 عدد TextBox داشته باشید ، مشابه آنچه طراح تولید کرده را 50 بار Copy/Paste کنید و بعد به آن Property بدهید . دیگر نیازی به جایگزینی آن با Html Helper و .... نیست .

خوب حالا اجازه بدهید یک Viewحاوی Tag Helper را بررسی کنیم.

در اینجا View بسیار شبیه Pure HTML است به آن صورت حاوی آیتمهای خارج از HTML نمیباشد . به عنوان مثال به Label دقت کنید . Label برای نمایش یک عبارت دقیقا همان است که در HTML داریم و فقط یک asp-for برای اتصال به یکی از آیتمهای Model به آن اضافه شده است. دیگر نیازی به هیچ @ و .... برای داشتن CSS Class و ... نیست و همه چیز مشابه همان است که در HTML به صورت معمول وجود دارد.

پس بر اساس آنچه گفته شد ، Tag Helper ها ماهیتی شبیه HTML Tag ها دارند با این تفاوت یک که در View Engine با افزوده شدن یک یا چند Property ساده مانند asp-for و ... میتوان آنها را به Field های Server Side مشتق شده از ViewModel یا کلن Model ها متصل نمود و از آنها به مانند HTML Helper ها استفاده کرد .

حال مساله اینجاست که در HTML Helper ها یک جاهایی کمبود داشتیم و یا به دلیل استفاده زیاد از یک مورد ، نیاز بود یکی را به صورت Custom در اختیار داشته باشیم و لذا میتوانستیم Custom Html Helper بسازیم . مثلن یک TextBox نیاز داشتیم که تاریخ دریافت کند یا در شرایط خاص ، رنگهای خاص نمایش دهد . برای اینطور کارها باید یکی مطابق نیاز خود می ساختیم. در Tag Helper ها نیاز به Custom کردن به دلیل محدودیت زیاد وجود ندارد ، چرا که همه چیز همان Pure Html است ، ولی برای توسعه پذیری و انعطاف بیشتر یا جلوگیری از دوباره کاری ، بعضی جاها بهتر است بتوانیم خودمان یک نوع جدید از آنها را ایجاد کنیم . یعنی مثلن چیزی شبیه این در یک View بتوان داشت .

این تصویر یعنی آنکه من میتوانم در View از یک آیتم جدید به عنوان Custom Tag Helper استفاده کنم که در بدنه آن تایین کرده ام چه HTML Tag هایی برایم Generate کند و چگونه عمل نماید و این یعنی باز شدن دستان ما در کدنویسی و تولید ابزارهای Custom در سطح پروژه ها .

خوب برای شروع باید بگوییم که برای ایجاد Tag Helper ها به چیزی به جز Class نیاز نداریم و با ایجاد یک کلاس و رعایت قواعد تولید Tag Helperمیتوان در سطح Viewها ابزارهای Custom شده در اختیار داشت و از آنها بهره برداری نمود.

در بخش بعدی ، اولین Tag Helper را ایجاد و از آن در سطح پروژه استفاده خواهیم نمود.

علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر