FineUI 开源版(原ExtAsp.Net)

Last updated:2017-03SURFSKY

http://pan.baidu.com/share/home?uk=170857326#category/type=0

---------------------------------------------------配置&预设

http://fineui.com/demo/#/demo/config/modify_webconfig.htm

---------------------------------------------------install-package fineui

修改web.config

页面上放置

---------------------------------------------------客户端脚本---------------------------------------------------标准的aspnet服务器端生成客户端脚本

Page.ClientScript.RegisterStartupScript(this.GetType(), "alert_hello", "alert('你好 Asp.Net！');", true);

PageContext.RegisterStartupScript(wnd.GetShowReference());

PageContext.RegisterStartupScript("closeActiveTab();");

FineUI客户端脚本

F.alert("定义在页面中的客户端事件！");

客户端错误捕捉//参考：http://stackoverflow.com/questions/951791/javascript-global-error-handling/10556743#10556743

window.onerror =function (msg, url, line, col, error) {var errors =[];

errors.push('消息：' +msg);

errors.push('网址：' +url);

errors.push('行：' +line);

errors.push('列：' +col);

F.alert(errors.join('
'), 'JavaScript错误！');return true; //返回 true 阻止浏览器弹出错误提示框(比如在IE浏览器中)

};

网页对话框

Alert

Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);

Alert.ShowInTop("你好 FineUI！", MessageBoxIcon.Information);

Confirm

PageContext.RegisterStartupScript(

Confirm.GetShowReference("操作成功！点击确定按钮开始下载文件，点取消按钮弹出对话框",

String.Empty,

MessageBoxIcon.Question,

PageManager1.GetCustomEventReference(false, "Confirm_OK"), //第一个参数 false 用来指定当前不是AJAX请求

PageManager1.GetCustomEventReference("Confirm_Cancel"))

);

组件/窗体

Window wnd= FindControl(wndID) asWindow;

btnClose.OnClientClick=ActiveWindow.GetHideReference();

定制客户端事件(CustomEvent)

F.customEvent('TextBox1_ENTER');

}

}

protected void PageManager1_CustomEvent(objectsender, CustomEventArgs e)

{if (e.EventArgument == "TextBox1_ENTER")

{

TextBox2.Text=TextBox1.Text;

TextBox2.Focus(true);

}

}

客户端事件监听(Listener)

改变另外一个控件

var textbox2ClientID = '';

function onTextBoxChange() {

F(textbox2ClientID).setValue(this.getValue());

}

---------------------------------------------------表单控件

http://fineui.com/demo/

大部分表单控件都有Label属性

Label="这是标签"LabelWidth="150px"LabelAlign="Left"

---------------------------------------------------TimerLabel

Button

图标

客户端事件服务器端点击事件protected void btnHello_Click(objectsender, EventArgs e)

{

Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);

Alert.ShowInTop("你好 FineUI！", MessageBoxIcon.Information);

}

客户端脚本

btnClientClick2.OnClientClick= Alert.GetShowInTopReference("这是在服务器端生成的客户端事件");

菜单按钮

自定义按钮

background-image: url(../res/images/login.png) !important;

width: 320px;

height: 50px;

border-width: 0;

background-color: transparent;

}

.bgbtn .x-frame-ml, .bgbtn .x-frame-mc, .bgbtn .x-frame-mr,

.bgbtn .x-frame-tl, .bgbtn .x-frame-tc, .bgbtn .x-frame-tr,

.bgbtn .x-frame-bl, .bgbtn .x-frame-bc, .bgbtn .x-frame-br {

background-image: none;

background-color: transparent;

}LinkButtonHyperLinkImage

Calendar

Calendar1.MinDate=DateTime.Now;

Calendar1.MaxDate= DateTime.Now.AddDays(20);

Calendar1.SelectedDate= DateTime.Now.AddDays(10);protected void Calendar1_DateSelect(objectsender, EventArgs e)

{

labResult1.Text= String.Format("选择的日期：{0}", Calendar1.SelectedDate.Value.ToString(Calendar1.DateFormatString));

}

TextBox

文本位置

.text-align-right input {text-align: right;}CssClass="text-align-center"TextAreaHtmlEditorTriggerBox(带小图标的输入框)TriggerIconUrl="~/res/icon/application_edit.png"Trigger1IconUrl="~/res/icon/bullet_cross.png"Trigger2IconUrl="~/res/icon/zoom.png"TwinTriggerBox(带两个小图标的输入框，如清除按钮)

