הכירו את WebMatrix: חבילת טכנולוגיות וכלי לבניית אתרים בחינם מבית מיקרוסופט

Guy Burstein — Fri, 09 Jul 2010 18:46:24 GMT

WebMatrix היא חבילה חינמית המכילה את כל מה שבוני אתרים צריכים כדי לבנות אתר לאינטרנט ובחינם: היא כוללת שרת Web, שפת סקריפט בשם CSHTML (שילוב של #C ושל HTML), מסד נתונים, וכלי אחד לבניית האתר וניהול הנתונים שלו. עם WebMatrix ו- CSHTML אפשר לבנות בקלות אתר דינמי גם ללא רקע בתכנות, לנהל את מסד הנתונים של האתר, לבצע אופטימיזציה למנועי חיפוש ולהעלות אותו לחברת האחסון בלחיצת כפתור כדי לחשוף אותו לאינטרנט.

החבילה, שמשקלה הוא פחות מ- 50Mb וניתן להורדה כחבילה אחת, כוללת 4 רכיבים:

IIS Developer Express –שרת Web לצרכי פיתוח, שהוא קטן, קל נוח להתקנה ולא דורש הרשאות אדמיניסטרטור על המחשב כדי להשתמש בו. ניתן להתקין אותו על Windows החל מגרסת XP והוא מאפשר לבנות אתרים בטכנולוגיות החדשות ביותר כמו ASP.Net, CSHTML ו- PHP.

CSHTML – היא שפה לבניית אתרים דינמיים המשלבת בין הפשטות של HTML לבין העושר שבשפת התכנות C#. דף CSHTML לדוגמא, בו אנו ניגשים לבסיס הנתונים, שולפים ממנו ומציגים רשימת פריטים יראה כך:

<html>
  <head>
    <title>CSHTML Sample</title>
  </head>
 
  <body>
    <ul>?
    @foreach (var row in db.Query("SELECT * FROM Products")) {
        <li>@row.Name</li>        
    }
    </ul>
  </body>
</html>

קל מאד ללמוד לבנות אתרים סטנדרטים בשפת CSHTML בעצמאות WebMatrix גם ללא רקע בתכנות, ומשימות נפוצות רבות הופכות להיות פשוטות:

הצגה ועדכון מידע
שליחת הודעות דואר אלקטרוני
הצגת קבצי וידאו (Flash, WMV, Silverlight)
העלאת קבצים ותמונות
קישור לרשתות חברתיות

SQL Server Compact – הוא מסד נתונים קל להתקנה ושימוש השומר את הנתונים בקובץ. יתרונו הגדול הוא בפשוטת העלאתו לחברת האחסון בסוף תהליך הפיתוח, ללא צורך בתשלום כלשהו עליו לחברת האחסון.

WebMatrix – כלי חינמי לבניית אתרים שמאפשר לנהל ולבצע את כל תהליך בניית האתר – החל מרגע יצירת האתר החדש, דרך כל שלבי הפיתוח, הבדיקות, ההתאמה למנועי חיפוש ולבסוף – העלאתו לחברת האחסון כדי שיהיה זמין למשתמשים דרך האינטרנט.

איך בונים אתרים עם WebMatrix?

ניתן ללמוד עוד על WebMatrix בדף הרשמי באתר מיקרוסופט (באנגלית), או להשתמש במדריך WebMatrix ו- CSHTML באתר Webmaster.org.il.

פיתוח אתרים עם WebMatrix יוצג לראשונה במסגרת כנס בוני האתרים WebTech 2010 של מכללת הי טק שיתקיים בבית חיל האוויר ב- 11.8.2010.

תהנו!

How to create a CSHTML and WebMatrix TweetMeme Helper

Guy Burstein — Wed, 07 Jul 2010 13:34:09 GMT

How to create a CSHTML and WebMatrix TweetMeme Helper

Microsoft has recently introduced the first beta of its new stack for building great web sites – WebMatrix. One of the key components of WebMatrix is the ASP.Net Web Pages “Razor” Syntax (or simply: CSHTML) that lets you write C# code inside the HTML markup.

Helpers in WebMatrix

Among the new possibilities and simplicity that this approach brings to people who build web sites, there is also the notion of Helper. Helpers are a way to use a single line of code for a common task that originally had taken several lines of code to do. Such helpers can be:

Sending mails
Displaying a WebGrid for presenting tabular data
Adding the Facebook button
Querying the database
Displaying a Twitter profile
Embedding rich media (Silverlight, Flash, WMV)

In this post I will show how to create a custom helper to use in your ASP.Net Web Pages with Razor Syntax inside WebMatrix. For the demo I will build a TweetMeme helper that embeds the familiar TweetMeme button.

There are 2 ways of creating helpers to use in WebMatrix:

Create the helper as a Class Library.
Create it as a class and distribute the code.

Create CSHTML Helper for WebMatrix as a Class Library in Visual Studio 2010

1. Open Visual Studio 2010, and create a new Class Library that targets .Net Framework 4 called TweetMeme.Helpers.

2. Add a reference to System.Web.dll.

3. Rename the default file (Class1.cs) to a more meaningful name, such as TweetMeme.cs.

4. Rename the class name in that file to TweetMeme, and remove the namespace declaration. You better off without a namespace when using helpers.

In order to implement a custom helper, you should create a method that will render to required HTML for the helper. This method should be public and static method and should return IHtmlString as the following code:

public static IHtmlString Button(... parameters ... )
{
    // Generate the HTML
    string html = ...
    return new HtmlString(html);
}

5. Implement the TweetMeme button method:

public static IHtmlString Button(string Url, 
    string  Twitter = null, 
    bool    Compact = false, 
    string  UrlShortenerService = "bit.ly", 
    string  UrlShortenerAPIKey = null)
{
    // Generate the HTML
    string html = GeneratedCode(Url, Twitter, Compact, UrlShortenerService, UrlShortenerAPIKey);
    return new HtmlString(html);
}

6. Implement the GenerateCode method, that generates the HTML for TweetMeme:

private static string GeneratedCode(string url, 
    string twitterName = null, 
    bool isCompact = false, 
    string UrlShortenerService = "bit.ly", 
    string UrlShortenerAPIKey = null)
{
    if (string.IsNullOrEmpty(url))
        throw new ArgumentException("Url cannot be null or empty", url);
 
    StringBuilder builder = new StringBuilder();
    builder.Append("<script type=\"text/javascript\"> ");
    if (isCompact)
        builder.Append("tweetmeme_style = 'compact'; ");
    builder.Append(string.Format("tweetmeme_url = '{0}'; ", url));
 
    if (!String.IsNullOrEmpty(twitterName))
        builder.Append(string.Format("tweetmeme_source = '{0}'; ", twitterName));
    if (!String.IsNullOrEmpty(UrlShortenerService))
    {
        builder.Append(string.Format("tweetmeme_service = '{0}'; ", UrlShortenerService));
        if (!String.IsNullOrEmpty(UrlShortenerAPIKey))
            builder.Append(string.Format("tweetmeme_service_api = '{0}'; ", UrlShortenerAPIKey));
    }
    builder.Append("</script> ");
    builder.Append("<script type=\"text/javascript\" src=\"http://tweetmeme.com/i/scripts/button.js\"></script>");
    return builder.ToString();
}

7. That’s it. The helper is ready to use.

Using a Custom Helper in WebMatrix

To use a custom helper in WebMatrix that is delivered as an assembly, you simply have to copy that .dll into a bin folder in your site.

1. In WebMatrix, add a bin folder to the root of your site.

2. Copy the output assembly of the helper (from the bin\debug\ folder of the class library you have just created) to the bin folder of the site.

3. In your code, simply call the Helper:

@TweetMeme.Button(url: Request.Url.AbsoluteUri, 
                  twitter: "bursteg", // replace with your twitter name 
                  compact: false)

Notice: If you now run your site locally, you with receive a TweetMeme button with a question mark in it. This is just because the url that it points to is a localhost address and not something that can be reached from the outside.

Create CSHTML Helper as a Class file inside WebMatrix

The second approach for creating helpers for WebMatrix is just adding a C# file with the helper class.

1. Inside WebMatrix, add a folder called App_Code to your web site.

2. Into the App_Code folder, add a new C# class to your web site.

2. Create the helper in this file using the same code as above

using System;
using System.Text;
using System.Web;
 
public static class TweetMeme
{
    public static IHtmlString Button(string url,
        string twitter = null,
        bool compact = false,
        string urlShortenerService = "bit.ly",
        string urlShortenerAPIKey = null)
    {
        // Generate the HTML
        string html = GeneratedCode(url, twitter, compact, urlShortenerService, urlShortenerAPIKey);
        return new HtmlString(html);
    }
 
    private static string GeneratedCode(string url,
        string twitterName = null,
        bool isCompact = false,
        string urlShortenerService = "bit.ly",
        string urlShortenerAPIKey = null)
    {
        if (string.IsNullOrEmpty(url))
            throw new ArgumentException("Url cannot be null or empty", "url");
 
        StringBuilder builder = new StringBuilder();
        builder.AppendLine("<script type=\"text/javascript\"> ");
        if (isCompact)
            builder.AppendLine("tweetmeme_style = 'compact'; ");
        builder.AppendLine(string.Format("tweetmeme_url = '{0}'; ", url));
 
        if (!String.IsNullOrEmpty(twitterName))
            builder.AppendLine(string.Format("tweetmeme_source = '{0}'; ", twitterName));
        if (!String.IsNullOrEmpty(urlShortenerService))
        {
            builder.AppendLine(string.Format("tweetmeme_service = '{0}'; ", urlShortenerService));
            if (!String.IsNullOrEmpty(UrlShortenerAPIKey))
                builder.AppendLine(string.Format("tweetmeme_service_api = '{0}'; ", urlShortenerAPIKey));
        }
        builder.AppendLine("</script> ");
        builder.AppendLine("<script type=\"text/javascript\" src=\"http://tweetmeme.com/i/scripts/button.js\"></script>");
        return builder.ToString();
    }
}

3. Use the helper in your code as shown above.

Conclusion

There are 2 approaches for creating Helpers for CSHTML. Creating helpers in class libraries are probably the better way of doing this in the eyes of professional developers, but my guess is that people who build web sites will prefer copying and pasting code samples for helpers to use in the project, and we will have a great community of helpers around the web.

Enjoy!

Guy Burstein's Blog : WebMatrix

הכירו את WebMatrix: חבילת טכנולוגיות וכלי לבניית אתרים בחינם מבית מיקרוסופט

How to create a CSHTML and WebMatrix TweetMeme Helper

How to create a CSHTML and WebMatrix TweetMeme Helper

Helpers in WebMatrix

Create CSHTML Helper for WebMatrix as a Class Library in Visual Studio 2010

Using a Custom Helper in WebMatrix

Create CSHTML Helper as a Class file inside WebMatrix

Conclusion