JavaScript 基础教程 第四课

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

我们经常需要将数据返回给调用页面,下面是基本实现方式。
假设,有两个页子selectdate.aspx,calendar.aspx.
需要在selectdate.aspx做个连接,点击后打开calendar.aspx,然后在calendar.aspx中选择日期,将选择的日期返回给
selectdate.aspx(呵呵,不知道我说明白没有)
算了,看看代码吧,自然就明白了。
对了,还需要个文件用来装javascript的script.js
===============================================================================================
selectdate.aspx
----------------------------------------
<%@ page language="c#" codebehind="detail.aspx.cs" autoeventwireup="false" inherits="calendar.detail" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
 <head>
  <title>detail</title>
  <meta name="generator" content="microsoft visual studio .net 7.1">
  <meta name="code_language" content="c#">
  <meta name="vs_defaultclientscript" content="javascript">
  <meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
  <script language="javascript" src="script.js"></script>
 </head>
 <body>
  <form id="form1" method="post" runat="server">
   <asp:textbox id="completiondate" style="z-index: 101; left: 120px; position: absolute; top: 72px"
    runat="server"></asp:textbox>
   <a href="javascript:opencalendar('completiondate', true)"><img style="z-index: 102; left: 296px; width: 24px; position: absolute; top: 72px; height: 16px"
     height="16" alt="" src="img/calendar.gif" width="24"></a>
  </form>
 </body>
</html>

--------------------------------------------------------------------
selectdate.aspx.cs
----------------------------------------------------------------------
sing system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;

namespace calendar
{
 /// <summary>
 /// detail 的摘要说明。
 /// </summary>
 public class detail : system.web.ui.page
 {
  protected system.web.ui.webcontrols.textbox completiondate;
 
  private void page_load(object sender, system.eventargs e)
  {
   // 在此处放置用户代码以初始化页面
  }

  #region web 窗体设计器生成的代码
  override protected void oninit(eventargs e)
  {
   //
   // codegen: 该调用是 asp.net web 窗体设计器所必需的。
   //
   initializecomponent();
   base.oninit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void initializecomponent()
  {   
   this.load += new system.eventhandler(this.page_load);

  }
  #endregion
 }
}

 

===========================================================================
calendar.aspx
=========================================================================

<%@ page language="c#" codebehind="calendar.aspx.cs" autoeventwireup="false" inherits="calendar.webform1" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
 <head>
  <title>webform1</title>
  <meta name="generator" content="microsoft visual studio .net 7.1">
  <meta name="code_language" content="c#">
  <meta name="vs_defaultclientscript" content="javascript">
  <meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
  <script language="javascript">
   function closewindow()
   {
    self.close();
   }
  </script>
 </head>
 <body>
  <form id="calendar" method="post" runat="server">
   <asp:calendar id="cal" style="z-index: 101; left: 96px; position: absolute; top: 16px" runat="server"
    borderwidth="1px" backcolor="#ffffcc" width="220px" daynameformat="firstletter" forecolor="#663399"
    height="200px" font-size="8pt" font-names="verdana" bordercolor="#ffcc66" showgridlines="true">
    <todaydaystyle forecolor="white" backcolor="#ffcc66"></todaydaystyle>
    <selectorstyle backcolor="#ffcc66"></selectorstyle>
    <nextprevstyle font-size="9pt" forecolor="#ffffcc"></nextprevstyle>
    <dayheaderstyle height="1px" backcolor="#ffcc66"></dayheaderstyle>
    <selecteddaystyle font-bold="true" backcolor="#ccccff"></selecteddaystyle>
    <titlestyle font-size="9pt" font-bold="true" forecolor="#ffffcc" backcolor="#990000"></titlestyle>
    <othermonthdaystyle forecolor="#cc9966"></othermonthdaystyle>
   </asp:calendar>
   <asp:button id="okbutton" style="z-index: 102; left: 96px; position: absolute; top: 224px" runat="server"
    text="o k"></asp:button>
   <a href="javascript:closewindow()">
    <asp:button id="cancelbutton" style="z-index: 103; left: 136px; position: absolute; top: 224px"
     runat="server" text="cancel"></asp:button>
   </a>
   <asp:label id="lbldate" style="z-index: 104; left: 216px; position: absolute; top: 232px" runat="server"></asp:label>
   <asp:dropdownlist id="monthselect" style="z-index: 105; left: 96px; position: absolute; top: 256px"
    runat="server" autopostback="true"></asp:dropdownlist>
   <asp:dropdownlist id="yearselect" style="z-index: 106; left: 248px; position: absolute; top: 256px"
    runat="server" autopostback="true"></asp:dropdownlist>
   <input id="datechosen" type="hidden" name="datechosen" runat="server">          //这个很重要
  </form>
 </body>
</html>

---------------------------------------------------------------------------------------------------------------------------
calendar.aspx.cs
--------------------------------------------------------------------------------------------------------------------------


using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using system.configuration;

namespace calendar
{
 /// <summary>
 /// webform1 的摘要说明。
 /// </summary>
 public class webform1 : system.web.ui.page
 {
  protected system.web.ui.webcontrols.calendar cal;
  protected system.web.ui.webcontrols.button okbutton;
  protected system.web.ui.webcontrols.button cancelbutton;
  protected system.web.ui.webcontrols.label lbldate;
  protected system.web.ui.webcontrols.dropdownlist monthselect;
  protected system.web.ui.htmlcontrols.htmlinputhidden datechosen;
  protected system.web.ui.webcontrols.dropdownlist yearselect;
 