/>ttbxMyBox2.ShowTrigger1= true;

NumberBox

/>

/>

DataPicker

/>TimePickerCheckBox

CheckBoxList

RadioButtonRadioButtonList

DropDownList

eg

绑定到字符串列表private voidBindStringListToDropDownList()

{

List strList = new List();

strList.Add("可选项1");

strList.Add("可选项2");

strList.Add("可选项3");

strList.Add("可选项4");

strList.Add("可选项5");

strList.Add("可选项6");

strList.Add("可选择项7");

strList.Add("可选择项8");

strList.Add("可选择项9");

strList.Add("这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的可选项");

DropDownList1.DataSource=strList;

DropDownList1.DataBind();

}

绑定到对象列表(或DataTable)private voidBindEnumrableToDropDownList()

{

List myList = new List();

myList.Add(new CustomClass("1", "可选项1"));

myList.Add(new CustomClass("2", "可选项2"));

myList.Add(new CustomClass("3", "可选项3"));

myList.Add(new CustomClass("4", "可选项4"));

myList.Add(new CustomClass("5", "可选项5"));

myList.Add(new CustomClass("6", "可选项6"));

myList.Add(new CustomClass("7", "可选择项7"));

myList.Add(new CustomClass("8", "可选择项8"));

myList.Add(new CustomClass("9", "可选择项9"));

DropDownList1.DataTextField= "Name";

DropDownList1.DataValueField= "ID";

DropDownList1.DataSource=myList;

DropDownList1.DataBind();

}

多选

EnableMultiSelect="true"

protected void btnGetSelection_Click(objectsender, EventArgs e)

{if (DropDownList1.SelectedItem != null)

{

List texts = new List();

List values = new List();foreach (ListItem item inDropDownList1.SelectedItemArray)

{

texts.Add(item.Text);

values.Add(item.Value);

}

labResult.Text= String.Format("选中项文本：{0}
选中项值：{1}",

String.Join("  ", texts.ToArray()),

String.Join("  ", values.ToArray()));

}else{

labResult.Text= "无选中项";

}

}

模拟树

http://fineui.com/demo/#/demo/dropdownlist/dropdownlist_simulate_tree.aspx

private voidBindEnumrable()

{

List myList = new List();

myList.Add(new JQueryFeature("0", "jQuery", 0, false));

myList.Add(new JQueryFeature("1", "核心", 1, false));

myList.Add(new JQueryFeature("2", "选择符", 1, false));

myList.Add(new JQueryFeature("3", "基本选择符", 2, true));

myList.Add(new JQueryFeature("4", "内容选择符", 2, true));

myList.Add(new JQueryFeature("5", "属性选择符", 2, true));

myList.Add(new JQueryFeature("6", "筛选", 1, false));

myList.Add(new JQueryFeature("7", "过滤", 2, true));

myList.Add(new JQueryFeature("8", "查找", 2, true));

myList.Add(new JQueryFeature("9", "事件", 1, false));

myList.Add(new JQueryFeature("10", "页面载入", 2, true));

myList.Add(new JQueryFeature("11", "事件处理", 2, true));

myList.Add(new JQueryFeature("12", "事件委托", 2, true));

ddlBox.DataTextField= "Name";

ddlBox.DataValueField= "Id";

ddlBox.DataSimulateTreeLevelField= "Level";

ddlBox.DataEnableSelectField= "EnableSelect";

ddlBox.DataSource=myList;

ddlBox.DataBind();

ddlBox.SelectedValue= "3";

}

FileUpload

不能上传大文件。大文件可用SwfUpload来上传

protected void btnSubmit_Click(objectsender, EventArgs e)

{if(filePhoto.HasFile)

{string fileName =filePhoto.ShortFileName;if (!ValidateFileType(fileName))

{

Alert.Show("无效的文件类型！");return;

}

fileName= fileName.Replace(":", "_").Replace(" ", "_").Replace("\\", "_").Replace("/", "_");

fileName= DateTime.Now.Ticks.ToString() + "_" +fileName;

filePhoto.SaveAs(Server.MapPath("~/upload/" +fileName));

labResult.Text= "

用户名：" + tbxUseraName.Text + "

" +

"

头像：

"; 清空表单字段(第一种方法)

//tbxUseraName.Reset();//filePhoto.Reset();//清空表单字段(第三种方法)

SimpleForm1.Reset();

}

}---------------------------------------------------Menu/Toolbar/ToolTip---------------------------------------------------Menu

