پیشنیازها:
چگونه با استفاده از لوسین مطالب را ایندکس کنیم؟
چگونه از افزونه jQuery Auto-Complete استفاده کنیم؟
نحوه استفاده صحیح از لوسین در ASP.NET
اگر به جستجوی سایت دقت کرده باشید، قابلیت ارائه پیشنهاداتی به کاربر توسط یک Auto-Complete به آن اضافه شده‌است. در مطلب جاری به بررسی این مورد به همراه دو مثال Web forms و MVC پرداخته خواهد شد.
قسمت عمده مطلب جاری با پیشنیازهای یاد شده فوق یکی است. در اینجا فقط به ذکر تفاوت‌ها بسنده خواهد شد.
الف) دریافت لوسین
از طریق
NuGet آخرین نگارش را دریافت و به پروژه خود اضافه کنید. همچنین Lucene.NET Contrib را نیز به همین نحو دریافت نمائید.
ب) ایجاد ایندکس
کدهای این قسمت با مطلب برجسته سازی قسمت‌های جستجو شده، یکی است:
using System.Collections.Generic;
using System.IO;
using Lucene.Net.Analysis.Standard;
using Lucene.Net.Documents;
using Lucene.Net.Index;
using Lucene.Net.Store;
using LuceneSearch.Core.Model;
using LuceneSearch.Core.Utils;
namespace LuceneSearch.Core
{
public static class CreateIndex
{
static readonly Lucene.Net.Util.Version _version = Lucene.Net.Util.Version.LUCENE_30;
public static Document MapPostToDocument(Post post)
{
var postDocument = new Document();
postDocument.Add(new Field("Id", post.Id.ToString(), Field.Store.YES, Field.Index.NOT_ANALYZED));
var titleField = new Field("Title", post.Title, Field.Store.YES, Field.Index.ANALYZED, Field.TermVector.WITH_POSITIONS_OFFSETS);
titleField.Boost = 3;
postDocument.Add(titleField);
postDocument.Add(new Field("Body", post.Body.RemoveHtmlTags(), Field.Store.YES, Field.Index.ANALYZED, Field.TermVector.WITH_POSITIONS_OFFSETS));
return postDocument;
}
public static void CreateFullTextIndex(IEnumerable<Post> dataList, string path)
{
var directory = FSDirectory.Open(new DirectoryInfo(path));
var analyzer = new StandardAnalyzer(_version);
using (var writer = new IndexWriter(directory, analyzer, create: true, mfl: IndexWriter.MaxFieldLength.UNLIMITED))
{
foreach (var post in dataList)
{
writer.AddDocument(MapPostToDocument(post));
}
writer.Optimize();
writer.Commit();
writer.Close();
directory.Close();
}
}
}
}
تنها تفاوت آن اضافه شدن titleField.Boost = 3 میباشد. توسط Boost به لوسین خواهیم گفت که اهمیت عبارات ذکر شده در عناوین مطالب، بیشتر است از اهمیت متون آن‌ها.
ج) تهیه قسمت منبع داده Auto-Complete
namespace LuceneSearch.Core.Model
{
public class SearchResult
{
public int Id { set; get; }
public string Title { set; get; }
}
}
using System.Collections.Generic;
using System.IO;
using Lucene.Net.Index;
using Lucene.Net.Search;
using Lucene.Net.Store;
using LuceneSearch.Core.Model;
using LuceneSearch.Core.Utils;
namespace LuceneSearch.Core
{
public static class AutoComplete
{
private static IndexSearcher _searcher;
/// <summary>
/// Get terms starting with the given prefix
/// </summary>
/// <param name="prefix"></param>
/// <param name="maxItems"></param>
/// <returns></returns>
public static IList<SearchResult> GetTermsScored(string indexPath, string prefix, int maxItems = 10)
{
if (_searcher == null)
_searcher = new IndexSearcher(FSDirectory.Open(new DirectoryInfo(indexPath)), true);
var resultsList = new List<SearchResult>();
if (string.IsNullOrWhiteSpace(prefix))
return resultsList;
prefix = prefix.ApplyCorrectYeKe();
var results = _searcher.Search(new PrefixQuery(new Term("Title", prefix)), null, maxItems);
if (results.TotalHits == 0)
{
results = _searcher.Search(new PrefixQuery(new Term("Body", prefix)), null, maxItems);
}
foreach (var doc in results.ScoreDocs)
{
resultsList.Add(new SearchResult
{
Title = _searcher.Doc(doc.Doc).Get("Title"),
Id = int.Parse(_searcher.Doc(doc.Doc).Get("Id"))
});
}
return resultsList;
}
}
}
توضیحات:
برای نمایش Auto-Complete نیاز به منبع داده داریم که نحوه ایجاد آن‌را در کدهای فوق ملاحظه می‌کنید. در اینجا توسط جستجوی سریع لوسین و امکانات PrefixQuery آن، به تعدادی مشخص (maxItems)، رکوردهای یافت شده را بازگشت خواهیم داد. خروجی حاصل لیستی است از SearchResultها شامل عنوان مطلب و Id آن. عنوان را به کاربر نمایش خواهیم داد؛ از Id برای هدایت او به مطلبی مشخص استفاده خواهیم کرد.
د) نمایش Auto-Complete در ASP.NET MVC
using System.Text;
using System.Web.Mvc;
using LuceneSearch.Core;
using System.Web;
namespace LuceneSearch.Controllers
{
public class HomeController : Controller
{
static string _indexPath = HttpRuntime.AppDomainAppPath + @"App_Data\idx";
public ActionResult Index(int? id)
{
if (id.HasValue)
{
//todo: do something
}
return View(); //Show the page
}
public virtual ActionResult ScoredTerms(string q)
{
if (string.IsNullOrWhiteSpace(q))
return Content(string.Empty);
var result = new StringBuilder();
var items = AutoComplete.GetTermsScored(_indexPath, q);
foreach (var item in items)
{
var postUrl = this.Url.Action(actionName: "Index", controllerName: "Home", routeValues: new { id = item.Id }, protocol: "http");
result.AppendLine(item.Title + "|" + postUrl);
}
return Content(result.ToString());
}
}
}
@{
ViewBag.Title = "جستجو";
var scoredTermsUrl = Url.Action(actionName: "ScoredTerms", controllerName: "Home");
var bulletImage = Url.Content("~/Content/Images/bullet_shape.png");
}
<h2>
جستجو</h2>
<div align="center">
@Html.TextBox("term", "", htmlAttributes: new { dir = "ltr" })
<br />
جهت آزمایش lu را وارد نمائید
</div>
@section scripts
{
<script type="text/javascript">
EnableSearchAutocomplete('@scoredTermsUrl', '@bulletImage');
</script>
}
function EnableSearchAutocomplete(url, img) {
var formatItem = function (row) {
if (!row) return "";
return "<img src='" + img + "' /> " + row[0];
}
$(document).ready(function () {
$("#term").autocomplete(url, {
dir: 'rtl', minChars: 2, delay: 5,
mustMatch: false, max: 20, autoFill: false,
matchContains: false, scroll: false, width: 300,
formatItem: formatItem
}).result(function (evt, row, formatted) {
if (!row) return;
window.location = row[1];
});
});
}
توضیحات:
- ابتدا ارجاعاتی را به jQuery، افزونه Auto-Complete و اسکریپت سفارشی تهیه شده، در فایل layout پروژه تعریف خواهیم کرد.
در اینجا سه قسمت را مشاهده می‌کنید: کدهای کنترلر، View متناظر و اسکریپتی که Auto-Complete را فعال خواهد ساخت.
- قسمت مهم کدهای کنترلر، دو سطر زیر هستند:
result.AppendLine(item.Title + "|" + postUrl);
return Content(result.ToString());
مطابق نیاز افزونه انتخاب شده در مثال جاری، فرمت خروجی مدنظر باید شامل سطرهایی حاوی متن قابل نمایش به همراه یک Id (یا در اینجا یک آدرس مشخص) باشد. البته ذکر این Id اختیاری بوده و در اینجا جهت تکمیل بحث ارائه شده است.
return Content هم سبب بازگشت این اطلاعات به افزونه خواهد شد.
- کدهای View متناظر بسیار ساده هستند. تنها نام TextBox تعریف شده مهم میباشد که در متد جاوا اسکریپتی EnableSearchAutocomplete استفاده شده است. به علاوه، نحوه مقدار دهی آدرس دسترسی به اکشن متد ScoredTerms نیز مهم میباشد.
- در متد EnableSearchAutocomplete نحوه فراخوانی افزونه autocomplete را ملاحظه می‌کنید.
جهت آن، به راست به چپ تنظیم شده است. با 2 کاراکتر ورودی فعال خواهد شد با وقفه‌ای کوتاه. نیازی نیست تا انتخاب کاربر از لیست ظاهر شده حتما با عبارت جستجو شده صد در صد یکی باشد. حداکثر 20 آیتم در لیست ظاهر خواهند شد. اسکرول بار لیست را حذف کرده‌ایم. عرض آن به 300 تنظیم شده است و نحوه فرمت دهی نمایشی آن‌را نیز ملاحظه می‌کنید. برای این منظور از متد formatItem استفاده شده است. آرایه row در اینجا در برگیرنده اعضای Title و Id ارسالی به افزونه است. اندیس صفر آن به عنوان دریافتی اشاره می‌کند.
همچنین نحوه نشان دادن عکس العمل به عنصر انتخابی را هم ملاحظه می‌کنید (در متد result مقدار دهی شده). window.location را به عنصر دوم آرایه row هدایت خواهیم کرد. این عنصر دوم مطابق کدهای اکشن متد تهیه شده، به آدرس یک صفحه اشاره می‌کند.
ه) نمایش Auto-Complete در ASP.NET WebForms
قسمت عمده مطالب فوق با وب فرم‌ها نیز یکی است. خصوصا توضیحات مرتبط با متد EnableSearchAutocomplete ذکر شده.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LuceneSearch.WebForms.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>جستجو</title>
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="Scripts/custom.js" type="text/javascript"></script>
</head>
<body dir="rtl">
<h2>
جستجو</h2>
<form id="form1" runat="server">
<div align="center">
<asp:TextBox runat="server" dir="ltr" ID="term"></asp:TextBox>
<br />
جهت آزمایش lu را وارد نمائید
</div>
</form>
<script type="text/javascript">
EnableSearchAutocomplete('Search.ashx', 'Content/Images/bullet_shape.png');
</script>
</body>
</html>
using System.Text;
using System.Web;
using LuceneSearch.Core;
namespace LuceneSearch.WebForms
{
public class Search : IHttpHandler
{
static string _indexPath = HttpRuntime.AppDomainAppPath + @"App_Data\idx";
public void ProcessRequest(HttpContext context)
{
string q = context.Request.QueryString["q"];
if (string.IsNullOrWhiteSpace(q))
{
context.Response.Write(string.Empty);
context.Response.End();
}
var result = new StringBuilder();
var items = AutoComplete.GetTermsScored(_indexPath, q);
foreach (var item in items)
{
var postUrl = "Default.aspx?id=" + item.Id;
result.AppendLine(item.Title + "|" + postUrl);
}
context.Response.ContentType = "text/plain";
context.Response.Write(result.ToString());
context.Response.End();
}
public bool IsReusable
{ get { return false; } }
}
}
در اینجا بجای Controller از یک Generic handler استفاده شده است (Search.ashx).
result.AppendLine(item.Title + "|" + postUrl);
context.Response.Write(result.ToString());
در آن، عنوان مطالب یافت شده به همراه یک آدرس مشخص، تهیه و در Response نوشته خواهند شد.
کدهای کامل مثال فوق را از اینجا می‌توانید دریافت کنید:
همچنین باید دقت داشت که پروژه MVC آن از نوع MVC4 است (VS2010) و فرض براین میباشد که IIS Express 7.5 را نیز پیشتر نصب کرده‌اید.
کلمه عبور فایل: dotnettips91
تا اینجای کار روال معمول تعاریف سرویس در انگولار بوده است. اما قصد داریم سرویس جدیدی را ایجاد نمایم تا خروجی سرویس قبلی را اندکی تغییر دهد. به جای اینکه سرویس قبلی را تغییر دهیم یا بدتر از آن سرویس جدیدی بسازیم و کدهای قبلی را در آن کپی کنیم کافیست به صورت زیر عمل نماییم:
