Internet Explorer 8 Part 5 – Search Provider

26 באוגוסט 2009

10 תגובות

 


בפוסטים הקודמים כתבתי על Web Slice (עדיין נשאר לי לדבר על Authenticated Web Slices)

 

כעת אני רוצה לדבר על Search Provider.

 

כולנו מכירים את התיבה מצד ימין למעלה בחלון הדפדפן.

Search Google

 

 

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

 

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

 

 

כאחראי על צוות התשתיות בסלע ביקשו ממני לייצר ספק חיפוש לסילבוסים שלנו.

יש לנו את האתר http://www.sela.co.il/syl/syllabus.aspx שמקבל פרמטר בשם CourseCode את הקוד לסילבוס המבוקש. לדוגמא: ה – URL הבא: http://www.sela.co.il/syl/syllabus.aspx?CourseCode=50150 יפנה אותנו לסילבוס של C# 3.0.

 

מה שהחבר'ה בסלע רצו שאני אייצר ספק חיפוש שהם יוכלו לכתוב את קוד הקורס ולחיצת Enter תוביל אותם לקורס המיועד. בנוסף הם אמרו לי שלא תמיד הם זוכרים את הקודים של כל הקורסים (יש מאות) ולכן הם רצו שזה יתנהג כמו גוגל, כלומר ברגע שמתחילים לכתוב משהו, זה מביא את ההצעות הכי קרובות (זה אחד מהתכונות החדשות של IE8 – תמיכה ב – suggestions).

 

Google Suggestion

 

 

 

אז איך עושים את זה ?

 

אנחנו צריכים לייצר שירות כלשהו שמחזיר את התוצאות לחיפוש הספציפי, התוצאות יכולות לחזור במבנה של XML או של JSON, כמובן ש – JSON הוא יותר קטן ולכן יותר יעיל, אבל במבנה XNL אנחנו יכולים לקבל יותר תכונות (כמו תמונה לכל תוצאה – ועוד).

 

אני בחרתי במבנה JSON, נניח שאני מקבל את המילה Introduction – אני מעוניין לחפש בבסיס הנתונים שלנו את כל הקורסים שבכותרת שלהם יש את המילה Introduction. בתוצאה אני אמור להחזיר מחרוזת במבנה הבא:

 

 

