mojoportal学习——文章翻译之SmartCombo

翻译的不好 大家见谅

SmartCombo

在web开发时，我们常常会遇到这样的问题：从一个长列表中选则某项。如果你用一个

下拉菜单，那么从成百上千的列中选择，是很麻烦的。SmartCombo控件就是用来解决这个问题的。

mojoPortal中已经包含了这个控件，如果你想在其他的项目中使用，那么可以从NOvellForge上下载，

地址是：...

在mojoPortal中我们使用这个控件的场景是，当用户查找某用户时，依据用户的输入，返回5-10条相关的数据，

用户可以选择某条数据，返回数据是即时的。

下面是在mojoportal模块参数配置页面使用SmartCombo控件的页面。

要使用这个控件，首先需要把mojoPortal.web.controls.dll文件放入你应用程序的Bin文件夹中，然后设定引用。

然后在你的web.config文件中的system.web页面部分，添加一个控件声明如下：

<pages>
<controls>
<add tagPrefix="mp" namespace="mojoPortal.Web.Controls" assembly="mojoPortal.Web.Controls"/>
</controls>
</pages>

下面是添加SmartCombo控件的页面代码：

<mp:SmartCombo ID="scUser" runat="server"
DataUrl="../Services/UserDropDownXml.aspx?query="
ShowValueField="True"
ValueCssClass="TextLabel"
ValueColumns="5"
ValueLabelText="UserID:"
ValueLabelCssClass="txtmedblod"
ButtonImageUrl="../Data/SiteImages/DownArrow.gif"
ScriptDirectory="~/ClientScript"
Columns="45"
MaxLength="50"> </mp:SmartCombo>

DataUrl映射到一个服务页面，这个服务页面以用户具体的输入为参数。

ShowValueField 如果设置为True,那么显示选择的项的值.举个例子，如果表单中的列表是

UserID,UserName是UserID的值，如果设置为true,那么文本框中显示的是UserName.

很多情况下，设置为false.

另外的一些参数需要根据具体情况设置，你需要指定javascript文件在ScriptDirectory属性上。

SmartCombo控件需要以下js文件

sarissa.js
sarissa-ieemu-xpath.js
SmartCombo.js

Sarissa文件来自开源的Sarissa,简单的说，sarissa给你一个公用的api来使用 Ajax xmlHttpRequest 而无需关心浏览器类型。

使用这个控件，你必须写你自己的服务页，使之可以从数据源处获得xml文件。
你的xml文件必须同以下代码有相同的格式,V 代表值，T代表文本.

写这个页面是很简单的，正如你看到的

<?xml version="1.0" encoding="utf-8"?>
<data>
<r><v>1</v><t>user1@foo.com</t></tr>
<r><v>1</v><t>user2@foo.com</t></tr>
<r><v>1</v><t>user3@foo.com</t></tr>
<r><v>1</v><t>user4@foo.com</t></tr>
<r><v>1</v><t>user5@foo.com</t></tr>
</data>

首先你需要一个sql查询语句或存储过程,在我的例子中我希望依据用户输入的用户名或邮件地址来返回所需要头几行数据。

Create Procedure mp_Users_SmartDropDown
@SiteID    int,
@Query   nvarchar(50),
@RowsToGet   int

as

set rowcount @RowsToGet
selct u1.UsreID,u1.[Name] as SiteUser
Form  mp_Users ul
where  u1.SiteID=@SiteID and u1.[Name] like  @Query +'%'
union

select  u2.UserID, u2.[Email] as SiteUser

From  mp_Users u2

where  u2.SiteID=@SiteID and u2.[Email] like @query +'%'

order by SiteUser
我假设你知道如果把你的数据放入到DataReader中，如果你没有学习过mojoPortal源代码
或者其他的例子，下一步是为你的服务建立一个.aspx页面 ，在我的程序中，我建立了一个

Services文件夹，在这个文件夹中，我建立了UserDropdownXml.aspx页面，需要注意的是在UserDropDownXml.aspx文件中除了页面

声明部分，没有内容。所有需要的代码在UserDropdownXml.aspx.cs文件中

如下：

protected string query =string.Empty;

protected void Page_Load(object sender, System.EventArgs e)
{
   Response.ContentType="application/xml";
   Encoding encoding=new UTF8Encoding();
   XmlTextWriter xmlTextWriter=new XmlTextWriter(Response.OutputStream,encoding);
   xmlTextWriter.Formatting=Formatting.Indented;
   xmlTextWriter.WriteStartDocument();
   xmlTextWriter.WriteStartElement("DATA");
  
   SiteSettings siteSettings=Siteutils.GetCurrentSiteSettings();
  
   if((siteSettings!=null)&&(SiteUser.IsInRoles("Admins;Content Administrators")))
   {
  
   if(Request.Params.Get("quer")!=null)
   {
   query=Request.Params.Get("query");
   int rowsToGet=10;
   IDataReader reader=SiteUser.GetSmartDropDownData(siteSettings.SiteID,query,rowsToGet);
  
   while(reader.Read())
   {
     xmlTextWriter.WriteStartElement("R");
 
  xmlTextWriter.WriteStartElement("V");
  xmlTextWriter.WriteString(reader["UserID"].ToString());
  xmlTextWriter.WriteEndElement();
 
  xmlTextWriter.WriteStartElement("T");
  xmlTextWriter.WriteString(reader["SiteUser"].ToString().Trim());
  xmlTextWriter.WriteEndElement();
  xmlTextWriter.WriteEndElement();
  }
  reader.Close();
  }
  }
 
  xmlTextWriter.WriteEndElemnt();
  xmlTextWriter.WriteEndCocument();
  xmlTextWriter.Close();
  }
 
 
  如果你有更好的建议，请提交到开发者论坛中讨论