מדריך Windows Azure – בניית ממשק משתמש ב ASP.NET

בניית Web Role להצגת  ספר האורחים ולאפשר פעולות הוספה/עדכון.

במדריך הקודם עשינו שימוש ב Table Storage על מנת לשמור את נתוני רשומות ספר האורחים.

במשימה זו נעדכן את הWeb Role שיצרנו במשימה הראשונה בזמן יצירת הפרויקט. משימה זו כוללת מספר חלקים בניהם עדכון ממשק המשתמש כך שיציג את הרשומות בספר האורחים, על מנת לבצע זו קיימים דפים שעושים שימוש בחלקים שנמצאים בתיקיית Assets בתיקייה של תרגיל זה. לבסוף נכתוב את הקוד שאחראי על שמירת הנתונים ב Blob Storage וב Table Storage

• הוסף Reference מה Web Role אל הפרויקט הקודם שיצרנו – GuestBook. קליק ימני על הפרויקט של ה- Web Role, לחיצה על Add Reference . בטאבים יש לבחור את הטאב של הProjects לבחור את GuestBook וללחוץ על OK.
• כאשר יוצרים Web Role הוא יוצר דף בשם Default.aspx. יש למחוק את קובץ זה ולהשתמש בקובץ שמכיל את רכיבי ממשק המשתמש עבור ספר האורחים. על מנת למחוק את הקובץ יש ללחוץ קליק ימני על הקובץ בSolution explorer ולבחור Delete.
• הוסף את הדף המרכזי של הWeb Role ואת הרכיבים שהוא משתמש בהם. קליק ימני על הפרויקט Add ו Existing item. כעת יש לגשת לתקיית ה- Assets הנוכחית בתוךSource\Ex1-BuildingYourFirstWindowsAzureApp. כאן קיימות 2 תקיות, אחת עבור כל שפה. פתח את התקייה לפי השפה בה אתה כותב. פתח את תקיית Assets וסמן באמצעות Ctrl את כל הרכיבים באותה תקייה ולחץ על OK.
• פתח את קובץ קוד (Code behind) של Default.aspx. קליק ימני על הקובץ ב Solution explorer ובחר ב ViewCode.
• בקובץ הקוד הוסף את ה- Namespces הבאים:

using System.IO;
using System.Net;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
using GuestBook_Data;

• הגדר את השדות הבאים במחלקה :

public partial class Default : System.Web.UI.Page
{
  private static bool StorageInitialized = false;
  private static object gate = new Object();
  private static CloudBlobClient blobStorage;
  //  ...
}

• כתוב את מטפל האירוע SignButton_Click בקובץ הקוד והכנס את הקוד הבא :

public partial class Default : System.Web.UI.Page
{
  //...
  protected void SignButton_Click(object sender, EventArgs e)
  {
    if (FileUpload1.HasFile)
    {
      InitializeStorage();
 
      // upload the image to blob Storage
      string uniqueBlobName = string.Format("guestbookpics/image_{0}{1}",
        Guid.NewGuid().ToString(), Path.GetExtension(FileUpload1.FileName));
      CloudBlockBlob blob = 
        blobStorage.GetBlockBlobReference(uniqueBlobName);
      blob.Properties.ContentType = FileUpload1.PostedFile.ContentType;
      blob.UploadFromStream(FileUpload1.FileContent);
      System.Diagnostics.Trace.TraceInformation("Uploaded image '{0}' to blob Storage as '{1}'"
        , FileUpload1.FileName, uniqueBlobName);
 
      // create a new entry in table Storage
      GuestBookEntry entry = new GuestBookEntry() 
      { 
        GuestName = NameTextBox.Text, 
        Message = MessageTextBox.Text, 
        PhotoUrl = blob.Uri.ToString(), 
        ThumbnailUrl = blob.Uri.ToString() 
      };
      GuestBookDataSource ds = new GuestBookDataSource();
      ds.AddGuestBookEntry(entry);
      System.Diagnostics.Trace.TraceInformation("Added entry {0}-{1} in table Storage for guest '{2}'",
        entry.PartitionKey, entry.RowKey, entry.GuestName);
    }
    NameTextBox.Text = "";
    MessageTextBox.Text = "";
    DataList1.DataBind();
  }
}
 

על מנת לבצע את התהליך עבור רשומה חדשה בספר האורחים הפונקציה שמטפלת הלחיצה על הכפתור מפעילה את הפונקציה InitializeStorage על מנת לבדוק האם ה- Storage קיים ויש לו את הגדרות הגישה המתאימות (allows public access).

כאשר אנחנו מחזיקים את ה- blob container אנחנו מייצרים שם ייחודי לתמונה שאנו רוצים לשמור ומגדירים אם את ה- ContentType בהתאם ל ContentType של הקובץ שהמשתמש העלה. דבר זה יכול לשמש אותנו בעתיד כאשר נרצה לדעת מה סוג ה- blob ששמרנו. אחרי הוספת הרשומה אנו מבצעים עדכון לדף באמצעות DataBind על מנת לקבל נתונים עדכניים.

• עדכן את תוכן הפונקציה Timer1_Tick עם הקוד הבא :

public partial class Default : System.Web.UI.Page
{
  ...
  protected void Timer1_Tick(object sender, EventArgs e)
  {
    DataList1.DataBind();
  }
}

תפקיד הTimer לבצע עדכון לדף אוטומטי.

• על מנת לאפשר את הTimer הוסף את הקוד הבא :

public partial class Default : System.Web.UI.Page
{
  ...
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!Page.IsPostBack)
    {
      Timer1.Enabled = true;
    }
  }
}
 

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

private void InitializeStorage()
  {
    if (StorageInitialized)
    {
      return;
    }
 
    lock (gate)
    {
      if (StorageInitialized)
      {
        return;
      }
 
      try
      {
        // read account configuration settings
        var StorageAccount = 
          CloudStorageAccount.FromConfigurationSetting("DataConnectionString");
 
        // create blob container for images
        blobStorage = 
          StorageAccount.CreateCloudBlobClient();
        CloudBlobContainer container = 
          blobStorage.GetContainerReference("guestbookpics");
        container.CreateIfNotExist();
 
        // configure container for public access
        var permissions = container.GetPermissions();
        permissions.PublicAccess = 
          BlobContainerPublicAccessType.Container;
        container.SetPermissions(permissions);
      }
      catch (WebException)
      {
        throw new WebException(@"Storage services initialization 
            failure. Check your Storage account configuration settings.
            If running locally, ensure that the Development Storage 
            service is running.");
      }
 
      StorageInitialized = true;
    }
  }
}

הפונקציה InitializeStorage קודם כל מוודאת שהקוד יפעל פעם אחת בלבד. היא קורא את ההגדרות מהקונפיגורציה של ה- WebRole, יוצרת את ה- blob container עבור שמירת התמונות של ספר האורחים ומגדירה גישה מתאימה (public access).

• מפני שה Web Role שלנו משתמש ב Windows Azure Storage services אנחנו צריכים לספר את ההגדרות של חשבון האחסון שלנו (Storage Account). על מנת ליצור את ההגדרות כנס ל Solution explorer פתח את תקיית ה- Roles בתוך הפרויקט GuestBool.דבל קליק על GuestBook_WebRole על מנת לפתוח את מאפייני הRole ובחר את הטאב של ה- Setting. לחץ על Add Setting. כתוב "DataConnectionString" בשדה ה- Name את שדה הType שנה ל ConnectionString. כעת לחץ על הכפתור המסומן בתמונה הבאה מצד ימין.
• בחלון הבא בחר את האפשרות Use the Windows Azure Storage emulator ולחץ על OK.

חשבון האחסון (Storage account) הוא נקודת הקצה (EndPoint) של השירותים הבאים Blob, Queue, and Table. על מנת להשתמש בשירותים הללו עליך ליצור את חשבון האחסון דרך הפורטל של Windows Azure. התרגיל זה לצורך פיתוח ותרגול אנו משתמשים ב"חשבון דמה" שרץ על המכונה שלנו. "חשבון הדמה"מאפשר לנו לפתח ולבצע בדיקות בצורה לוקאלית לפני עלייה לשרת. על מנת להשתמש ב"חשבון הדמה" (Emulator) יש להשתמש ב UseDevelopmentStorage, כפי שהשתמשנו בסעיף זה. כאשר נעלה את החשבון אל הענן נצטרך לשנות את ה- ConnectionString של החשבון לכתובת של החשבון האמיתי.

• לחץ על Ctrl+S על מנת לבצע שמירה של השינויים.
• נשאר לנו רק להגדיר את קונפיגורציה של התצורה הכללית של ה- WebRole. את קוד יש להוסיף הקובץ global.asax שיושב בתוך ה- WebRole. ראשית יש להוסיף את ה- Namespces הבאים :
• הוסיפו את הקוד הבא בתוך הפונקציה Application_Start.

void Application_Start(object sender, EventArgs e)
{
              Microsoft.WindowsAzure.
                CloudStorageAccount.SetConfigurationSettingPublisher
                ((configName, configSetter) =>
    {
      configSetter(RoleEnvironment.
        GetConfigurationSettingValue(configName));
    });
}

למדריך הבא – שימוש ב Queue Storage