["Introduction",

       ["50150", "WP1"],

       ["Introduction to C# 3.0", Introduction to Web"],


 

 

השורה הראשונה זה מה שיוצג ברשימת התוצאות.

השורה השנייה זה תיאור של כל קורס.

והשורה השלישית היא להיכן לנווט.

 

יצרתי Handle (קובץ עם סיומת ashx) וכתבתי קוד דומה לזה:



public void ProcessRequest(HttpContext context)


{


    context.Response.ContentType = "text/plain";


    context.Response.Write(Syllabuses(context.Request["searchTerms"]));


}


 


 




private string Syllabuses(string searchTerms)


{


    if (HttpContext.Current.Cache[searchTerms] == null)


    {


        SqlCommand cmd = GetCommand(searchTerms);


        StringBuilder fullBuilder = Execute(searchTerms, cmd);


        SaveInCache(searchTerms, fullBuilder);


    }


 


 


    return HttpContext.Current.Cache[searchTerms].ToString();


}


 

כדי לחסוך בפניות לבסיס הנתונים אני שומר במטמון תוצאות של חיפושים קודמים.

אני בודק האם התוצאה קיימת במטמון, במידה ולא –

אני יוצר את ה – Command –

מפעיל אותו ומקבל תוצאה שהיא המחרוזת במבנה מתאים –

שומר את התוצאה במטמון –

ומחזיר את התוצאה.

 

 

כעת כתבתי דף html שנראה כך:

 



<a href="#" onclick="window.external.AddSearchProvider('http://www.example.co.il/XMLFile1.xml')">


    Add Syllabus Search Provider</a>


 

 

קובץ ה – xml נראה כך:

 



<?xml version="1.0" encoding="utf-8" ?>


<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"


                      xmlns:ie="http://schemas.microsoft.com/Search/2008/">


  <ShortName>Syllabus Search</ShortName>


  <Url type="text/html"


      template="http://www.sela.co.il/syl/syllabus.aspx?CourseCode={searchTerms}&amp;source=IE"/>


  <Url type="application/x-suggestions+json"


      template="http://www.example.co.il/Handler1.ashx?searchTerms={searchTerms}"/>


</OpenSearchDescription>


 

ב – URL הראשון אני נותן את הכתובת למי שכותב שם של סילבוס.

בשני את הכתובת ל – handler שלי.

 

 מי שירצה (מצוות המכירות) להוסיף את ספק החיפוש שיצרתי יגלוש לדף שיש בו את הלינק, ילחץ עליו, ויקבל את החלון הבא:

 

 Add provider

ועכשיו זה נראה כך:

 

 

 

Sela Provider

 

 

מה שנחמד שצוות המכירות מרוצה עד לב השמיים. (ואני לא מקבל יותר מיילים בנוסח "מה הכתובת של הקורס שמדבר על…..")

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

10 תגובות

  1. עמירם4 בספטמבר 2009 ב 15:45

    יפה מאוד!

    השאלה היא איך עושים זאת עם תיבת טקסט ושליפה מה DB ללא שום הרחבה מוכנה מראש שmicrosoft כתבו .

    הצלחתי לעשות משהו בסגנון , תוך כדי שהמשתמש מקליד בתיבת טקסט, עם הארועים onblur ו – ontextchanged של Javascript , יש ListBox בצד שמקבל את כל ה Seggustions מה DataBase עם שאילתה בצד השרת .

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

    הגב
  2. עמירם5 בספטמבר 2009 ב 20:36

    🙂
    זה כל הקטע .
    ללא ajax Control toolKit

    הייתי רוצה לדעת מה באמת קורה שמה , הקוד JS .
    איך זה מוחזר בעצם? איך הוא יוצר מין dropdownlist עם כל ה suggestions .

    מעניין .

    הגב
  3. Shlomo5 בספטמבר 2009 ב 21:54

    לא כל כך מסובך.
    אתה יכול להוריד את הקוד שלהם.

    אני מניח שזה div שמוגדר כ – position=absolute
    ךיד תיבת הטקסט, או משהו כזה.

    הגב
  4. עמירם6 בספטמבר 2009 ב 0:05

    איפה אני טועה?

    שמתי תיבת טקסט עם אירוע textchanged, מתחתה מיקמתי ListBox בתוך DIV עם position=absolute

    יצרתי מתודה בצד השרת

    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
    DataTable dt = GetClients(TextBox1.Text);
    ListBox1.DataSource = dt;
    ListBox1.DataBind();
    TextBox1.Focus();

    }

    כמו כן ב PAGE_LOAD הוספתי את הקוד הבא כדי שתוך כדי הקלדה תיהיה פניה לצד השרת
    TextBox1.Attributes.Add("OnKeyUp", "javascript:this.blur();javascript:this.focus();");

    אני מצליח לקבל כל פעם שאני מקליד אות את ה LISTBOX שלי עם כל התוצאות הרלוונטיות מה DATABASE
    אבל…….
    אני לא מצליח ליישם שאני אוכל ממש לרדת עם החצים במקלדת אל ה LISTBOX ולקבל משם תוצאה לחיפוש .

    איפה הבעיה בקוד? זה סוג של "קומבינה" הייתי אומר… אבל עדיין אני מעדיף לא להשתמש במה שמייקרוסופט בנו, אלא ליצור אחד משלי .

    הגב
  5. Shlomo6 בספטמבר 2009 ב 13:27

    אתה אמור להשתמש עם ajax

    או באממצעות ScriptManager כאן:
    http://blogs.microsoft.co.il/blogs/shlomo/archive/2009/05/03/scriptmanager.aspx

    או באמצעות JavaScript שפונה לשרת, כאן:
    http://blogs.microsoft.co.il/blogs/shlomo/archive/2009/03/06/web-service-gt-json-gt-javascript.aspx

    בהצלחה

    הגב
  6. עמירם6 בספטמבר 2009 ב 21:06

    דבר ראשון – תודה רבה!!
    סוף סוף באמת השתמשתי ב AJAX אמיתי (ולא איזה script manager ) , תמיד רציתי לכתוב ,אבל לא מצאתי סיבה.

    דבר שני – הצלחתי לגשת ל WEBSERVICE , הצלחתי לקבל את הנתונים.
    עכשיו חוזרת השאלה (הראשונה) שלי.
    כיצד אני גורם לזה להופיע בתיבת טקסט מתחת לתיבה שלי?
    איך אני מקשר את האובייקט שקיבלתי כרגע בJSON לLIST מתחת לתיבה שלי ?

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

    הגב
  7. Shlomo6 בספטמבר 2009 ב 21:33

    אתה לא חופר, אני תמיד שמח לעזור.

    אני מניח שאתה אמור להירשם לאירוע onkeypress ולהפעיל את פונקציית ה – JS כדי להביא נתונים אליך.

    הגב
  8. עמירם6 בספטמבר 2009 ב 22:25

    את זה הצלחתי לעשות
    מה שלא הצלחתי לעשות זה ליצור תיבה שנוצרת מתחת לתיבת טקסט שלי.
    שכאשר אין חיפוש התיבה לא מופיעה וכאשר יש חיפוש התיבה מופיעה מתחת לתיבת הטקסט

    את התוצאות יש לי, עכשיו איך אני מכניס אותם לתוך תיבה?

    הגב