  private void page_load(object sender, system.eventargs e)
  {
   
   if (!page.ispostback)
   {
    string selected = request.querystring["selected"];
    string id = request.querystring["id"];
    string form = request.querystring["formname"];
    string postback = request.querystring["postback"];
    
    cal.firstdayofweek = (system.web.ui.webcontrols.firstdayofweek)1;//(system.web.ui.webcontrols.firstdayofweek)convert.toint32(configurationsettings.appsettings[global.cfgkeyfirstdayofweek]);   
   
    try
    {
     cal.selecteddate = cal.visibledate = convert.todatetime(selected);
    }
    catch
    {
     cal.selecteddate = cal.visibledate = datetime.today;
    }
    
    fillcalendarchoices();
    selectcorrectvalues();

    okbutton.attributes.add("onclick", "window.opener.setdate('" + form + "','" + id + "', document.calendar.datechosen.value," + postback + ");");
    cancelbutton.attributes.add("onclick", "closewindow()");
   }// 在此处放置用户代码以初始化页面
  }
  private void fillcalendarchoices()
  {
   datetime thisdate = new datetime(datetime.today.year,1,1);
   for (int x=0; x<12; x++)
   {
    listitem li = new listitem(thisdate.tostring("mmmm"), thisdate.month.tostring());
    monthselect.items.add(li);
    thisdate = thisdate.addmonths(1);
   }

   for (int y=1994; y <= thisdate.year; y++)
   {
    yearselect.items.add(y.tostring());
   }
  }
 
  private void selectcorrectvalues()
  {
   lbldate.text = cal.selecteddate.toshortdatestring();
   datechosen.value = lbldate.text;
   monthselect.selectedindex = monthselect.items.indexof(monthselect.items.findbyvalue(cal.selecteddate.month.tostring()));
   yearselect.selectedindex = yearselect.items.indexof(yearselect.items.findbyvalue(cal.selecteddate.year.tostring()));
  }
  private void cal_selectionchanged(object sender, system.eventargs e)
  {
   cal.visibledate = cal.selecteddate;
   selectcorrectvalues();
  }

  private void monthselect_selectedindexchanged(object sender, system.eventargs e)
  {
   cal.selecteddate = cal.visibledate
    = new datetime(convert.toint32(yearselect.selecteditem.value),
    convert.toint32(monthselect.selecteditem.value), 1);;
   selectcorrectvalues();
  }

  private void yearselect_selectedindexchanged(object sender, system.eventargs e)
  {
   cal.selecteddate = cal.visibledate
    = new datetime(convert.toint32(yearselect.selecteditem.value),
    convert.toint32(monthselect.selecteditem.value), 1);;
   selectcorrectvalues();
  }

  #region web 窗体设计器生成的代码
  override protected void oninit(eventargs e)
  {
   //
   // codegen: 该调用是 asp.net web 窗体设计器所必需的。
   //
   initializecomponent();
   base.oninit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void initializecomponent()
  {   
   this.cal.selectionchanged += new system.eventhandler(this.cal_selectionchanged);
   //this.okbutton.click += new system.eventhandler(this.okbutton_click);
   //this.cancelbutton.click += new system.eventhandler(this.cancelbutton_click);
   this.monthselect.selectedindexchanged += new system.eventhandler(this.monthselect_selectedindexchanged);
   this.yearselect.selectedindexchanged += new system.eventhandler(this.yearselect_selectedindexchanged);
   this.load += new system.eventhandler(this.page_load);
   this.id = "calendar";

  }
  #endregion

  private void cancelbutton_click(object sender, system.eventargs e)
  {
  
  }

  private void okbutton_click(object sender, system.eventargs e)
  {
  
  }
 }
}


==========================================================================================
script.js
===================================================================================
var popup;

function opencalendar(idname, postback)
{
 popup = window.open('calendar.aspx?formname=' + document.forms[0].name +
  '&id=' + idname + '&selected=' + document.forms[0].elements[idname].value + '&postback=' + postback,
  'popupcal',
  'width=285,height=420,left=200,top=250');
}

function setdate(formname, id, newdate, postback)
{
 eval('var theform = document.' + formname + ';');
 popup.close();
 theform.elements[id].value = newdate;
 if (postback)
  __dopostback(id,'');

=============================================================================

< <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值