Thứ Bảy, 23 tháng 7, 2011

Apply Highlighting Keywords Found In Search Results in BlogEngine

Apply Highlighting Keywords Found In Search Results in BlogEngine: "

After reading the blog post: “Highlighting Keywords Found In Search Results”. I realize that I should apply this utility for my existing code2code.info blog, you also do it for you by following my below instruction:

Prerequisite:
- BlogEngine (BE) source code version 2.5
- Visual Studio 2010

Note:Because I’ve been using BlogEngine v2.5 with .net 4.0 so I have to use Visual Studio 2010 to customize my existing blog. But you also can do it with using Visual Studio 2008 if you are using older version of BE

Step 1: Open Util.cs in BlogEngine.Core and paste the code below (end of line to easy to tracking or maintain)

///<summary>
/// Wraps matched strings in HTML span elements styled with a background-color
///</summary>
///<param name="text"></param>
///<param name="keywords">Comma-separated list of strings to be highlighted</param>
///<param name="cssClass">The Css color to apply</param>
///<param name="fullMatch">false for returning all matches, true for whole word matches only</param>
///<returns>string</returns>
public static string HighlightKeyWords(this string text, string keywords, string cssClass, bool fullMatch)
{
if (text == String.Empty || keywords == String.Empty || cssClass == String.Empty)
return text;
var words = keywords.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
if (!fullMatch)
return words.Select(word => word.Trim()).Aggregate(text,
(current, pattern) =>
Regex.Replace(current,
pattern,
string.Format("<span style=\"background-color:{0}\">{1}</span>",
cssClass,
'$0'),
RegexOptions.IgnoreCase));
return words.Select(word => '\\b' + word.Trim() + '\\b')
.Aggregate(text, (current, pattern) =>
Regex.Replace(current,
pattern,
string.Format("<span style=\"background-color:{0}\">{1}</span>",
cssClass,
'$0'),
RegexOptions.IgnoreCase));
}



Press F5 to Build BlogEngine.Core project.

Step 2: Open search.aspx and add the code like below:

<asp:repeater runat='server' id="rep">
<ItemTemplate>
<div class="searchresult">
<a href='<%# Eval('RelativeLink') %>"><%# Eval('Title').ToString().HighlightKeyWords(Request.QueryString['q'], 'yellow', true)%></a>
<span class="text"><%# GetContent((string)Eval('Description'), (string)Eval('Content')).HighlightKeyWords(Request.QueryString['q'], 'yellow', true)%></span>
<span class='type' runat='server' id='type' />
<span class="url"><%# ShortenUrl((String)Eval('RelativeLink')) %></span>
</div>
</ItemTemplate>
</asp:repeater>




Note: The 2nd parameter is style sheet class name, you have to define it by your refer color.

Step 3: Testing and deployment.
I have apply the highlight for title and content if it matches. Then you will see the result output like screenshot below:





Happy BE-ing...

"

Chủ Nhật, 3 tháng 7, 2011

Sử dụng control Ext.Net GridPanel và phân trang với Entity Framework

Sử dụng control Ext.Net GridPanel và phân trang với Entity Framework: "

Gần đây Ext.Net vừa chính thức cho ra đời version 1.0 cho cả Community và Pro, với nhiều tính năng và các fix bugs đã được cải thiện, cũng giống như tất cả các bộ thư viện control khác. Và cũng giống như ASP.NET GridView control, Ext.Net cũng cung cấp control dữ liệu (tabular) được đặt tên là GridPanel.

Trong bài viết này mình sẽ hướng dẫn bà con, các sử dụng Ext.Net GridPanel để binding data từ CSDL sử dụng Entity Framework và phân trang.

Yêu cầu trước tiên:
Download và cài đặt:
- Download version mới nhất của Ext.NET tại: http://www.ext.net/download
- Hướng dẫn cài đặt: lập trình ext.net với visual studio 2010

Tạo 1 website ASP.NET C# (VB.NET tùy ý) và kéo control GridPanel vào sau đó set các thuộc tính như:
Height='400'
Title='Customer List'
AutoExpandColumn='Address'

Định nghĩa Store (data source) cho GridPanel, ở đây mình sẽ kết nối với CSDL Northwind và lấy danh sách Customers lên:

<%@ Page Language='C#' AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='_Default' %>



<%@ Register Assembly='Ext.Net' Namespace='Ext.Net' TagPrefix='ext' %>


<!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">


<title>Using Ext.Net GridPanel with Paging in Entity Framework</title>


