这么多年的asp.net ajaxToolkit 总结

1.下滑和上拉窗口
    <div class="tvcLabelFrame">
        <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"         TargetControlID="tvcLabelContentP2"
        ExpandControlID="tvcLabelHeadP1"
        CollapseControlID="tvcLabelHeadP1"
        Collapsed="False"
        SuppressPostBack="true"
        SkinID="CollapsiblePanelDemo" />
        <asp:Panel ID="tvcLabelHeadP1" runat="server">
       
            <div id="tvcLabelHead1" class="tvcLabelHead">
                    共有标注<asp:Label ID="tvcLabelHeadlb" CssClass="tvcLabelColor" runat="server" Text="2"></asp:Label>条
            </div>
       
        </asp:Panel>
        <asp:Panel ID="tvcLabelContentP2" runat="server">
        <div class ="tvcLabelContent">
            <div class="tvcLabelTitle">
                <asp:Label ID="tvcLabelTitlelb" runat="server" Text="标注的表提为发明专利"></asp:Label>
            </div>
            <div class ="tvcLabelCon">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Label ID="tvcLabelConlb" runat="server" Text="叶轮出口直接为多少呢?想知道等有了具体数据后就可以很清楚的知道了,叶轮出口直接为多少呢?想        知道等有了具体数据后就可以很清楚的知道了。。。。。"></asp:Label>
            </div>
            <div class ="tvcLabelTime">
                <asp:Label ID="tvcLabelTimelb" runat="server" Text="时间:2009/9/1 18:55"></asp:Label>
            </div>
            <div class ="tvcLabelLine">
             
            </div>
            <div class="tvcLabelTitle">
                <asp:Label ID="Label1" runat="server" Text="标注的表提为发明专利"></asp:Label>
            </div>
            <div class ="tvcLabelCon">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Label ID="Label2" runat="server" Text="叶轮出口直接为多少呢?想知道等有了具体数据后就可以很清楚的知道了,叶轮出口直接为多少呢?想知道等        有了具体数据后就可以很清楚的知道了。。。。。"></asp:Label>
            </div>
            <div class ="tvcLabelTime">
                <asp:Label ID="Label3" runat="server" Text="时间:2009/9/1 18:55"></asp:Label>
            </div>
            <div class ="tvcLabelFengPage">
            </div>
         </div>
         </asp:Panel>
    </div>

2.时间
      <ajaxToolkit:CalendarExtender ID="PublishTime" runat="server" TargetControlID="tbPublishTime" Format="yyyy/MM/dd">
      </ajaxToolkit:CalendarExtender>
3.对输入框进行输入限制
    FilteredTextBoxExtender的一些属性:
    1, TargetControlID:用来设置要控制的文本框。
    2, FilterType:设置被过滤的类型,提供如下四种:
    Custom:如果选择这个选项,就可以在另外的一个属性中自定义不被过滤的字符
    Numbers:让关联的文本框只能输入数字。
    UppercaseLetters:让关联的文本框只能输入大写字母。
    LowercaseLetters:让关联的文本框只能输入小写字母。
    3,ValidChars:当FilterType设置为Custom时,用来设置有效的字符。
    如:只 想输入数字的时候,可以自己设置filterType的值为:1234567890
    比起自己过滤方便了很多,但是局限性很明显,太不自由,希望下个版本更强大 可以加如正则表达式验证的属性,可以更方便的验证更多的内容 ,看上去我 太懒了 ,很依赖别人写好的东西,
    具体使用方法就不写了:这里只贴出来点关键代码:
    <asp:TextBox ID="TextBox4" runat="server" Width="378px"></asp:TextBox><br />
    <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox4"
    ValidChars="012345689."><!--我在这里设置了ValidChars的值,值能输入数字和点,目的是限制是能输入小数点和数字,回头自己加个数字验证,就很方便的实现了数字的验证-->
    </cc1:FilteredTextBoxExtender>
    有机会自己多多研究下,扩展点更多的属性,不过对于一个刚入门儿的程序员,路还长。。。
    希望这一天尽快到来。。加油~~
