改造asp.net日历控件为弹出式日期选择控件和GridView呈现长文本字段的两个技巧

最新推荐文章于 2024-07-31 12:04:42 发布

vinoYang

最新推荐文章于 2024-07-31 12:04:42 发布

阅读量1.3w

点赞数

分类专栏：【dotNet】文章标签： asp.net 日历 calendar textbox server javascript

本文链接：https://blog.csdn.net/yanghua_kobe/article/details/5471278

版权

【dotNet】专栏收录该内容

42 篇文章 1 订阅

订阅专栏

asp.net中自带了一个非常不错的日历控件，但在其呈现方式上还是稍有欠缺。现在我们用一个小技巧，可以轻松创建一个弹出式日期。自此你再也不用去网上找那个带了很多脚本代码的JS制作的弹出式日期控件了。

实现，方式很简单：只需在页面中加入一点Javascript和一些CSS，就可以制作一个简单的弹出式日期选择器。

其中，.aspx代码如下：

<head id="Head1" runat="server">
    <title>无标题页</title>
    <mce:script type="text/javascript" language="javascript"></mce:script>
    <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">        #datePicker
        {
        	display:none;
        	position:absolute;
        	border:solid 2px black;
        	background-color:White;
        	}
    </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="日历" οnclick="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"); }

效果：

技巧二：

当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中即可。

效果：