DCSIMG
Internet Explorer 8 Part 5 - Search Provider - שלמה גולדברג (הרב דוטנט)

שלמה גולדברג (הרב דוטנט)

מרצה בסלע ויועץ בעולם ה - net.

Internet Explorer 8 Part 5 - Search Provider

 

בפוסטים הקודמים כתבתי על 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"],
       [http://www.sela.co.il/syl/syllabus.aspx?CourseCode=50150, http://www.sela.co.il/syl/syllabus.aspx?CourseCode=wp1]]
 
 
השורה הראשונה זה מה שיוצג ברשימת התוצאות.
השורה השנייה זה תיאור של כל קורס.
והשורה השלישית היא להיכן לנווט.
 
יצרתי 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
 
 
מה שנחמד שצוות המכירות מרוצה עד לב השמיים. (ואני לא מקבל יותר מיילים בנוסח "מה הכתובת של הקורס שמדבר על.....")

תוכן התגובה

Shlomo כתב/ה:

עם ajax Control toolKit

כאן:

www.asp.net/.../AutoComplete.aspx

# September 4, 2009 4:55 PM

עמירם כתב/ה:

:)

זה כל הקטע .

ללא ajax Control toolKit

הייתי רוצה לדעת מה באמת קורה שמה , הקוד JS .

איך זה מוחזר בעצם? איך הוא יוצר מין dropdownlist עם כל ה suggestions .

מעניין .

# September 5, 2009 8:36 PM

Shlomo כתב/ה:

לא כל כך מסובך.

אתה יכול להוריד את הקוד שלהם.

אני מניח שזה div שמוגדר כ - position=absolute

ךיד תיבת הטקסט, או משהו כזה.

# September 5, 2009 9:54 PM

עמירם כתב/ה:

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

שמתי תיבת טקסט עם אירוע 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", "BLOCKED SCRIPTthis.blur();BLOCKED SCRIPTthis.focus();");

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

אבל.......

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

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

# September 6, 2009 12:05 AM

Shlomo כתב/ה:

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

או באממצעות ScriptManager כאן:

blogs.microsoft.co.il/.../scriptmanager.aspx

או באמצעות JavaScript שפונה לשרת, כאן:

blogs.microsoft.co.il/.../web-service-gt-json-gt-javascript.aspx

בהצלחה

# September 6, 2009 1:27 PM

עמירם כתב/ה:

דבר ראשון - תודה רבה!!

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

דבר שני - הצלחתי לגשת ל WEBSERVICE , הצלחתי לקבל את הנתונים.

עכשיו חוזרת השאלה (הראשונה) שלי.

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

איך אני מקשר את האובייקט שקיבלתי כרגע בJSON לLIST מתחת לתיבה שלי ?

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

# September 6, 2009 9:06 PM

Shlomo כתב/ה:

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

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

# September 6, 2009 9:33 PM

עמירם כתב/ה:

את זה הצלחתי לעשות

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

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

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

# September 6, 2009 10:25 PM

Shlomo כתב/ה:

# September 7, 2009 12:16 AM

שלמה גולדברג כתב/ה:

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

# September 8, 2009 3:36 PM
שלח תגובה

(שדה חובה)  

(שדה חובה)  

(אופציונלי)

(שדה חובה) 

Please add 7 and 7 and type the answer here:


Enter the numbers above: