View Component ها در ASP.NET 5

سه شنبه 4 خرداد 1395

یکی از بهترین ویژگی های جدید ViewComponent ها هستند. این یک نوع mini MVC در داخل نرم افزار MVC که می توانند مانند partial View ها استفاده شوند. در این مقاله قصد داریم نحوه کار ViewComponent را توضیح دهیم .

View Component ها در ASP.NET 5

 

یکی از بهترین ویژگی های جدید ViewComponent هستند. این یک نوع  mini MVC در داخل نرم افزار MVC   است، که می توانند مانند partial View ها استفاده شوند. ViewComponent ها مانند  partial Viewها با یک کنترلر، تقریبا قابل مقایسه با یک UserControl در ASP.NET WebForms  می باشند.

خیلی خوب می شد اگر اکشن کنترلر  تنها مجبور به انجام یک وظیفه باشد :  و آن واکشی وپاس دادن پستهای بلاگ برای view   باشد و تمام چیزهای دیگر  بجای اینکه درmess up  کنترلر انجام شود ، باید در مکان های دیگر انجام شوند.

اجازه بدهید نحوه کار ها ViewCompnent  را به شما نشان دهیم.
در ابتدا ما نیاز به ایجاد یک کلاس ساده ، که از ViewComponent مشتق شده باشد و نیاز به "ViewComponent" به عنوان پسوند،داشته باشد ، داریم. به عنوان مثال Top20TagsViewComponent":

public class Top20TagsViewComponent : ViewComponent 
{ 
    private readonly ITagService _tagService; 

    public Top20TagsViewComponent(ITagService tagService) 
    { 
        _tagService = tagService; 
    } 

    public IViewComponentResult Invoke() 
    { 
         var tags = _tagService.LoadTop20Tags(); 
         var models = tags.Select( 
            new TagViewModel 
            { 
                Id = tag.Id, 
                Name = tag.Name 
            }); 
        return View(models); 
    } 
}

متد Invoke تقریبا مانند یک اکشن در یک کنترلر معمولی، که createو view بازمی گرداند ،به نظر می رسد. TagService استفاده شده ؛با پیش فرضی از IoC تزریق می شود. از آنجا که در همه جای ASP.NET 5 در دسترس است ، شما می توانید  به همه چیز با یک کنترلر معمولی دسترسی داشته باشید.

view زیر بسیار رایج است:

@model IEnumerable<DotNetFn.ViewComponents.TagViewModel>

@if (Model.Any()) 
{ 
	<ul> 
        @foreach (var tag in Tags) 
        { 
            <li> 
                [@tag.Id] @tag.Name 
            </li> 
        } 
    </ul> 
}

تنها ،مکانی که  view باید در آن  ذخیره شود کمی خاص است.  نیاز به ذخیره view  به طور پیش فرض با نام Default.cshtml در یک پوشه است، که نام آن  مانند ViewComponent بدون پسوند در داخل /Views/Shared/Components/ است

ViewComponent  ما در/Shared/Components/Top20Tags/Default.cshtml است.
نام پیش فرض Default.cshtml است، اما شما می توانید از هر نام دیگری استفاده کنید.

return View("TheNicerName", models);

با استفاده از این شما قادر به تغییر قالب در داخل ViewComponent هستید.

کامپوننت شرح داده شده تقریبا به عنوان یک partial View  استفاده می شود:

@Component.Invoke("TopTags");

 پاس دادن آرگومان

چیزی که بسیار جالب است ، پاس دادن  آرگومان ها به ViewComponent است. شاید شما  بخواهید تعدادی از تگ ها را برای نمایش، بسته به جایی که می خواهید از این کامپوننت ها استفاده کنید ،تغییر دهید.برای این منظور میتوانید از این روش استفاده کنید.

ما تنها نیاز به گسترش متد Invoke با آرگومان بیشتر داریم:

public IViewComponentResult Invoke(int count)     
{ 
    var tags = _tagService.LoadTopTags().Take(count);     
    var models = tags.Select(tag => 
        new TagViewModel 
        { 
            Id = tag.Id, 
            Name = tag.Name 
        }); 
     return View(models); 
} 

 

در حال حاضر ما قادر به فراخوانی  ViewComponent آن با  آرگومان های اضافی هستیم:

@Component.Invoke("TopTags", 10);

ViewComponent آسنکرون (asynchronous)
برای پشتیبانی از موتورهای آسنکرون view ها، می توانیم از  یک متد Invoke آسنکرون استفاده کنیم:

ublic async Task<IViewComponentResult> InvokeAsync(int count)     
{ 
    var tags = await _tagService.LoadTopTags();     
    var models = tags.Select(=> 
        new TagViewModel 
        { 
            Id = tag.Id, 
            Name = tag.Name 
        }).Take(count); 
     return View(models); 
} 

ما فقط نیاز به استفاده از await در View برای استفاده از این InvokeAsync داریم.

@await Component.InvokeAsync("TopTags", 10);

 

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید