使用ZIP文件安装的第一步
用于ASP的Telerik UI。净AJAXlibrary provides an option for installing its controls by downloading and executing the ZIP file, which contains the suite.
ZIP文件用于手动安装、升级或更新web应用程序或网站中的套件。要继续ZIP安装,您需要熟悉ASP。NET、IIS、设置权限和创建虚拟文件夹。通常,ZIP直接安装在inetpub / wwwroot
.
本教程描述了如何启动和运行Telerik UI for ASP。通过从ZIP文件下载并安装控件来实现NET AJAX。
- 首先,您将为ASP安装Telerik UI。净AJAXlibrary from a ZIP file and run the demos.
- 接下来,您将创建您的ASP。净AJAXapplication and add the Editor control to it.
- 然后,您将通过定义HtmlChart控件并将其绑定到示例数据来深入研究。
- 最后,您将为控件添加一些样式。
免费的Telerik UI入职课程怎么样?学习如何利用Telerik虚manbets登录拟教室.
先决条件
要完成本教程中的场景,需要具备以下先决条件。有关Telerik UI For ASP支持的第三方工具版本的更多信息。NET AJAX,请参考列出系统要求.
安装ASP。净AJAX在您的开发或生产机器上。ASP。NET AJAX在.NET 4中可用。x +安装。
如果是新用户,创建一个Telerik帐户.
步骤1:为ASP安装Telerik UI。净AJAX
在成功提供先决条件后,您将在不运行IIS的情况下从ZIP文件安装套件:
登录您的Telerik帐户并点击下载从最上面的菜单。
在装载的页面选择您购买的产品或试用下载Telerik®UI for ASP。NET AJAX,然后点击它。
下载手动安装(
Telerik_UI_for_ASP.NET_AJAX_20xx_x_xxx_Dev.zip
)文件,并将其内容提取到方便的位置。
步骤2:为ASP升级现有的Telerik UI。NET AJAX项目
ZIP安装中的文件通常用于手动升级已经存在的用于ASP的Telerik UI。NET AJAX项目。安全升级操作如下:
备份你的项目。
删除旧的
Telerik.Web.UI。*
引用,并关闭它。与任何ASP一样。NET项目,有助于理清ASP。NET临时文件和浏览器缓存。打开箱子文件夹,并删除旧的
Telerik.Web.UI。*
程序集。中的新程序集复制
Bin45
文件夹在用户界面的ASP。净AJAXinstallation path and paste them to the箱子
项目的文件夹。您可以使用“复制-替换”方法升级任何文件其他组件、本地化文件(
~ /包含
),对话框(ImageEditor, Editor),打印稿定义等等。在Visual Studio中打开项目,并添加对Telerik程序集的引用。
确保你拥有所有的东西必要的
. config
注册.
步骤3:将编辑器添加到项目中
通过Telerik项目模板创建的Web表单站点包含了Telerik UI为ASP所需的所有基本引用和注册。NET AJAX控件,包括一个ScriptManager控制,这是所有AJAX控件都需要的。这就是为什么你可以添加编辑器以本步骤中所示的简单方式添加到页面。
或者,你也可以直接从VS工具箱中拖动编辑器来添加到项目中。有关更多信息,请参阅将Telerik控件添加到Visual Studio工具箱中.
开放
default . aspx
并宣布RadEditor
之后RadScriptManager
:设置
RenderMode
而且内容
编辑器的属性:祝贺!你有了用于ASP的Telerik UI。NET控件在您的项目中运行!< /内容> < / telerik: RadEditor > 按下运行您的页面
F5
.
将编辑器添加到页面
步骤4:添加HtmlChart到你的项目
让我们更深入地研究一下来自ASP UI的控件的配置。NET AJAX套件。按照下面的步骤,您将创建一个数据绑定HtmlChart.您还将添加一个方便的工具提示,显示来自自定义数据字段的值。
该示例使用数据表
,但是你可以将HtmlChart绑定到首选数据源类型.页面已包含ScriptManager控制,这样你就可以在你在前一步添加的Editor控件之后声明HtmlChart:
在
default . aspx
,定义一个HtmlChartID = " RadHtmlChart1 "
:添加一个
ChartTitle
到创建的HtmlChart:添加
ColumnSeries
到PlotArea。系列
控件的集合:在页面的隐藏代码中,创建一个
GetData ()
方法。这个方法返回你要绑定到图表的样本数据:private DataTable GetData() {DataTable dt = new DataTable();dt.Columns.Add(“标签”);dt.Columns.Add(“价值”);dt.Columns.Add(“颜色”);dt.Columns.Add(“描述”);dt.Rows。添加("Week 1", 3, "#99C794", " 1 blouse and 2 trousers"); dt.Rows.Add("Week 2", 10, "#5FB3B3", "7 blouses and 3 skirts"); dt.Rows.Add("Week 3", 7, "#FAC863", "7 skirts"); dt.Rows.Add("Week 4", 12, "#6699CC", "5 blouses, 5 trousers and 2 skirts"); return dt; } ````
私有函数GetData() As DataTable Dim dt As DataTable = New DataTable() dt. columns . add ("labels") dt. columns . add ("values") dt. columns . add ("colors") dt. columns . add ("description") dt. rows . add ("description")添加(“第1周”,“#99C794”,“1件衬衫和2条裤子”)dt.Rows。添加(“第2周”,10,“#5FB3B3”,“7件衬衫和3条裙子”)dt.Rows。添加(“第三周”,7,“#FAC863”,“7条裙子”)dt.Rows。添加("Week 4", 12, "#6699CC", "5 blouses, 5 trousers and 2 skirts") Return dt End Function ````
配置图表的数据源以使用创建的示例数据:
protected void Page_Load(对象发送器,EventArgs e) {if (!IsPostBack) {RadHtmlChart1. htmlDataSource = GetData();}} ````
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)处理我。如果没有IsPostBack则加载RadHtmlChart1。DataSource = GetData()结束如果结束Sub ```` .
设置
颜色
而且值
字段名称到系列DataFieldY
而且ColorField
属性:设置
标签
字段的名称PlotArea.XAxis.DataLabelsField
值:定义一个
TooltipsAppearance
系列声明中的嵌套标记。然后定义一个自定义工具提示模板在里面。传递的数据源中的所有字段都可通过dataItem
模板的对象:There are #=dataItem.description# sold in #=category# 按下该页面运行
F5
.你会看到类似下图的东西:
绑定HtmlChart与自定义工具提示模板
步骤5:设置控件样式
Telerik UI for ASP。净AJAXprovides more than20个预定义皮肤允许您更改每个组件的外观和感觉。要使用所需的皮肤,请将皮肤名称设置为皮肤
控件的属性值:
恭喜!你有了用于ASP的Telerik UI。NET控件在您的项目中运行!< /内容> < / telerik: RadEditor >
将Glow皮肤应用到编辑器
就是这样!现在您可以更深入地研究用于ASP的Telerik UI了。NET AJAX,充分利用其灵活的功能!