VisualJS.NET 自定义控件开发

分享于 

7分钟阅读

Web开发

  繁體 雙語

介绍

我想向你展示如何在 VisualJS.NET. 下使用自定义JavaScript控件这里我将根据jQueryUI的Spinner 创建定制控件。 为了让本文更简单,我将从 VisualJS.NET's 下载的下载中使用示例项目。 由于这个项目包括预定义的自定义控件,如日历。颜色选择器。slider 等等,它将帮助我们创建。

背景

C#,JavaScript

在几个步骤中创建自定义控件

一旦我们在 Visual Studio 中打开了 web controls项目,我们需要将几个文件复制到相应的文件夹中:

  • css - 将文件 jquery-ui-1.9.0.custom.min.css 从 JQueryUI/Spinner/css 放置
  • JQueryUI-Spinner/css/Images - 将所有图像从放置
  • js - 从jqueryui微调器/js中放置一个文件 jquery-ui-1.9.0.custom.min.js

尽管使用这些文件夹不是强制的,但我想将文件保存在正确的文件夹中。

你可以将自定义控件假定为预期功能所需的呈现和操作的组合,并查看。 因此,我们需要按照我们希望的方式,让预制的JQUERY Spinner 组件与 VisualJS.NET 进行对话。 因此,我们需要至少在两部分中创建 Spinner的定义:JavaScript部分和. NET 部分。 JavaScript部分将是 spinner.js 文件,.NET 部分位于组件类文件中。

JavaScript部分

首先,每个自定义控件类 inherit 来自 VSJS_CBase,以便为VisualJS客户端接口提供基本功能。

VSJS_Spinner.prototype = new VSJS_CBase(); 

VisualJS.NET 在需要或者可见时呈现对象。 你仍然可以通过呈现与呈现的控件进行交流,但它们的可以见性在可以见性有意义时。 基于这里事实,我们可以考虑在呈现基本组件后创建 Spinner 对象,这可以从内部事件 OnRenderCompleted 中检查。

this.OnRenderCompleted = function () {
 $(this.input).spinner({
 stop: function (event,ui) {
 this.OnChanged(this.Name, null);
 },start: 0 });
};

为了在服务器端 (.NET 部件和jqueryui微调器组件之间传递值,我必须声明JavaScript部分的方法和属性。 下面的代码演示如何声明属性和方法。 另外,当发生 PageUp 或者 PageDown 操作之一时,还需要触发 OnChanged 事件。

VSJS_Spinner.prototype.Page = function (_page) { 
 if (this._Rendered) { 
 $(this.input).spinner({ page: _page }); 
 } 
};
VSJS_Spinner.prototype.PageUp = function () {
 if (this._Rendered) {
 $(this.input).spinner("pageUp");
 this.OnChanged(this.Name, null);
 }
}; 

.NET 部件

为了操作服务器端的属性和事件,我添加了一个新的组件类。 组件类- Spinner 派生自 VisuaJS.TextBox,并被添加到Web文件夹中。 为了将. NET 部件与JavaScript部分集成,Spinner 组件的构造函数必须调用带有 Spinner 作为控件类型 NAME的基构造函数。 为了每次创建这里控件的新实例,VisualJS.NET 在客户端搜索 VSJS_Spinner。

public Spinner() : base("Spinner") 

下面几个提示将允许我们正确配置和 register 组件 Spinner。 为此,我们使用了命名空间 VisualJS.Kernel的几种方法和属性。 JQueryUI Spinner 需要 jQuery,以便下面的代码显示如何启用jQuery支持。 ( GlobalAsaxHelper文件 VisualJS 文件夹是 below 调用的最佳位置)

VisualJS.Kernel.Settings.JQuerySupport = true; 

从命名空间 VisualJS.Kernel 中可以轻松合并文件,如 js,css 等等,我使用它来合并 JQueryUI Spinner 文件。 请记住,所有资源文件( JS,CSS等) 必须标记为"嵌入式资源"。Visual Studio -> 文件属性窗口-> 构建操作

//js filesComponentRegister.Merge(new string[]{"WebControls.spinner.js.jquery-ui-1.9.0.custom.min.js","WebControls.spinner.js.spinner.js"}, "WebControls.spinner.js", "js", Encoding.UTF8);//css filesComponentRegister.Merge(new string[]{ "WebControls.spinner.css.spinner.css", "WebControls.spinner.css.jquery-ui-1.9.0.custom.min.css" },"WebControls.spinner.css", "css", Encoding.UTF8);

然后,我必须使用 RegisterFolder 方法对 Spinner 文件夹进行 register。 另外,为了显示所需的图像,我在jqueryui微调器CSS文件中替换了图像的路径。 这就是我们在. NET 部分配置和 register 组件所需的全部内容。

Assembly appAsm = Assembly.GetExecutingAssembly();
ComponentRegister.RegisterFolder(appAsm,"WebControls.spinner");string CSS = ComponentRegister.GetText("WebControls.spinner.css", Encoding.UTF8);
string[] resNames = appAsm.GetManifestResourceNames();foreach (string resName in resNames) 
{ 
 if(resName.StartsWith("WebControls.spinner.img"))
 {
 string fileName = resName.Replace("WebControls.spinner.img.","");
 CSS= CSS.Replace("images/" + fileName, 
 "[$$VisualJSResourceTarget$$]?name="+ resName + "&type=image");
 }
}
ComponentRegister.SetText("WebControls.spinner.css",CSS, Encoding.UTF8);this.ClientLoadCheck("WebControls.spinner.js",ClientSideDocuments.Script);this.ClientLoadCheck("WebControls.spinner.css", ClientSideDocuments.CSS);

在服务器端我使用了jquery微调器的一些方法和属性,所以让我们看看如何在服务器端声明属性和方法。 我们可以使用 SetProperty 方法传递属性的值,并使用 SetMethod 方法调用方法。

int page = 1;publicint Page
{
 get {
 return page;
 }
 set {
 if (page!= value) 
 SetProperty("Page", value);
 page = value;
 }
}publicvoid PageUp()
{
 SetMethod("PageUp",null);
} 
测试控件
  • 添加到解决方案中选择 ASP.NET Web应用程序模板的新项目。
  • 添加 VisualJS.NET 支持
  • 添加对代理程序项目的引用。
  • 添加 VisualJS.NET 表单
  • Spinner 位于工具箱上,因此我们可以将它放在窗体上。
  • 你可以使用方法 PageUp 或者实现 TextChange 事件来更改它的属性 比如 页。

相关文章