在不使用jquery的情况下实现日历的问题 [英] problem implementing calender without using jquery

查看：65
本文介绍了在不使用jquery的情况下实现日历的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带有下拉列表的日历来选择月份和年份。 

我没有使用jquery。我没有任何错误，但页面重新加载whenevr我点击月份，年份从下拉列表和日期从日历。虽然价值得到纠正，但重新加载令人不安。应该怎么做才能阻止这个？请帮助代码。



Aspx代码：

< pre lang =xml> < tr >
< td > ;
< asp：标签 ID = lblExpiry 字体粗体 = true 字体大小 = 更大 runat = server > 到期< / asp：Label >
< / td >
< td >
< asp：TextBox < span class =code-attribute> runat = server ID = txtExpiry / >
< / td >
< td >
< asp：ImageButton ID = ImageButton2 < span class =code-attribute> runat = server ImageUrl = 〜/ Image s / cal.jpg 高度 = 33px OnClick = ImageButton2_Click 宽度 = 38px / > < / td >
< td >
< asp：RequiredFieldValidator ID = < span class =code-keyword> reqvalExpiry runat = server ValidationGroup = valStent ControlToValidate = txtExpiry

< span class =code-attribute> CssClass = field-validation-error ErrorMessage = 到期字段是必需的。 / >
< / td >
< / tr >
< tr >
< ; td >
< asp：DropDownList runat = server ID = ddlMonth AutoPostBack = true OnSelectedIndexChanged = Set_Calendar >
< asp：ListItem 文字 = 一月 值 = 1 / >
< asp：ListItem 文字 = 二月 值 = 2 / >
< asp：ListItem 文本 = March 值 = 3 / >
< asp：ListItem 文本 = 四月 值 = 4 / >
< asp：ListItem 文本 = 可以 值 = 5 / >
< ; asp：ListItem 文字 = 六月 值 = 6 / >
< asp：ListItem 文字 = 7月 值 = 7 / >
< span class =code-keyword>< asp：ListItem 文字 = 八月 值 = 8 / >
< asp：ListItem 文字 = 九月 值 = 9 / >
< asp：ListItem 文本 = 十月 值 = < span class =code-keyword> 10 / >
< asp：ListItem 文本 = 11月 值 = 11 / >
< asp ：ListItem 文本 = 12月 值 = 12 / >
< / asp：DropDownList >

< asp：DropDownList runat = server ID = ddlYear AutoPostBack = true OnSelectedIndexChanged = Set_Calendar >
< asp：ListItem 文字 = 2011 值 = 2011 / >
< asp：ListItem 文字 = 2012 值 = 2012 / >
< asp：ListItem 文本 = 2013 值 = 2013​​ / >
< asp： ListItem 文字 = 2014 值 = 2014 / >
< asp：ListItem 文本 = 2015 Value = 2015 < span class =code-keyword> / >
< / asp：DropDownList >
< / td >
< / tr &g t;
< tr >
< asp：日历 ID = Calendar2 runat = server OnSelectionChanged = Calendar2_SelectionChanged 字体大小 = XX-Small >
< TodayDayStyle BackColor = ＃003366 / >

< / asp：日历 >
< / tr >





代码落后：



 
 

 受保护  void  Page_Load（< span class =code-keyword> object  sender，EventArgs e）
 {
 
 
 Calendar2.Visible =  false ; 
  //   ddlMonth.Visible = false;  
  //   ddlYear.Visible = false;  
 Populate_MonthList（）; 
 Populate_YearList（）; 
 
 txtExpiry.Enabled =  false ; } 
< pre>  protected   void  ImageButton2_Click（ object  sender，ImageClickEventArgs e）
 {
 txtExpiry.Enabled =  true ; 
 ddlMonth.Visible =  true ; 
 ddlYear.Visible =  true ; 
 Calendar2.Visible =  true ; 
} 
 受保护  void  Populate_MonthList（）
 {
  //  将每个月添加到列表中 
  var  dtf = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat; 
  for （ int  i =  1 ; i& lt; =  12 ; i ++）
 ddlMonth.Items.Add（ new  ListItem（dtf.GetMonthName（i），i.ToString（）））; 
 
  //  在列表中选择当前月份选项 
 ddlMonth.Items.FindByValue（DateTime.Now.Month.ToString（））。Selected =  true ; 
} 
 
 
 受保护  void  Populate_YearList（） 
 {
  //  年份列表可以通过更改下部和上部来更改
  //   For语句的限制 
  for （ int  intYear = DateTime.Now.Year  -   20 ; intYear& ; lt; = DateTime.Now.Year +  20 ; intYear ++）
 {
 ddlYear.Items.Add（intYear.ToString（））; 
} 
 
  //  在列表中选择当前年份 
 ddlYear.Items.FindByValue（DateTime.Now.Year.ToString（））。Selected =  true ; 
} 
 
 受保护  void  Set_Calendar（ object  Sender，EventArgs e）
 {
  int  year =  INT  .Parse（ddlYear.SelectedValue）; 
  int  month =  int  .Parse（ddlMonth.SelectedValue）; 
 Calendar2.TodaysDate =  new  DateTime（年，月， 1 ）; 
} 
 
 受保护  void  Calendar2_SelectionChanged（ object  sender，EventArgs e）
 {
 txtExpiry.Text = Calendar2.SelectedDate.ToShortDateString（）; 
 Calendar2.Visible =  false ; 
} 
}

解决方案

1.注意每次点击可能产生后期的控件回来，在你的案例按钮或下拉列表中，执行事件背后的代码，并且加载事件总是被执行。



