web程序开发中遇到的几个小问题-2

case 1： 页面中有一个日历控件，显示当月的培训日程信息，控件上方有一些过滤选项，其中一个dropdownlist是“课程类型”。由于课程类型很多，希望在list里只显示日期在当月内的课程类型。也就是说，当用户选择在不同月份间切换时，dropdownlist中的课程类型要能实时更新。

P：日历控件为基于JQuery的fullCalendar，关于fullCalendar的相关使用可以参考这里。用户切换月份的操作发生在客户端，切换发生后，月份信息要能传递到服务器端代码进行处理，通过查询DB得到相应的课程类型并更新dropdownlist，并且不用刷新整个页面。

S：

1. 首先是fullCalendar的使用方式和获得当前月信息的相关方法：

在页面中有<div id="divCalendar"></div>，则在该div中使用fullCalendar的js代码为：$('#divCalendar').fullCalendar({//options...});

常用到的主要有三方面内容：

options -- 设置日历的显示属性等；

callback -- 设置日历相关事件触发时的回调函数；

methods/function -- 调用fullCalendar插件提供的相关方法；

我用到的例子如下：

$('#divCalendar').fullCalendar({

　　//options: optionName:optionValue

　　viewDisplay: function(curView) {//callback 'viewDisplay'： 日历加载或用户改变当前显示日期时触发
            getCurCalendarView();
            $("[id$='btnHdnBind']").click();
        }

});

function getCurCalendarView() {
    var view = $('#divCalendar').fullCalendar('getView');　　//method 'getView'：获得一个包含日历当前显示信息的view对象
    var sStart = $.fullCalendar.formatDate(view.start, 'yyyy-MM-dd');　　//function 'formatDate'：将得到的日期对象格式化为特定字符串
    var sEnd = $.fullCalendar.formatDate(view.end, 'yyyy-MM-dd');　　//如果直接将view.start返回为字符串，其具体内容随浏览器类型和设置的不同而不同
    $("[id$='txtAreaStartDate']").val(sStart);
    $("[id$='txtAreaEndDate']").val(sEnd);
}

2. 将日历当前月份改变事件和相关信息传到服务器端代码：

貌似有多种js触发后台操作的途径，我使用了比较hack的一种。如上面代码所示，在aspx中定义一个隐藏的服务器端button 控件：

<div style="display:none">
      <asp:Button ID="btnHdnBind" runat="server" Text="Button" οnclick="btnHdnBind_Click" />
</div>

另外，隐藏的input域用来保存得到的月份起始日期：

<input type="hidden" id="txtAreaStartDate" name="txtAreaStartDate"/>
<input type="hidden" id="txtAreaEndDate" name="txtAreaEndDate" />

当fullCalendar的viewDisplay触发时，我们的callback会触发btnHdnBind的click处理函数：

protected void btnHdnBind_Click(object sender, EventArgs e)

{
            string sStart = Request.Form["txtAreaStartDate"];
            string sEnd = Request.Form["txtAreaEndDate"];

　　　　 //use new start and end date to query...

}

这样，前台的用户切换日历月份时，后台就有机会做相应的处理了。

3. 使用UpdatePanel防止页面整体刷新：

我们希望日历的月份切换 事件仅对课程类型的dropdownlist有影响，因此，要将执行绑定的btnHdnBind和被绑定数据的repeater放在一个UpdatePanel中。UpdatePanel的加入会打乱原有的页面布局，因为经过ASP.NET的处理，它会在发回客户端的页面中呈现为一个<div>，为了防止这种情况，只需设置属性RenderMode="Inline" 即可。

case 2：关于页面跳转时的处理

P1：当处理某一数据时，从当前页面跳转到新的处理页面，在从处理页面返回时，希望当前页面的内容得到更新。

原有js代码：history.back(); -- 返回历史记录中的上一页面，但并不执行刷新。

S1：改为：window.location.href = document.referrer; -- 返回链接到当前页面的上一页面，会执行刷新；（如果是直接从浏览器地址栏输入新的url，则在新页面中document.referrer为空，不过我做这个项目不是这种情况，目前看还比较好用）

P2：页面上有一日程消息列表，用户点击其上某条消息时，即进入该条消息所代表的日程信息页面，由于日程信息可能已经被删除，需要在跳转前判断这一情况，若已删除，应弹出提示框并停留在当前页面。若使用Response.Redirect(url)进行跳转，则跳转前的弹出框无法被执行。

S2：改为使用js代码 window.location= url 来完成跳转，在后端代码实现如下：

                    StringBuilder sbMsg = new StringBuilder();
                    sbMsg.Append("<script language= \"javascript\">");
                    if (/*该条日程信息不存在*/)
                    {
                        sbMsg.Append("alert(\"");
                        sbMsg.Append("the schedule info has been deleted!");
                        sbMsg.Append("\");");
                    }
                    sbMsg.Append("window.location=\"");
                    sbMsg.Append(/*根据日程信息是否存在得到要跳转的页面*/);
                    sbMsg.Append("\";</script>");
                    Response.Write(sbMsg.ToString());

这样，alert()可以在跳转前弹出。

转载于:https://www.cnblogs.com/hanginthere/archive/2011/02/17/1956316.html