4.导航栏
  <div class="ncUserCenterBack">
    <div class="ncUserCenterHead"></div>
    <ajaxToolkit:Accordion ID="PatentAccordion" runat="Server" SelectedIndex="0"
    HeaderCssClass="ncAccordionHeaderDef" HeaderSelectedCssClass="ncAccordionHeaderSelected"
    AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="30" RequireOpenedPane="false" SuppressHeaderPostbacks="false">
    <Panes>
        <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
            <Header>个人信息</Header>
            <Content>
                <div id="DivContentList1" class="ncAccordionContentListDef1" style="margin-top:10px;" οnclick="ContentListClick(1);document.getElementById('iframePContent').src='UserCenterModule/UserSelfModify.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">编辑我的资料</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList2" class="ncAccordionContentListDef1" οnclick="ContentListClick(2);document.getElementById('iframePContent').src='UserCenterModule/PassportModify.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">修改密码</td>
                        </tr>
                    </table>
                </div>
            </Content>
        </ajaxToolkit:AccordionPane> 
         <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
            <Header>用户管理</Header>
            <Content>
                <div id="DivContentList3" class="ncAccordionContentListDef2" style="margin-top:10px;" οnclick="ContentListClick(3);document.getElementById('iframePContent').src='UserCenterModule/PrivilegeTemplateManage.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">权限模板管理</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList4" class="ncAccordionContentListDef2" οnclick="ContentListClick(4);document.getElementById('iframePContent').src='UserCenterModule/UserList.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">用户信息管理</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList5" class="ncAccordionContentListDef2" οnclick="ContentListClick(5);document.getElementById('iframePContent').src='UserCenterModule/GroupManage.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">用户组管理</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList6" class="ncAccordionContentListDef2" οnclick="ContentListClick(6);document.getElementById('iframePContent').src='UserCenterModule/UserRecordList.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">用户访问记录管理</td>
                        </tr>
                    </table>
                </div>
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server" >
            <Header><%--<div οnclick="document.getElementById('iframePContent').src='UserCenterModule/StatisticsResult.aspx';">我的统计结果</div>--%>
                <div id="DivCollectionget"></div>
                <asp:Button ID="btSResult" runat="server" Text="我的统计结果" CssClass="ncBtSResult" OnClick="btSResult_OnClick" />
                <asp:Label ID="lblSResult" runat="server" style="display:none;">0</asp:Label>
            </Header>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server" >
            <Header><div οnclick="document.getElementById('iframePContent').src='UserCenterModule/MyPSignList.aspx';">专利标注/翻译</div></Header>
        </ajaxToolkit:AccordionPane>    
         <ajaxToolkit:AccordionPane ID="AccordionPane5" runat="server" >
            <Header>我的文献信息</Header>
            <Content>
                <div id="DivContentList7" class="ncAccordionContentListDef1" style="margin-top:10px;" οnclick="ContentListClick(7);document.getElementById('iframePContent').src='UserCenterModule/MonographInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">专著文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList8" class="ncAccordionContentListDef1" οnclick="ContentListClick(8);document.getElementById('iframePContent').src='UserCenterModule/PeriodicalInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">期刊文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList9" class="ncAccordionContentListDef1" οnclick="ContentListClick(9);document.getElementById('iframePContent').src='UserCenterModule/MeetingInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">会议文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList10" class="ncAccordionContentListDef1" οnclick="ContentListClick(10);document.getElementById('iframePContent').src='UserCenterModule/Topicsinfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">课题组发表文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList11" class="ncAccordionContentListDef1" οnclick="ContentListClick(11);document.getElementById('iframePContent').src='UserCenterModule/ExpertInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">专家学者文献</td>
                        </tr>
                    </table>
                </div>
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane6" runat="server" >
            <Header><div οnclick="document.getElementById('iframePContent').src='UserCenterModule/MyDSignList.aspx';">我的文献标注</div></Header>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane7" runat="server" >
            <Header><div οnclick="document.getElementById('iframePContent').src='UserCenterModule/PersonalTaskList.aspx';">任务管理</div></Header>
        </ajaxToolkit:AccordionPane>
    </Panes>           
    </ajaxToolkit:Accordion>
    </div>