Toolbar(很多容器控件都有Toolbar属性)

Tooltip

---------------------------------------------------容器类 Panel/Form/Windows/SimpleForm/...---------------------------------------------------Panel

Fit布局： 子容器撑满自己

>

Anchor 锚布局

...

...

Region 区域布局(类似vs)

...

...

...

...

...

HBox、VBox可用于左右上下结构的页面

...

....

更多布局(Column/Absolute/Table/HBox/VBox/Region)请查看 http://fineui.com/demo/#/demo/layout/anchor.aspx

ConentPanel

首页那种有个标题框框起来的、可收缩的那种面板。常用来容纳用户控件。

UserInfoControl ctrl= LoadControl("~/usercontrol/UserInfoControl.ascx") asUserInfoControl;

ctrl.UserName= "陈萍萍";

ctrl.UserAge= 20;

ctrl.UserCountry= "合肥";

Panel1.Controls.Add(ctrl);

UserControlConnector

专门容纳用户控件的东东

CPHConnector

http://fineui.com/demo/#/demo/master/simple.aspx

母版页中容纳ContentPlaceHolder的东东

GroupPanel

windows form 样式的面板，有个线框框起来，顶部有个文字的矩形

TabStrip

ASPX

...

...

点击

AutoPostBack="true" OnTabIndexChanged="TabStrip1_TabIndexChanged"

protected void TabStrip1_TabIndexChanged(objectsender, EventArgs e)

{if (TabStrip1.ActiveTabIndex == 0)

Label1.Text= "标签回发时间：" +DateTime.Now.ToLongTimeString();else if (TabStrip1.ActiveTabIndex == 1)

Label2.Text= "标签回发时间：" +DateTime.Now.ToLongTimeString();else if (TabStrip1.ActiveTabIndex == 2)

Label3.Text= "标签回发时间：" +DateTime.Now.ToLongTimeString();

}

script

btnShowInClient.OnClientClick=Tab3.GetShowReference();

btnAddTab1.OnClientClick= TabStrip1.GetAddTabReference("dynamic_tab1", "http://fineui.com/version_pro/", "专业版", IconHelper.GetIconUrl(Icon.Application), true);

btnRemoveTab2.OnClientClick= TabStrip1.GetRemoveTabReference("dynamic_tab2");

PageContext.RegisterStartupScript(TabStrip1.GetAddTabReference("dynamic_tab3", "http://fineui.com/version_pro/", "专业版(服务器)", IconHelper.GetIconUrl(Icon.Application), true));

向父页面添加选项卡

var basePath = '';

function openHelloFineUI() {

parent.addExampleTab.apply(null, ['hello_fineui_tab', basePath + 'basic/hello.aspx', '你好 FineUI', basePath + 'res/images/filetype/vs_aspx.png', true]);

}

Accordion

...

...

...

Accordion1.ActivePaneIndex

Accordion1.Panes.Count

SimpleForm

一行一行布局的简单表单

简单表单

表单验证

btnReset.OnClientClick=SimpleForm1.GetResetReference();

禁用、只读、数据无效

Form1.Enabled= false;

field.Enabled= true;

field.Readonly= true;

field.MarkInvalid("这个字段出错了！");

field.ClearInvalid();

遍历表单控件private delegate voidProcessFormField(Field field);private voidResolveFormField(ProcessFormField process)

{foreach (FormRow row inForm1.Rows)

{foreach (Field field inrow.Items)

{if (field != null)

process(field);

}

}

}

Window

eg

>

放多个复杂控件，如Form

Reference

Window1.Hidden= true;

btnShowInClient.OnClientClick=Window2.GetShowReference();

btnHideInClient.OnClientClick=Window2.GetHideReference();

btnHideInClient2.OnClientClick= Window2.GetHidePostBackReference("btnHideInClient2");

Window wnd= FindControl(wndID) asWindow;

PageContext.RegisterStartupScript(wnd.GetShowReference());

内嵌IFrame

Button1.OnClientClick= Window1.GetShowReference("../grid/grid_iframe_window.aspx", "弹出窗口一");protected void Window1_Close(objectsender, WindowCloseEventArgs e)

{

Alert.ShowInTop("Window1被关闭了！");

}

表格中弹出窗体

Reference

