מדריך ASP.NET MVC – איך להמיר JSON ל-HTML

בפרק הקודם למדנו כיצד להגדיר Action המחזיר לדפדפן תוכן שאיננו HTML אלא JSON. הפורמט JSON הינו פורמט פשוט יחסית אך עם זאת מאפשר לייצג כמעט כל סוג של מידע. בעזרת פונקציות השירות של jQuery (נראה זאת בהמשך) ניתן "למשוך" את הנתונים בתצורת JSON מהשרת באופן א-סינכרוני ולהביאם לזיכרון של הדפדפן.

ברוב המקרים כאשר שולפים נתונים מהשרת יש צורך לעדכן אותם בתוך מסמך ה-HTML שמוצג למשתמש. בעזרת פונקציות השירות השונות של jQuery ניתן לעשות זאת די בקלות, אך כאשר יש צורך לעדכן HTML רב, משימה זו נעשית קשה.

הספרייה jQuery מציעה שירות הנקרא Client Templates המאפשר להגדיר תבנית טקסטואלית ובשלב מאוחר יותר ליצור ממנה HTML על סמך אוסף של אובייקטי JavaScript. בפרק זה נלמד כיצד לעבוד עם שירות זה.

הוסף Viewחדש בשם ItemsTemplate תחת Views\Group. תצוגה זו אחראית להחזיר את התבנית שתשמש לבניית ה-HTML:

@{
    Layout = null;
}
 
<div class="itemsTemplate">
  <div class="item">
    <span class="actions">
      <a href="@Url.Content("~/Book/Edit")/{{= ID}}">
            Edit</a>
      <a href="@Url.Content("~/Book/Delete")/{{= ID}}">
            Delete</a>
    </span>
 
    <a href="@Url.Content("~/Book/Index")/{{= ID}}" >
           {{= Description}}</a>
  </div>
</div>

הוסף קובץ JavaScript חדש תחת: Scripts\Group\Index.js. ודא כי התצוגה Views/Group/Index.cshtml מכילה קישוריות לקובץ זה. הקובץ Index.js אחראי על שליפת התבנית מהשרת וכן על עדכון הלינק "Refresh" כך כשלוחצים עליו הוא ישלוף נתונים מהשרת, יתרגמם ל-HTML ויעדכנם ב-DOM.

לשליפת התבנית מהשרת עדכן את הקוד הבא:

var itemsTemplates = null;
 
jQuery(document).ready(function () {
  jQuery.get("/Group/ItemsTemplate",
                {},
                getItemsTemplate_Success,
                "html");
});
 
function getItemsTemplate_Success(html) {
  itemsTemplate = jQuery(html);
 
  bindToRefreshLink();
}

שים לב כיצד הקוד משתמש בפונקצית העזר jQuery.get על מנת לשלוף את התבנית מהשרת. במידה והשרת החזיר את התבנית בהצלחה אזי הקוד שומר אותה במשתנה גלובלי ופונה לטיפול בכפתור ה-Refresh.

לשינוי ההתנהגות של כפתור ה-Refresh עדכן את הקוד הבא:

function bindToRefreshLink() {
  var refreshLink = jQuery(".menu .refresh");
  if (!refreshLink.length) {
    return;
  }
 
  var groupId = refreshLink.attr("data-groupId");
  if (groupId === undefined) {
    return;
  }
 
  var orderByDesc = refreshLink.attr("data-orderByDesc");
  if (orderByDesc === undefined) {
    return;
  }
 
  refreshLink.click(function () { 
      return refresh_Click(groupId, orderByDesc); });
}
 
function refresh_Click(groupId, orderByDesc) {
  jQuery.ajax({
    url: "/Group/Items/" + groupId + 
         "?desc=" + orderByDesc,
    dataType: "json",
    cache: false,
    success: getItems_Success
  });
 
  return false;
}

הקוד משתמש בטכניקה המקובלת של Unobtrusive JavaScript. בטכניקה זו אנו מניחים כי ללינק יש התנהגות ברירת מחדל של שליחת HTTP GET לשרת הגורמת לעדכון התצוגה כולה. ע"י הפונקציה click של jQuery אנו משנים את ההתנהגות של הלינק וגורמים לו להריץ פונקציה מקומית בשם refresh_Click אשר מבטלת את התנהגות ברירת המחדל ומבצעת עבודה א-סינכרונית אל מול השרת.

היתרון בטכניקה של Unobtrusive JavaScript הוא בכך שאם הדפדפן לא תומך ב-JavaScript אזי מקבלים את התנהגות ברירת המחדל של הלינק והמשתמש עדיין יכול לעבוד עם התוכנית שלנו.

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

function refresh_Click(groupId, orderByDesc) {
    jQuery.ajax({
        url: "/Group/Items/" + groupId + 
             "?desc=" + orderByDesc,
        dataType: "json",
        cache: false,
        success: getItems_Success
    });
 
    return false;
}
 
function getItems_Success(data) {
    var items = jQuery(".items");
    if (!items) {
        return;
    }
 
    if (itemsTemplate == null) {
        return;
    }
 
    items.fadeOut("slow", function () {
        items.empty();
 
        var newHtml = itemsTemplate.tmpl(data);
        newHtml.appendTo(items);
 
        items.fadeIn("slow");
    });
}

שים לב כיצד הקוד שולף את הנתונים בתצורת JSON ובעזרת הפונקציה tmpl הופך אותם ל-HTML ומאכסן את ה-HTML בחזרה בתוך ה-DOM. על מנת להשיג תחושה של עדכון התצוגה הקוד משתמש בפונקציות העזר של jQuery הנקראות fadeOut ו-fadeIn.

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

לחץ שוב,

בפרק זה למדנו כיצד ניתן להשתמש בשירות של jQuery הנקרא tmpl על מנת לתרגם בקלות נתונים שהבאנו מהשרת בתצורת JSON ל-HTML ולשלבם בתוך המסמך.