معرفی Anchor ها و Url های MVC

Anchor برای تولید لینک به مکان های خاص در یک سند وب مورد استفاده قرار می گیرد. با استفاده از تگ های Anchor میتوان به مکان مشخصی در صفحه وب رفت. در مواردی ممکن است مشکل کمی با استفاده از helper های MVC LinkExtension داشته باشیم.

معرفی Anchor ها و Url های MVC

با قرار دادن تگ Anchor در یک پست یا صفحه می توانید لینکی در بدنه پست قرار دهید  که به کاربر اجازه دهد به راحتی به مکان مشخص دیگری از صفحه برود. در این مقاله ایجاد لینک توسط Helper های MVC پیاده سازی شده است که در ادامه خواهیم دید.

تگ های Anchor نیاز به استفاده از صفت name در یک المان <a href> دارند.مانند کد زیر:


<a href="#" name="comments"></a>
<h2>Comments</h2>

با زیاد شدن تعداد لینک ها می توانید برای هرکدام name منحصر به فرد در نظر بگیرید، مانند زیر:

<a href="#" name="commentId1033"></a>
<div class="comment">
...      
<a href="#" name="commentId1034"></a>
<div class="comment">
...
<a href="#" name="commentId1035"></a>
<div class="comment">
...

در اینجا Browser از کاربر موقعیت سندی که با Anchor تعریف شده می گیرد  و لازم است که به URL عبارت <anchor-name># اضافه شود که <anchor-name> مرتبط با صفت name در لینک می باشد.

عبارت زیر یک مثال معتبر از این مورد می باشد:

اگر شما بخواهید انواع این URL ها را به طور پویا توسط چسباندن ID ها به string بسازید، ممکن است در نهایت ببینید نتایج %23 مطابق انتظار شما بوده است و لینک آنطور که انتظار می رود کار نمی کند.

در ادامه از طریق Helper های سفارشی در MVC پیاده سازی Anchor  را ساده می کنیم. هر دو helper های ActionLink و RouteLink شامل یک بار اضافی هستند که بر این مشکلات گفته شده در بالا غلبه می کنند.

در URL با گذاشتن علامت # نشان می دهیم که می خواهیم از Anchor استفاده کنیم و نامی که بعد از # می آید همان صفت name بوده که با نوشتن آن به مکان مشخصی از همان صفحه یا صفحات دیگر اشاره می کند.

در اینجا متد RoutLink اضافه کردن # و name بعد از آن را به طور خودکار انجام می دهد و کاربر با کلیک بر روی لینک ساخته شده توسط RoutLink به مکان مورد نظر می رود.

متد(RoutLink(HtmlHelper,string,string,string,string,string,Object,Object

پنجمین String که به عنوان آرگومان تعریف شده همان قسمت(name) بعد از علامت # است که در URL می آید.

کد زیر نحوه پیاده سازی RoutLink را نشان می دهد:


<%= Html.RouteLink(
  item.CommentName,                    // Link Text
  "Show",                              // Route Name
  null,                                // Protocol
  null,                                // Host Name
  "commentId" + item.CommentID,        // Fragment
  new {                                // Route Values
        controller = "Article", 
        action = "Show",
        id = item.Articles.ArticleID,
        title = item.Articles.Headline.ToCleanUrl()
      }, 
  null                                 // HTML Attributes
    ) %>