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

מדריך CSHTML - הוספת חיפוש לאתר האינטרנט שלך

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 5 פברואר, 2011
F+
F-

בפרק זה תלמד כיצד לחפש באתר באמצעות מנוע החיפוש Bing.

מה תלמד:

  • איך להוסיף את היכולת לחפש באתרי אינטרנט (כולל שלך) אל אתר האינטרנט שלך.

אנו נשתמש בעוזר Bing.

חיפוש דרך אתר האינטרנט שלך

על ידי הוספת יכולת החיפוש באינטרנט דרך אתר האינטרנט שלך, אתה יכול לכלול את תוצאות החיפוש באינטרנט, מבלי לעזוב את האתר שלך. הוספת יכולת חיפוש לאתר יכולה להיות שימושית במספר דרכים:

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

כדי להוסיף חיפוש לאתר שלך, אתה משתמש בעוזר Bing ומציין את כתובת האתר לחיפוש (לא חובה). העוזר Bing יוצר תיבת טקסט שבה משתמשים יכולים להזין את הביטוי לחיפוש.

ישנן שתי דרכים להגדיר את החיפוש: אפשרות "פשוטה" ואפשרות "מתקדמת". באפשרות הפשוטה, מוצג סמל החיפוש של בינג ומשתמשים יכולים ללחוץ כדי להפעיל את החיפוש:

bing

 

אם ציינת אתר חיפוש, העוזר Bing מציג גם כפתורי רדיו, המאפשרים למשתמש לקבוע האם החיפוש מוגבל רק לאתר המצוין או לאינטרנט בכלל. כאשר המשתמש מבצע את החיפוש, האפשרות הפשוטה פשוט מפנה את החיפוש לאתר בינג ( http://bing.com ). התוצאות מוצגות בחלון דפדפן חדש, כאילו המשתמש הכניס את הביטוי לחיפוש בדף הבית של בינג:

Bing

 

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

Bing

 

אתה יכול לציין אפשרויות עבור אופן ההצגה של תוצאות החיפוש. אם ציינת אתר חיפוש, התוצאות מראות כרטיסיות (עבור האתר ועבור האינטרנט), כך שהמשתמש יכול להחליף בין תצוגה של חיפוש ספציפי באתר לבין תצוגה של חיפוש כללי באינטרנט.

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

  1. צור אתר אינטרנט חדש.
  2. הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
  3. הוסף דף חדש בשם Search.cshtml והוסף את הקוד הבא:
    <!DOCTYPE html>
    <
    html
    >
    <
    head>
      <title>Custom Bing Search Box</title
    >
    </
    head
    >
    <
    body>
      <div>
        <h1>
          Simple Search</h1>
        <p>
          The simple option displays results by opening
          a new browser window that shows the Bing home page.
        </p>
        Search the ASP.NET site:
        <br />
        @Bing.SearchBox(siteUrl: "www.asp.net")
      </div>
      <div>
        <h1>
          Advanced Search Option</h1>
        <p>
          The advanced option shows search results directly
    in this page.
          You can specify options to format the results.
    </p>
        Search the ASP.NET site:
        <br />
        @Bing.AdvancedSearchBox(
                siteUrl: "www.asp.net",
                siteName: "ASP.NET Custom Search",
                boxWidth: 300,
                resultWidth: 600,
                resultHeight: 500,
                themeColor: "Green",
                locale: "he-IL")
      </div
    >
    </
    body
    >
    </
    html
    >

    בקוד, אתה קורא לעוזר Bing פעמיים. בפעם הראשונה אתה משתמש בפונקציה SearchBox (החיפוש הפשוט), ובפעם השנייה אתה משתמש בפונקציה AdvancedSearchBox (החיפוש המתקדם). עבור שתי הפונקציות, הפרמטר siteUrl (הוא אופציונלי) מאפשר לך לציין באיזה אתר לחיפוש (אם לא תציין כתובת, בינג פשוט מחפש באינטרנט). בדוגמה זו, אתה מחפש באתר http://asp.net. כמובן שאם אתה רוצה לבצע חיפוש באתר שלך, היית מחליף את כתובת האתר הזה.

    בפונקציה AdvancedSearchBox, הפרמטר siteName משמש בחלונית התוצאות כדי להראות את השם של האתר שאתם מחפש בו. גודל תיבת החיפוש ניתן לשינוי באמצעות פרמטר boxWidth . ניתן להגדיר את הגודל של חלונית התוצאות באמצעות הפרמטרים resultWidth ו- resultHeight, ואת צבע חלונית התוצאות על-ידי הגדרת הפרמטר themeColor. ניתן גם לציין את השפה שבה משתמש רכיב בינג בעת הצגת תוצאות החיפוש ואת שפת ממשק המשתמש על ידי הגדרת הפרמטר locale.

    הפרמטר locale מוגדר באמצעות ביטוי עם שני חלקים: חלק ראשון לשפה וחלק שני לאזור.
    דוגמאות:

    • en-US (אנגלית, ארה"ב)
    • en-GB (אנגלית, בריטניה)
    • es-MX (ספרדית, מקסיקו)
    • fr-CA (צרפתית, קנדה)
    • he-IL (עברית, ישראל) וכו'.

    אתה יכול למצוא רשימה מלאה של הקודים על ידי חיפוש באינטרנט עבור הביטוי: "locale codes" .
    שימו לב שבחירת אזור/שפה מסויימת אינה משפיעה על הגבלת תוצאות החיפוש לאזור/שפה זו בלבד.

  4. הפעל את הדף Search.cshtml בדפדפן.
  5. הזן את הביטוי לחיפוש בתיבה הרגילה, ולאחר מכן לחץ על כפתור image
    התוצאות מוצגות בחלון דפדפן חדש.
  6. הזן את החיפוש בתיבה המתקדמת. הדף מציג חלונית עם תוצאות החיפוש.

הערה: על מנת ש- Bing יחזיר את התוצאות, האתר שבו אתה מחפש חייב להיות ברשת האינטרנט, זמין לציבור ותוכנו חייב לעבור מיפוי מראש על ידי ה"זחלנים" של מנוע החיפוש בינג.

ליאור זמיר, ג'ון ברייס הדרכה

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.
לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.
תגיות: ASP.NET‏  /  CSHTML‏  

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

תגובות למאמר



עוד במדריך

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

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