Button1.OnClientClick= Window1.GetSaveStateReference(tbxProvince.ClientID) +Window1.GetShowReference(openUrl);

Form

标准布局采用FormRow方式

...

复杂布局可嵌套Panel

...

---------------------------------------------------复杂控件Tree---------------------------------------------------Tree

延迟加载

OnNodeLazyLoad="Tree1_NodeLazyLoad"

protected void Tree1_NodeLazyLoad(objectsender, TreeNodeEventArgs e)

{

DynamicAppendNode(e.Node);

}private voidDynamicAppendNode(TreeNode parentNode)

{

parentNode.Expanded= true;

TreeNode node= null;switch(parentNode.NodeID)

{case "zhumadian":

node= newTreeNode();

node.Text= "遂平县";

node.Leaf= false;

node.NodeID= "suiping";

parentNode.Nodes.Add(node);

node= newTreeNode();

node.Text= "西平县";

node.Leaf= true;

node.NodeID= "xiping";

parentNode.Nodes.Add(node);break;case "suiping":

node= newTreeNode();

node.Text= "槐树乡";

node.Leaf= false;

node.NodeID= "huaishu";

parentNode.Nodes.Add(node);break;case "huaishu":

node= newTreeNode();

node.Text= "陈庄村";

node.Leaf= true;

node.NodeID= "chenzhuang";

parentNode.Nodes.Add(node);break;

}

}

绑定到DataTable(或类)

自己构造，参考http://fineui.com/demo/#/demo/tree/databind/tree_datatable.aspx

private voidResolveSubTree(DataRow dataRow, TreeNode treeNode)

{

DataRow[] rows= dataRow.GetChildRows("TreeRelation");if (rows.Length > 0)

{

treeNode.Expanded= true;foreach (DataRow row inrows)

{

TreeNode node= newTreeNode();

node.Text= row["Text"].ToString();

treeNode.Nodes.Add(node);

ResolveSubTree(row, node);

}

}

}

绑定到SiteMap

Tree1.DataSource=XmlDataSource2;

Tree1.DataBind();---------------------------------------------------复杂控件Grid---------------------------------------------------Grid

eg

>

各种列

编号列绑定列

模板列

购物车示例：http://fineui.com/demo/#/demo/grid/grid_edit_cart.aspx

弹窗列模拟树列删除提示扩展列(点击加号会展开)

扩展列(嵌套表格)

http://fineui.com/demo/#/demo/grid/grid_rowexpander_grid.aspx

多表头

http://fineui.com/demo/#/demo/grid/grid_groupheader.aspx

列的特殊属性

列扩展填满

ExpandUnusedSpace="True"列锁定

AllowColumnLocking="true"

分页排序

内存分页

AllowPaging="true" PageSize="5" IsDatabasePaging="false"数据库分页

AllowPaging="true" PageSize="5" IsDatabasePaging="true" OnPageIndexChange="Grid1_PageIndexChange"

protected void Grid1_PageIndexChange(objectsender, GridPageEventArgs e)

{

BindGrid(Grid1.PageIndex);

}

内存排序

AllowSorting="true" SortField="Gender" SortDirection="ASC"数据库排序

http://fineui.com/demo/#/demo/grid/grid_paging_database_sorting.aspx

AllowSorting="true" SortField="Gender" SortDirection="ASC" OnSort="Grid1_Sort"

protected void Grid1_Sort(objectsender, GridSortEventArgs e)

{//Grid1.SortDirection = e.SortDirection;//Grid1.SortField = e.SortField;

BindGrid();

}

分页区增加功能

ddlGridPageSize.SelectedValue=DbConfig.PageSize.ToString();protected void ddlGridPageSize_SelectedIndexChanged(objectsender, EventArgs e)

{

Grid1.PageSize=Convert.ToInt32(ddlGridPageSize.SelectedValue);

BindGrid();

}

事件

行选择

EnableCheckBoxSelect="true"EnableMultiSelect="false"Button3.OnClientClick= Grid1.GetNoSelectionAlertInTopReference("没有选中项！");

Grid1.SelectedRowIndexArray= new int[] { 4, 9};

行点击

EnableRowClickEvent="true" OnRowClick="Grid1_RowClick"

protected void Grid1_RowClick(objectsender, GridRowClickEventArgs e)

{

Alert.ShowInTop(String.Format("你点击了第 {0} 行(单击)", e.RowIndex + 1));

}

