在 ASP.NET 中,如何轻松地使用jQuery插件

分享于 

4分钟阅读

Web开发

  繁體

介绍

是构建现代用户交互网站的优秀JavaScript库。 在任何web应用程序中都很容易使用 jQuery。 jQuery拥有一组强大的JavaScript UI控件,如日期选取器。标签面板等。

我已经编写了一个小工具类来在 ASP.NET 中使用 jQuery DatePicker。 使用这个类是非常简单的。 你只需要传递页面的Page 对象和 TextBox

屏幕截图

 screenshot.jpg

使用代码

查看下面的实用程序类:

using System;using System.Collections.Generic;using System.Text;using System.Web.UI;using System.Web.UI.WebControls;namespace Util
{
 publicclass JQueryUtils
 {
 publicstaticvoid RegisterTextBoxForDatePicker(Page page, 
 params TextBox[] textBoxes)
 {
 RegisterTextBoxForDatePicker(page, "dd-mm-yy", textBoxes);
 }
 publicstaticvoid RegisterTextBoxForDatePicker(Page page, 
 string format, params TextBox[] textBoxes)
 {
 bool allTextBoxNull = true;
 foreach (TextBox textBox in textBoxes)
 {
 if (textBox!= null) allTextBoxNull = false;
 }
 if (allTextBoxNull) return;
 page.ClientScript.RegisterClientScriptInclude(page.GetType(), 
 "jquery", "JQuery/jquery.js");
 page.ClientScript.RegisterClientScriptInclude(page.GetType(), 
 "jquery.ui.all", "JQuery/ui/jquery.ui.all.js");
 page.ClientScript.RegisterClientScriptBlock(page.GetType(), 
 "datepickerCss", 
 "<link rel="stylesheet" href="JQuery/themes/" + 
 "flora/flora.datepicker.css"/>");
 StringBuilder sb = new StringBuilder();
 sb.Append("$(document).ready(function() {");
 foreach (TextBox textBox in textBoxes)
 {
 if (textBox!= null)
 {
 sb.Append("$('#" + textBox.ClientID + "').datepicker(
 {dateFormat:"" + format + ""});");
 }
 }
 sb.Append("});");
 page.ClientScript.RegisterClientScriptBlock(page.GetType(), 
 "jQueryScript", sb.ToString(), true);
 }
 }
}

用法非常简单。 if的TextBox 中,如果有名为 MyDateTextBox的,则必须在 Page_Load 事件中编写以下行,以将 TextBox 与jQuery一起附加:

protectedvoid Page_Load(object sender, EventArgs e)
{
 Util.JQueryUtils.RegisterTextBoxForDatePicker(Page, MyDateTextBox); 
}

第二个参数接受变量参数。 所以你可以将任意数量的TextBox es传递给函数。 还有一个重载函数,以接受你的期望日期格式

你必须从 jQuery UI 站点 http://ui.jquery.com/download 下载jQuery库。

你可以下载 DatePicker的文件。 但是要记住在类中重命名 。js文件。 你可以看到,我已经编写了jQuery核心库JavaScript文件名,。 ui.all.js 文件以及 DatePicker的。css文件。

我还附上了一个样本项目。 cheers!

我的其他文章


相关文章