מדריך ASP.NET MVC – עדכון חלקי של התצוגה

בפרק זה נלמד כיצד פונקציות העזר של ASP.NET MVC מאפשרות לבצע עדכון חלקי של הדף באופן א-סינכרוני.

פתח את הקובץ Views\Group\Menu.cshtml והוסף לינק חדש בשם "Refresh". לינק זה אחראי להביא מהשרת תצוגה מעודכנת של הקבוצה הנוכחית:

<div class="menu">
  ...
  
  @if (this.ViewBag.AllowRefresh ?? false)
  {
    @Ajax.ActionLink("Refresh",
      "Index",
      "Group",
      new { id = this.Model.ID },
      new AjaxOptions()
      {
        UpdateTargetId = "itemsContainer",
        HttpMethod = "POST"
      });
  }
  
  <hr />
</div>

שים לב לשימוש בפונקצית העזר Ajax.ActionLink. השימוש בה מאוד דומה לפונקציה הרגילה: Html.ActionLink אלא שהיא מקבלת פרמטר נוסף מסוג AjaxOptions בעזרתו ניתן לקבוע מאפיינים הקשורים בהפעלה הא-סינכרונית של הלינק.

שים לב לשימוש בפרמטר UpdateTargetId אשר מציין את האלמנט בתוך מסמך ה-HTML אשר יש לעדכנו באמצעות ה-HTML שחוזר מהשרת. הפרמטר השני הנקרא "HttpMethod" מגדיר כי יש לבצע פעולה א-סינכרונית מסוג POST ולא GET (שהיא ברירת המחדל). שימוש ב-GET עלול לגרום ל-IE להשתמש ב-Cache הלוקלי ולא לבצע כלל פניה לשרת.

תקן את הפונקציה Index במחלקה GroupController כך שתדע להבדיל ביו בקשה א-סינכרונית לבקשה רגילה ותחזיר את ה-HTML המתאים. במקרה של בקשה א-סינכרונית עלינו להחזיר רק את התוכן של האלמנט itemsContainer ולא את התצוגה כולה:

public ActionResult Index(int? id, bool? desc)
{
  AddressBookDB db = AddressBookDB.Create();
 
  Group group;
  if (id == null)
  {
    group = db.Root;
  }
  else
  {
    group = (Group)db.GetItemByID(id.Value);
  }
 
  bool orderByDesc = (desc ?? false);
  BookItem[] items = SortItems(group.Items, orderByDesc);
  ViewBag.Items = items;
  ViewBag.OrderByDesc = orderByDesc;
 
  if (Request.IsAjaxRequest())
  {
    return View("Items", group);
  }
  else
  {
    return View(group);
  }
}

שים לב לשימוש בפונקציה Request.IsAjaxRequest על מנת לזהות האם מדובר בבקשה א-סינכרונית או רגילה.

בשלב זה הקוד עדיין איננו מוכן לריצה. יש לבצע עוד תיקון קטן. פונקצית העזר Ajax.ActionLink מסתמכת על ספריית ה-Ajax של מייקרוסופט ועל הספרייה jQuery. לכן, עלינו להוסיף קישורים מתאימים לספריות אלו בתוך קובץ הפריסה. פתח את הקובץ Views\Shared\_Laout.cshtml והוסף את הקישורים הבאים:

<script src="@Url.Content("
                 ~/Scripts/jquery.unobtrusive-ajax.min.js")" 
        type="text/javascript"></script>
 
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" 
        type="text/javascript"></script>
 
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" 
        type="text/javascript"></script>

הרץ את התוכנית ובחן את התנהגות המערכת:

לחץ על הלינק "Refresh" ושים לב כיצד התאריך מתעדכן:

בפרק זה למדנו כיצד ניתן להשתמש בפונקציה Ajax.ActionLink ולעדכן בעזרתה רק חלק מהתצוגה. בפרקים הבאים אנו נמשיך בהיכרות עם היכולות ASP.NET MVC בהקשר לעבודה עם AJAX.