天天看點

改造asp.net月曆控件為彈出式日期選擇控件和GridView呈現長文本字段的兩個技巧

asp.net中自帶了一個非常不錯的月曆控件,但在其呈現方式上還是稍有欠缺。現在我們用一個小技巧,可以輕松建立一個彈出式日期。自此你再也不用去網上找那個帶了很多腳本代碼的JS制作的彈出式日期控件了。

實作,方式很簡單:隻需在頁面中加入一點Javascript和一些CSS,就可以制作一個簡單的彈出式日期選擇器。

其中,.aspx代碼如下:

<head id="Head1" runat="server">

<title>無标題頁</title>

<mce:script type="text/javascript" language="javascript"><!--

function displayCalendar()

{

var datepicker=document.getElementById("datePicker");

datePicker.style.display='block';

}

// --></mce:script>

<mce:style type="text/css"><!--

#datePicker

display:none;

position:absolute;

border:solid 2px black;

background-color:White;

--></mce:style><style type="text/css" mce_bogus="1"> #datePicker

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:Label ID="Label1" runat="server" Text="日期:"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<img src="client.png" mce_src="client.png" alt="月曆" onclick="displayCalendar()" />

<div id="datePicker">

<asp:Calendar ID="Calendar1" runat="server"

onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>

</div>

<asp:Button ID="Button1" runat="server" Text="Button" />

</form>

</body>

</html>

.aspx.cs代碼:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

TextBox1.Text = Calendar1.SelectedDate.ToString("d");

效果:

改造asp.net月曆控件為彈出式日期選擇控件和GridView呈現長文本字段的兩個技巧

技巧二:

當GridVIew用于呈現一個很多字元串記錄,而可以設定的寬度又很有限的話,我們可以利用GridView的ToolTip屬性的這個技巧,技巧如下:

protected void gv_HistoryRecords_RowDataBound(object sender, GridViewRowEventArgs e)

if (e.Row.RowType == DataControlRowType.DataRow)

if (e.Row.Cells[2].Text.Trim().Length > 7)

e.Row.Cells[2].ToolTip = e.Row.Cells[2].Text;

e.Row.Cells[2].Text = e.Row.Cells[2].Text.Substring(0, 6) + "<b>....</b>";

主要是先先判斷字段字元長度是否大于某個設定的值,如果大于這個值,将整個字段值都存入ToolTip屬性中,然後截取前多少個字元顯示在GridView中即可。

改造asp.net月曆控件為彈出式日期選擇控件和GridView呈現長文本字段的兩個技巧

當然如果,在代碼中給ToolTip加些标記,設定一下顯示外觀,應該會更美觀一些!

原文釋出時間為:2010-04-10

本文作者:vinoYang

繼續閱讀