</head>


<body>


<form id='form1' runat="server">


<div>


<ext:ResourceManager ID='ResourceManager1' runat='server' />


<ext:GridPanel ID='GridPanel1' runat='server' Height='400' Title='Customer List'


AutoExpandColumn="Address">


<Store>


<ext:Store ID='dsCustomers' runat='server' OnRefreshData='Store1_Refresh' RemoteSort="true">


<Proxy>


<ext:PageProxy />


</Proxy>


<Reader>


<ext:JsonReader IDProperty="CustomerID">


<Fields>


<ext:RecordField Name='CustomerID' SortDir='ASC' />


<ext:RecordField Name='CompanyName' />


<ext:RecordField Name='ContactName' />


<ext:RecordField Name='Address' />


<ext:RecordField Name='City' />


<ext:RecordField Name='Phone' />


<ext:RecordField Name='Fax' />


<ext:RecordField Name='Region' />


</Fields>


</ext:JsonReader>


</Reader>


<BaseParams>


<ext:Parameter Name='start' Value='0' Mode='Raw' />


<ext:Parameter Name='limit' Value='15' Mode='Raw' />


<ext:Parameter Name='dir' Value='ASC' />


<ext:Parameter Name='sort' Value='CustomerID' />


</BaseParams>


<SortInfo Field='CustomerID' Direction='ASC' />


</ext:Store>


</Store>


<ColumnModel ID='ColumnModel1' runat="server">


<Columns>


<ext:Column ColumnID='CustomerID' DataIndex='CustomerID' Header="ID">


</ext:Column>


<ext:Column ColumnID='CompanyName' DataIndex='CompanyName' Header='Company Name'


Width="250">


</ext:Column>


<ext:Column ColumnID='ContactName' DataIndex='ContactName' Header='Contact Name'


Width="150">


</ext:Column>


<ext:Column ColumnID='Address' DataIndex='Address' Header='Address' Width="150">


</ext:Column>


<ext:Column ColumnID='City' DataIndex='City' Header="City">


</ext:Column>


<ext:Column ColumnID='Phone' DataIndex='Phone' Header="Phone">


</ext:Column>


<ext:Column ColumnID='Fax' DataIndex='Fax' Header="Fax">


</ext:Column>


<ext:Column ColumnID='Region' DataIndex='Region' Header="Region">


</ext:Column>


</Columns>


</ColumnModel>


<BottomBar>


<ext:PagingToolbar ID='PagingToolbar1' runat='server' PageSize='15' />


</BottomBar>


</ext:GridPanel>


</div>


</form>


</body>


</html>

Giải thích:
Sự kiện OnRefreshData của Store xử lý mỗi lần data source của store được update (cách xử lý trong code behind).
Thuộc tính RemoteSort="true": Cho phép sắp xếp sử dụng server code.
IDProperty="CustomerID" của JsonReader: thiết lập trường khóa chính dùng trong mục đích insert, delete và update.
ext:Parameter : Các parameters được truyền về mỗi lần store được referesh.
ColumnModel: Định nghĩa các field được bind lên từ CSDL.
ext:PagingToolbar: Control phân trang build-in của Ext.Net.
......

C# code:

using System.Linq;


using Ext.Net;


using NorthwindModel;



public partial class _Default : System.Web.UI.Page


{


protected void Store1_Refresh(object sender, StoreRefreshDataEventArgs e)


{


int start = int.Parse(e.Parameters['start']);


int limit = int.Parse(e.Parameters['limit']);


string dir = e.Parameters['dir'];


string sort = e.Parameters['sort'];


using (NorthwindEntities entities = new NorthwindEntities())


{


var customers = entities.Customers.OrderBy(string.Concat('it.' + sort, ' ', dir));


e.Total = customers.ToList().Count;


dsCustomers.DataSource = customers.Skip(start).Take(limit).ToList();


dsCustomers.DataBind();


}


}


}



Press F5 và xem kết quả:





Note: Việc paging cho GridPanel cũng như các control support paging khác là rất quan trọng trong ứng dụng đòi hỏi sự khéo léo trong vấn đề tối ưu hóa tốc độ thực thi của ứng dụng, Ext.Net take care hầu hết các thiếu sót trong giao diện xây dựng sẳn của .NET, thế vấn đề còn lại của các bạn là feel, thì mới xây dựng được 1 ứng dụng chuyên nghiệp cho cả look and feel.

Hope this help!


ExtGirdDemo.rar (3.67 mb)

"