(Sử dụng Control AJAX Rating vào GridView TemplateField trong Asp.net) – Để đánh giá một khách hàng ở một mức độ nào đó, thay vì viết mô tả người sử dụng mong muốn có một công cụ trực quan đó là sử dụng số hình ảnh sao. Khi nhìn vào số lượng sao người sử dụng có thể biết được ngay mức độ đánh giá của từng khách hàng. Bài viết dưới đây sẽ hướng dẫn các bạn cách nhúng Control AJAX Rating vào Gridview và có thể đánh giá trực tiếp ngay trên Gridview.
- B1: Tạo CSDL Customers trong SQL Server
- B2: Tạo Bảng Accounts có cấu trúc phía dưới - B1: Tạo CSDL Customers trong SQL Server
| STT | Tên trường | Kiểu trường | Ghi chú |
| 1 | AccountID | Int | Trường tự tăng |
| 2 | AccountCode | nvarchar(25) | |
| 3 | AccName | nvarchar(250) | |
| 4 | AccAddress | nvarchar(250) | |
| 5 | AccPhone | nvarchar(50) | |
| 6 | AccFAX | nvarchar(50) | |
| 7 | AccEmail | nvarchar(50) | |
| 8 | AccWebsite | nvarchar(150) | |
| 9 | Rating | nvarchar(150) | |
| 10 | AccDesc | nvarchar(1500) | |
| 11 | CreatedDate | datetime | |
| 12 | ModifiedDate | datetime |
- B3: Nhập dữ liệu cho bảng Accounts
- B4: Tạo các stored procedure trong SQL Server
USE[Customers]
GO
CREATE PROCEDURE [dbo].[Pro_Accounts_List]
@Keyword nvarchar(250),
@SortField nvarchar(50),
@SortType nvarchar(10)
AS
declare@strSQL nvarchar(1000)
declare @strWhere nvarchar(500)
declare @strOrder nvarchar (50)
set @strSQL= 'Select * from Accounts'
set @strWhere =' Where 1=1 '
if @Keyword<>''
set @strWhere= @strWhere +' And (AccountCode like N''%' +@Keyword+'%''
Or AccName like N''%' +@Keyword+'%'' Or AccAddress like N''%' +@Keyword+'%''
Or AccPhone like N''%' +@Keyword+'%'' Or AccFAX like N''%' +@Keyword+'%''
Or AccEmail like N''%' +@Keyword+'%'' Or AccWebsite like N''%' +@Keyword+'%'')'
if @SortField='CreatedDate'
Begin
set @strOrder =' Order by CreatedDate'
End
Else
Begin
set @strOrder =' Order by AccName'
End
set @strSQL=@strSQL+@strWhere+@strOrder
print @strSQL
exec sp_executesql @strSQL
Go
CREATE PROCEDURE [dbo].[Pro_Accounts_UpdateRating]
@ItemID int,
@Rating int
AS
UPDATE Accounts SET
Rating = @Rating
WHERE
AccountID = @ItemID
Bạn có thể tải về bảng cơ sở dữ liệu SQL bằng cách nhấn vào liên kết tải về dưới đây
- B5: Tạo Project trong Microsoft Visual Studio 2010
Trong Visual Studio tạo 1 Class có tên: Utility và nhập đoạn Code phía dưới cho Class này.
Imports System.Data.SqlClient
Imports System.Data
Namespace AJAXRatingControInGridView
Public Class SqlDataProvider
#Region "Membres Prives"
Shared _IsError As Boolean = False
Private _connectionString AsString
#End Region
#Region "Constructeurs"
Public Sub New()
Try
_connectionString = ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString
_IsError = False
Catch ex As Exception
_IsError = True
End Try
End Sub
#End Region
#Region "Proprietes"
Public ReadOnly Property ConnectionString() AsString
Get
Return _connectionString
End Get
End Property
#End Region
#Region "Functions"
Public FunctionFillTable(ByVal sql AsString) As DataTable
Try
Dim tb AsNew DataTable
Dim adap AsNew SqlDataAdapter(sql, _connectionString)
adap.Fill(tb)
Return tb
Catch ex As Exception
Return Nothing
End Try
End Function
Public FunctionFillTable(ByVal ProcName As String, ByVal ParamArrayPara() As ObjectPara) As DataTable
Try
Dim tb AsNew DataTable
Dim adap AsNew SqlDataAdapter(ProcName, _connectionString)
adap.SelectCommand.CommandType = CommandType.StoredProcedure
If NotPara Is NothingThen
For Eachp As ObjectParaIn Para
adap.SelectCommand.Parameters.Add(New SqlParameter(p.Name, p.Value))
Next
End If
adap.Fill(tb)
Return tb
Catch ex As Exception
Return Nothing
End Try
End Function
Public FunctionRunSQL(ByVal ProcName AsString, ByVal ParamArray Para() As ObjectPara) As Object
Try
Dim _cnn AsNew SqlConnection(_connectionString)
_cnn.Open()
Dim cmd AsNew SqlCommand(ProcName, _cnn)
cmd.CommandType = CommandType.StoredProcedure
For Eachp As ObjectParaIn Para
cmd.Parameters.Add(New SqlParameter(p.Name, p.Value))
Next
Return cmd.ExecuteScalar
Catch ex As Exception
Return Nothing
End Try
End Function
#End Region
End Class
Public Class ObjectPara
Dim _name As String
Dim _Value As Object
Sub New(ByVal Pname As String, ByVal PValue As Object)
_name = Pname
_Value = PValue
End Sub
Public PropertyName() As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property
Public PropertyValue() As Object
Get
Return _Value
End Get
Set(ByVal value As Object)
_Value = value
End Set
End Property
End Class
Chú ý: Thuộc tính SiteSqlServer chính là chuỗi Connect với SQL Server trong file Web.Config
- B6: Download thư viện AjaxControlToolkit tại địa chỉ: Download
- B7: Giải nén AjaxControlToolkit.Binary.NET4, và References Ajaxcontroltoolkit.dll trong thư mục vừa giải nén vào Project.
- B8: Download các file Ảnh tại đây và Copy các file Star.gif, WaitingStar.gif, FilledStar.gif vào thư mục Images trong thư mục Styles
- B9: Mở file Site.css nhập thêm đoạn Code phía dưới
.Star
{
background-image: url(images/Star.gif);
height: 17px;
width: 17px;
}
.WaitingStar
{
background-image: url(images/WaitingStar.gif);
height: 17px;
width: 17px;
}
.FilledStar
{
background-image: url(images/FilledStar.gif);
height: 17px;
width: 17px;
}
- B10: Mở file Default.aspxdưới dạng HTML và bổ xung Control
<%@ PageTitle="AJAX Rating Control Inside GridView in ASP.Net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" EnableEventValidation= "false" CodeBehind="Default.aspx.vb"Inherits="AJAXRatingControInGridView._Default"%>
<%@ RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<h1>
AJAX Rating Control Inside GridView in ASP.Net
</h1>
<br />
<asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2"cellspacing="3"width="100%">
<tr>
<td>
</td>
<tdalign="right">
<asp:Label ID="plKeyword" runat="server" Text="Keyword"></asp:Label>
<asp:TextBox ID="txtSearch" CssClass="form-control" ToolTip="Enter Keyword" runat="server" width="200px"></asp:TextBox>
<asp:ImageButton ID="cmdQuickSearch" runat="server" causesvalidation="false" imageurl="~/images/icon_search.gif"></asp:ImageButton>
</td>
</tr>
<trid="trMessage"runat="server"visible="false">
<tdcolspan="2">
<asp:Label ID="lblMessage" runat="server" Text="No Data"></asp:Label>
</td>
</tr>
<tr>
<tdcolspan="2">
<asp:GridView ID="grvObject" runat="server" AllowPaging="true" PageSize="8"
CssClass="GridStyle"BorderColor="#cbcbcb"BorderStyle="solid"
BorderWidth="1"AutoGenerateColumns="false"DataKeyNames="AccountID"width="100%">
<AlternatingRowStyleCssClass="GridStyle_AltRowStyle"/>
<HeaderStyle CssClass="GridStyle_HeaderStyle"/>
<RowStyle CssClass="GridStyle_RowStyle"/>
<pagerstyle cssclass="GridStyle_pagination"/>
<Columns>
<asp:TemplateField HeaderText = "Number">
<ItemStyle HorizontalAlign="Center"Width="2%"></ItemStyle>
<ItemTemplate>
<asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="10%"DataField="AccountCode"HeaderText="AccountCode"/>
<asp:BoundField ItemStyle-Width="15%"DataField="AccName"HeaderText="AccountName"/>
<asp:TemplateField HeaderText="Ratings">
<ItemStyle HorizontalAlign="Center"Width="10%"></ItemStyle>
<ItemTemplate>
<cc1:Rating ID="ucRating"AutoPostBack="true"OnChanged="OnRatingChanged"runat="server"
StarCssClass="Star"WaitingStarCssClass="WaitingStar"EmptyStarCssClass="Star"FilledStarCssClass="FilledStar">
</cc1:Rating>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="10%"DataField="AccPhone"HeaderText="Phone"/>
<asp:BoundField ItemStyle-Width="10%"DataField="AccFAX"HeaderText="FAX"/>
<asp:BoundField ItemStyle-Width="15%"DataField="AccEmail"HeaderText="Email"/>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
- B11: Viết Code cho file Default.aspx
C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Diagnostics;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using AjaxControlToolkit;
namespace AJAXRatingControInGridView
{
public partial class _Default : System.Web.UI.Page
{
#region"Private Methods"
private voidUpdateRating(int ItemID, int iRating)
{
SqlDataProvider objSQL = newSqlDataProvider();
//Update Rating
objSQL.RunSQL("Pro_Accounts_UpdateRating", new ObjectPara("@ItemID", ItemID), new ObjectPara("@Rating", iRating));
}
#endregion
#region"Bind Data"
private voidBindAccount()
{
DataTable objBind = newDataTable();
objBind = BindData();
if (objBind != null)
{
if (objBind.Rows.Count > 0)
{
grvObject.DataSource = objBind;
grvObject.DataBind();
trMessage.Visible = false;
grvObject.Visible = true;
}
else
{
trMessage.Visible = true;
grvObject.Visible = false;
}
updatePanel.Update();
}
}
private DataTableBindData()
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = objSQL.FillTable("Pro_Accounts_List", new ObjectPara("@Keyword", txtSearch.Text.Trim()), new ObjectPara("@SortField", "CreatedDate"), new ObjectPara("@SortType", "DESC"));
return objBind;
}
#endregion
#region"GridView Methods"
protected voidgrvObject_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int iRating = -1;
if (!object.ReferenceEquals(DataBinder.Eval(e.Row.DataItem, "Rating"), System.DBNull.Value))
{
iRating =Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "Rating"));
}
Rating ucRating = (Rating)e.Row.FindControl("ucRating");
if (ucRating != null)
{
if (iRating != -1 & iRating != 0)
{
ucRating.CurrentRating = iRating;
}
else
{
ucRating.CurrentRating = 0;
}
}
}
}
protected voidgrvObject_PageIndexChanging(object sender, System.Web.UI.WebControls.GridViewPageEventArgse)
{
grvObject.PageIndex = e.NewPageIndex;
BindAccount();
}
#endregion
#region"Rating"
protected voidOnRatingChanged(object sender, RatingEventArgs e)
{
int iRating =Convert.ToInt32(e.Value);
int rowIndex = ((sender asRating).NamingContainer as GridViewRow).RowIndex;
int ItemID = Convert.ToInt32(grvObject.DataKeys[rowIndex].Value);
if (ItemID != -1 & iRating != -1)
{
//Update Rating
UpdateRating(ItemID, iRating);
BindAccount();
}
}
#endregion
#region"Event Handles"
protected voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
//Default Submit Button
Page.Form.DefaultButton = cmdQuickSearch.UniqueID;
BindAccount();
}
}
catch
{
}
}
protected voidcmdQuickSearch_Click(object sender, System.EventArgs e)
{
BindAccount();
}
#endregion
}
}
VB.NET Code
Imports AjaxControlToolkit
Namespace AJAXRatingControInGridView
Public Class _Default
Inherits System.Web.UI.Page
#Region "Private Methods"
Private SubUpdateRating(ByVal ItemID As Integer, ByVal iRating As Integer)
Dim objSQL As New SqlDataProvider
'Update Rating
objSQL.RunSQL("Pro_Accounts_UpdateRating", New ObjectPara("@ItemID", ItemID), _
New ObjectPara("@Rating", iRating))
End Sub
#End Region
#Region "Bind Data"
Private SubBindAccount()
Dim objBind As New DataTable
objBind = BindData()
If Not objBind Is Nothing Then
If objBind.Rows.Count > 0 Then
grvObject.DataSource = objBind
grvObject.DataBind()
trMessage.Visible = False
grvObject.Visible = True
Else
trMessage.Visible = True
grvObject.Visible = False
End If
updatePanel.Update()
End If
End Sub
Private FunctionBindData() As DataTable
Dim objSQL As New SqlDataProvider
Dim objBind As DataTable = objSQL.FillTable("Pro_Accounts_List", New ObjectPara("@Keyword", txtSearch.Text.Trim), _
New ObjectPara("@SortField", "CreatedDate"), _
New ObjectPara("@SortType", "DESC"))
Return objBind
End Function
#End Region
#Region "GridView Methods"
Private SubgrvObject_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) HandlesgrvObject.RowDataBound
If (e.Row.RowType = DataControlRowType.DataRow) Then
Dim iRating AsInteger = -1
If Not DataBinder.Eval(e.Row.DataItem, "Rating") IsSystem.DBNull.Value Then
iRating = DataBinder.Eval(e.Row.DataItem, "Rating")
End If
Dim ucRating AsRating = CType(e.Row.FindControl("ucRating"), Rating)
If ucRating IsNotNothing Then
If iRating <> -1 And iRating <> 0 Then
ucRating.CurrentRating = iRating
Else
ucRating.CurrentRating = 0
End If
End If
End If
End Sub
Private SubgrvObject_PageIndexChanging(ByVal sender As Object, ByVal e AsSystem.Web.UI.WebControls.GridViewPageEventArgs) Handles grvObject.PageIndexChanging
grvObject.PageIndex = e.NewPageIndex
BindAccount()
End Sub
#End Region
#Region "Rating"
Protected SubOnRatingChanged(ByVal sender As Object, ByVal e As RatingEventArgs)
Dim iRating As Integer = e.Value
Dim rowIndex As Integer = TryCast(TryCast(sender, Rating).NamingContainer, GridViewRow).RowIndex
Dim ItemID As Integer = Convert.ToInt32(grvObject.DataKeys(rowIndex).Value)
If ItemID <> -1 AndiRating <> -1 Then
'Update Rating
UpdateRating(ItemID, iRating)
BindAccount()
End If
End Sub
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
Try
If Page.IsPostBack = False Then
'Default Submit Button
Page.Form.DefaultButton = cmdQuickSearch.UniqueID
BindAccount()
End If
Catch ex As Exception
End Try
End Sub
Private SubcmdQuickSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) HandlescmdQuickSearch.Click
BindAccount()
End Sub
#End Region
End Class
Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment