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

初次开发web相关的工程，接触到ASP.NET，JQuery，Ajax等，对遇到的一些小问题做个总结，虽然十有八九使用的是笨办法～

case 1：页面中一个repeater，含有用户信息列表，表中每一行的最后一列为一个button，点击后要求在该行右边相应位置弹出交互框，显示当前该用户的相关信息并能即时对该信息进行修改保存。

　　P1：弹出框的显示和postback -- 弹出框使用<div>实现，初始状态为“Hidden” （display:none），点击按钮后将其显示出来（“Visilbe”--display:block）。 最直接的方法：在aspx中将style设置为“Hidden”，在处理button事件的js脚本中将其设置为“Visible”。问题是弹出框中显示的信息需要从后台读取，从而导致postback发生，页面重新加载，在脚本中设置的style将被默认值覆盖。另外，弹出框的显示位置也是通过脚本动态设置，在postback时会发生同样问题。

　　S1：通过在aspx中加入隐藏域的方式来保存相关信息。具体实现如下：

　　　　<div id="myDiv" class="<%=this.DivVisibleStyle %>" style="<%=this.DivPositionStyle %>">
            <input type="hidden" id="hdnDivClass" name="hdnDivClass" value="<%=this.DivVisibleStyle%>" />
            <input type="hidden" id="hdnDivTop" name="hdnDivTop"/>
            <input type="hidden" id="hdnDivLeft" name="hdnDivLeft" />

　　其中红色标记为后台文件中与之相应的变量名称。

　　在aspx中添加这些隐藏域后，在事件脚本中对其作相应的属性修改：

　　$("[id$='btnId']").click(function() {
        var ay = $(this).offset().top;
        var ax = $(this).offset().left + ($(this).width() + $(this).parent().width()) / 2 + 9;
        $("#myDiv").css({
            top: ay - 7,
            left: ax
        })
        $("#hdnDivClass").val("Visible");
        $("#hdnDivTop").val(ay - 7);
        $("#hdnDivLeft").val(ax);
    });

　　在后台文件中，用相应的变量保存这些修改后的值：

　　private static string divVisibleStyle;
      private static string divPositionStyle;

　　protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                initControls();
                ......
            }
            else
            {
                divVisibleStyle= Request.Form["hdnDivClass"];
                if (!string.IsNullOrEmpty(Request.Form["hdnDivTop"]) && !string.IsNullOrEmpty(Request.Form["hdnDivLeft"]))
                {
                    divPositionStyle= string.Format("position:absolute; top:{0}px; left:{1}px;", Request.Form["hdnDivTop"], 　　　　　　　　     Request.Form["hdnDivLeft"]);
                }
            }

　　这样，在postback后页面重新加载时，aspx会读取保存的后台变量值来进行初始化，页面的状态也就得到了延续。

　　P2：弹出框中信息的动态加载 -- repeater中每一行为列表中的一条用户信息，当点击某一行上的button时，弹出框的显示信息需要根据该行所代表用户的ID进行提取。没有找到一种比较直接的将该ID信息传入后台处理函数的方法。

　　S2：使用了一种比较笨的方法：在aspx中添加一个隐藏的textBox：

　　    <div style="display:none">
            <asp:TextBox ID="txtUserId" runat="server" AutoPostBack="true" ></asp:TextBox>
        </div>

　　  为了在后台代码中使用，它必须是一个服务器端控件；在js脚本中，这样为它赋值：

　　   function setID(userId) {
         var id = $("[id$='txtUserId']"); //对于服务器端控件，可以这样使用JQuery选择器得到。对于应用了母板的页面（id自动被修改）这个方法同样适用
         $(id).val(userId);
        }

　　调用这个js function的aspx代码如下：

　　   <asp:Button ID="btnId" runat="server" CommandName="bindAuthUser"  OnClientClick=<%# "return setID('" + Eval("userOid") + "')" %> ></asp:Button>

　　其中，Eval("userOid")是从和repeater绑定的对象中获得相应的id值；OnClientClick定义了在客户端执行的button事件函数；由于repeater中的控件id在外部不可用，要想在服务器端处理该button的事件，只能定义一个command  name，然后在后台文件中如下处理：

　　protected void rptXXX_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            if (e.CommandName == "bindAuthUser")
            {
                string userId = txtUserId.Text;
                //do sth with userId...
            }
        }

　　  使用刚刚在js脚本中赋值的txtUserId获得userId来做后台的查询等操作。

case 2：动态设置控件的显示颜色

　　  P：在日历控件中显示一系列事件。事件分为几类，每一类有特定的显示颜色，要求颜色可以由管理员自定义。事件实际上是由一些<a>标签表示的。

　　  S：颜色的值从后台保存的xml文件中读出，并通过后台注册的脚本在页面加载时执行，具体如下：

　　　　 ......

　　  　  Page currentPage = HttpContext.Current.CurrentHandler as Page;
            string csName = "colorScript";
            Type csType = currentPage.GetType();
            if (!currentPage.ClientScript.IsStartupScriptRegistered(csType, csName))
            {
                StringBuilder sbScript = new StringBuilder();
                sbScript.Append("<script type=text/javascript>");
                sbScript.Append("setColor();");
                sbScript.Append("function setColor() {");
                foreach event type..
                {
                    sbScript.Append("$(\"#divCalendar .");
                    sbScript.Append(eventName);
                    sbScript.Append(" a\").css(\"background-color\",\"");
                    sbScript.Append(colorValue);
                    sbScript.Append("\").css(\"border\",\"solid 1px ");
                    sbScript.Append(colorValue);
                    sbScript.Append("\");");
                }
                sbScript.Append("}");
                sbScript.Append("</script>");
                ScriptManager.RegisterStartupScript(currentPage, csType, csName, sbScript.ToString(), false);

　　　　　  ......

　　　　　　　}

　　　这里的脚本用JQuery的css函数将相应的<a>标签的css设置为特定值，并通过RegisterStartupScript将脚本注册到页面。一个需要注意的地方是ASP.NET不保证这段注册的脚本的具体执行时间，因此这里做的修改有可能被原有的默认css设定覆盖。为了保险起见，可以在js文件里自己确定能使修改起作用的位置，调用这里定义的setColor()函数。

　　   先写这点儿吧。

转载于:https://www.cnblogs.com/hanginthere/archive/2011/02/10/1950650.html