5.  弹出层

    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="lbtnRWZP" PopupControlID="plRWZP" CancelControlID="btnExCancel"           Drag="true"
            runat="server" DropShadow="false" RepositionMode="RepositionOnWindowResizeAndScroll" BackgroundCssClass="srcExtendermodalBackground"                      PopupDragHandleControlID="plRWZPHandle">
    </ajaxToolkit:ModalPopupExtender>

    <asp:Panel ID="plRWZP" runat="server"  CssClass="srcRWZPExtendermodalPopup" Style="display:none;">

    <div style="font-size:12px;">
        <asp:Panel ID="plRWZPHandle" runat="server">
            <div style="width:424; height:27px; cursor:move; background:url('../App_Themes/HgSysSite/PatentModule/Images/Default/srcExtenderHead.jpg') no-repeat; padding-right:30px; _padding-right:15px;" >
                <div style="width:40px; width:18px; float:right;">
                    <asp:Button ID="btnExCancel" runat="server" style="width:40px; height:18px; background:url('../App_Themes/HgSysSite/PatentModule/Images/Default/srcExCancelButton.jpg') no-repeat; border-style:none;"/>
                </div>
                <div style="clear:right; height:-1px;"></div>
            </div>
        </asp:Panel>
       
       
        <div style="width:372px; height:332px; border:solid 1px #cfcfcf; padding:12px 30px 0px 20px; _padding:12px 10px 0px 10px;">
            <div style="height:20px; line-height:20px;">
                <div style="float:left;">用 户 组:</div>
                <div style="width:302px; height:20px; margin-left:10px; float:left;">
                    <asp:DropDownList ID="ddlExUserGroup" runat="server" style="width:302px; height:20px;"></asp:DropDownList>
                </div>
                <div style="clear:left; height:-1px;"></div>
            </div>
            <div style="width:402px; height:182px; margin-top:10px;">
                <div style="height:182px; float:left;">用  户:</div>
                <div style="width:300px; height:180px; margin-left:10px; float:left; overflow-y:scroll; border:solid 1px #cfcfcf; background-color:#fff;">
                    <div style="width:265px; height:300px;"></div>
                </div>
                <div style="clear:left; height:-1px;"></div>
            </div>
            <div style="width:402px; height:64px; margin-top:10px;">
                <div style="height:64px; float:left; margin-right:10px;">要  求:</div>
                <div style="width:302px; height:64px; float:left;">
                    <asp:TextBox ID="tbExRequest" runat="server" style="width:296px; height:60px;"></asp:TextBox>
                </div>
                <div style="clear:left; height:-1px;"></div>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="btnExOK" runat="server" OnClick="btnExOK_OnClick" style="width:63px; height:25px; margin-left:75px; margin-top:12px; background:url('../App_Themes/HgSysSite/PatentModule/Images/Default/srcbtnExOK.jpg') no-repeat; border-style:none;" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
       
       
        <%--<asp:HiddenField ID="HiddenField1" runat="server" />--%>
        <%--<asp:Panel ID="Panel1" runat="server" CssClass="srcExtendermodalPopupbar">
        </asp:Panel>--%>
    </div>
   
</asp:Panel>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里提供一个简单的例子,帮助您实现asp.net中的手机验证: 1. 在aspx页面的头部引入以下js文件: ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.2/jquery.validate.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.2/additional-methods.min.js"></script> ``` 2. 在表单中添加一个文本框,并使用MaskedEdit控件对其进行格式化,并设置电话号码的格式。 ```html <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox> <ajaxToolkit:MaskedEditExtender ID="maskPhone" runat="server" TargetControlID="txtPhone" Mask="(999) 999-9999" MaskType="Number" InputDirection="LeftToRight" ClearMaskOnLostFocus="false" /> <ajaxToolkit:MaskedEditValidator ID="valPhone" runat="server" ControlToValidate="txtPhone" ValidationExpression="\(\d{3}\) \d{3}\-\d{4}" IsValidEmpty="false" InvalidValueMessage="Invalid Phone Number!" /> ``` 3. 使用jQuery Validate插件来对文本框进行验证,并添加一个自定义规则来验证电话号码。 ```javascript $(document).ready(function () { $("#form1").validate({ rules: { <%=txtPhone.UniqueID%>: { required: true, phoneUS: true } }, messages: { <%=txtPhone.UniqueID%>: { required: "Please enter your phone number.", phoneUS: "Please enter a valid US phone number." } } }); $.validator.addMethod("phoneUS", function (phone_number, element) { phone_number = phone_number.replace(/\s+/g, ""); return this.optional(element) || phone_number.length > 9 && phone_number.match(/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/); }, "Please specify a valid phone number"); }); ``` 4. 最后,在aspx页面中添加一个提交按钮,并使用C#代码来处理表单提交。 ```html <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> ``` ```csharp protected void btnSubmit_Click(object sender, EventArgs e) { if (Page.IsValid) { // 处理表单提交 string phone = txtPhone.Text; // ... } } ``` 希望这个例子可以帮助您实现asp.net中的手机验证!如果您有任何其他问题,请随时与我联系。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值