2.您应该将您的事件管理中可能出现的两个主要案例与您的代码分开：第一次调用，回发后调用。为此，您应修改加载事件处理程序，如下所示：

  protected   void  Page_Load（ object  sender，EventArgs e）
 {
  if （！IsPostBack（））
 {
 Calendar2.Visible =  false ; 
 Populate_MonthList（）; 
 Populate_YearList（）; 
 txtExpiry.Enabled =  false ; 
} 
}


I have a calender with dropdowndown list to select month and year. 

i didnt use jquery. I dont have any error but the page gets reloaded whenevr i click month, year from dropdown and date from calender.  though values are corrected added reloading is disturbing. what should be done to to stop this?  pls help in  code.


Aspx code:

<tr>
                       <td>
                            <asp:Label ID="lblExpiry" Font-Bold="true" Font-Size="Larger" runat="server">Expiry</asp:Label>
                       </td>
                       <td>
                                <asp:TextBox runat="server" ID="txtExpiry" />
                       </td>
                      <td>
                           <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/cal.jpg" Height="33px" OnClick="ImageButton2_Click" Width="38px" /></td>
                       <td>
                            <asp:RequiredFieldValidator ID="reqvalExpiry" runat="server" ValidationGroup="valStent" ControlToValidate="txtExpiry"

                                    CssClass="field-validation-error" ErrorMessage="The Expiry field is required." />
                       </td>
                   </tr>
                   <tr>
                        <td>
                       <asp:DropDownList runat="server" ID="ddlMonth" AutoPostBack="true" OnSelectedIndexChanged="Set_Calendar">
    <asp:ListItem Text="January" Value="1" />
    <asp:ListItem Text="February" Value="2" />
    <asp:ListItem Text="March" Value="3" />
    <asp:ListItem Text="April" Value="4" />
    <asp:ListItem Text="May" Value="5" />
    <asp:ListItem Text="June" Value="6" />
    <asp:ListItem Text="July" Value="7" />
    <asp:ListItem Text="August" Value="8" />
    <asp:ListItem Text="September" Value="9" />
    <asp:ListItem Text="October" Value="10" />
    <asp:ListItem Text="November" Value="11" />
    <asp:ListItem Text="December" Value="12" />
</asp:DropDownList>

<asp:DropDownList runat="server" ID="ddlYear" AutoPostBack="true" OnSelectedIndexChanged="Set_Calendar">
    <asp:ListItem Text="2011" Value="2011" />
    <asp:ListItem Text="2012" Value="2012" />
    <asp:ListItem Text="2013" Value="2013" />
    <asp:ListItem Text="2014" Value="2014" />
    <asp:ListItem Text="2015" Value="2015" />
</asp:DropDownList>
                            </td>
                   </tr>
                   <tr>
                       <asp:Calendar ID="Calendar2" runat="server" OnSelectionChanged="Calendar2_SelectionChanged" Font-Size="XX-Small">
                           <TodayDayStyle BackColor="#003366" />

                       </asp:Calendar>
                   </tr>




Code behind:




protected void Page_Load(object sender, EventArgs e)
        {


            Calendar2.Visible = false;
            //ddlMonth.Visible = false;
            //ddlYear.Visible = false;
            Populate_MonthList();
            Populate_YearList();

            txtExpiry.Enabled = false; }
<pre> protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
        {
            txtExpiry.Enabled = true;
            ddlMonth.Visible = true;
            ddlYear.Visible = true;
            Calendar2.Visible = true;
        }
        protected void Populate_MonthList()
        {
            //Add each month to the list
            var dtf = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat;
            for (int i = 1; i &lt;= 12; i++)
                ddlMonth.Items.Add(new ListItem(dtf.GetMonthName(i), i.ToString()));

            //Make the current month selected item in the list
            ddlMonth.Items.FindByValue(DateTime.Now.Month.ToString()).Selected = true;
        }


        protected void Populate_YearList()
        {
            //Year list can be changed by changing the lower and upper
            //limits of the For statement
            for (int intYear = DateTime.Now.Year - 20; intYear &lt;= DateTime.Now.Year + 20; intYear++)
            {
                ddlYear.Items.Add(intYear.ToString());
            }

            //Make the current year selected item in the list
            ddlYear.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = true;
        }

        protected void Set_Calendar(object Sender, EventArgs e)
        {
            int year = int.Parse(ddlYear.SelectedValue);
            int month = int.Parse(ddlMonth.SelectedValue);
            Calendar2.TodaysDate = new DateTime(year, month, 1);
        }

        protected void Calendar2_SelectionChanged(object sender, EventArgs e)
        {
            txtExpiry.Text = Calendar2.SelectedDate.ToShortDateString();
            Calendar2.Visible = false;
        }
    }
 解决方案 
1.Note that each time you click on a control that could generate post-back, in your case buttons or drop down lists, the code behind events are executed, and Load event is always executed.



2.You should separate the two main cases than may occur in the management of your event from your code: first invocation, post back invocation. For doing this you should modify your Load event handler like below:


protected void Page_Load(object sender, EventArgs e)
{
     if(!IsPostBack())
     {    
            Calendar2.Visible = false;
            Populate_MonthList();
            Populate_YearList();
            txtExpiry.Enabled = false; 
     }
}


                        
这篇关于在不使用jquery的情况下实现日历的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
                    

                

				

                            
                        

                

            

        

        

            



        

        

            
相关文章

            
        

        

            



        

    

    

        

            
其他开发语言最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    




    



    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