行双击

EnableRowDoubleClickEvent="true" OnRowDoubleClick="Grid1_RowDoubleClick"

protected void Grid1_RowDoubleClick(objectsender, GridRowClickEventArgs e)

{

Alert.ShowInTop(String.Format("你点击了第 {0} 行(双击)", e.RowIndex + 1));

}

命令

OnRowCommand="Grid1_RowCommand"

protected void Grid1_RowCommand(objectsender, GridCommandEventArgs e)

{if (e.CommandName == "Action1" || e.CommandName == "Action2")

{

labResult.Text= String.Format("你点击了第 {0} 行，第 {1} 列，行命令是 {2}", e.RowIndex + 1, e.ColumnIndex + 1, e.CommandName);

}

}

OnPreRowDataBound

OnPreRowDataBound="Grid1_PreRowDataBound"

//行绑定事件(若是admin，删除按钮无效)

protected void Grid1_PreRowDataBound(objectsender, FineUI.GridPreRowEventArgs e)

{

User user= e.DataItem asUser;if (user.Name == "admin")

{

FineUI.LinkButtonField deleteField= Grid1.FindColumn("deleteField") asFineUI.LinkButtonField;

deleteField.Enabled= false; //按钮不能点(如果能隐藏更好，估计要用RowPreDataBound事件)

deleteField.ToolTip = "不能删除超级管理员！";

}

}protected void Grid1_PreRowDataBound(objectsender, GridPreRowEventArgs e)

{

LinkButtonField lbfAction1= Grid1.FindColumn("lbfAction1") asLinkButtonField;

LinkButtonField lbfAction2= Grid1.FindColumn("lbfAction2") asLinkButtonField;

CheckBoxField cbxAtSchool= Grid1.FindColumn("cbxAtSchool") asCheckBoxField;

HyperLinkField linkField= Grid1.FindColumn("hlMajor") asHyperLinkField;if (e.RowIndex < 5)

{

...

}//如果绑定到 DataTable，那么这里的 DataItem 就是 DataRowView

DataRowView row = e.DataItem asDataRowView;if (linkField != null && row != null)

{

linkField.DataTextFormatString= "{0} (" + row["EntranceYear"].ToString() + ")";

}

}

RowDataBound

OnRowDataBound="Grid1_RowDataBound"

protected void Grid1_RowDataBound(objectsender, GridRowEventArgs e)

{//e.DataItem -> System.Data.DataRowView 或者自定义类//e.RowIndex -> 当前行序号(从 0 开始)//e.Values -> 当前行每一列渲染后的 HTML 片段//object a = Grid1.DataKeys[e.RowIndex][0];

DataRowView row = e.DataItem asDataRowView;if (row != null)

e.Values[4] = String.Format("{0} ({1})", e.Values[4], row["EntranceYear"]);

}

合计行

EnableSummary="true" SummaryPosition="Flow"

private voidOutputSummaryData()

{

DataTable source=DataSourceUtil.GetDataTable2();float donateTotal = 0.0f;float feeTotal = 0.0f;foreach (DataRow row insource.Rows)

{

donateTotal+= Convert.ToInt32(row["Donate"]);

feeTotal+= Convert.ToInt32(row["Fee"]);

}

JObject summary= newJObject();

summary.Add("fee", feeTotal.ToString("F2"));

summary.Add("donate", donateTotal.ToString("F2"));

Grid1.SummaryData=summary;

}

行内编辑(RenderField)

http://fineui.com/demo/#/demo/grid/grid_editor_cell.aspx

AllowCellEditing="true" ClicksToEdit="1" DataIDField="Id"

右键菜单

http://fineui.com/demo/#/demo/grid/grid_checkboxfield_rowcheckall_contextmenu.aspx

批量删除

protected void btnDeleteSelected_Click(objectsender, EventArgs e)

{if (!Common.CheckPower("CoreUserDelete"))return;

List ids =GridHelper.GetSelectedRowKeyIDs(Grid1);

Common.Db.Users.Where(u=>ids.Contains(u.ID)).Delete();

BindGrid();

}

自定义分页大小

ddlGridPageSize.SelectedValue=DbConfig.PageSize.ToString();protected void ddlGridPageSize_SelectedIndexChanged(objectsender, EventArgs e)

{

Grid1.PageSize=Convert.ToInt32(ddlGridPageSize.SelectedValue);

BindGrid();

}