וובמאסטר - תיכנות ובניית אתרים

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

ori_calvo ,‏ מכללת הי טק‏ ‏/‏ 17 פברואר, 2011
F+
F-

בפרק זה נלמד כיצד פונקציות העזר של 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
>

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

Untitled

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

image

 

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

תגיות: מדריך‏  /  פיתוח‏  /  צד שרת‏  /  ASP.NET MVC‏  /  .net‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות