首页新闻找找看学习计划

如何控制用户控件内部的div可见性问题

0
悬赏园豆:100 [待解决问题]

需求:
主页包含一个a 链接, 一个用户控件;
用户控件包含两个div块,分别为div1,div2; div1,div2分别包含button1和button2; 
初始化a 链接文本显示为link2;用户控件中对应的只显示div1块。


现在需要点击a链接的时候,如果当前文本为link2,则希望点击后文本显示为link1,同时希望用户控件中对应的只显示div2块;如果当前文本为link1,则希望点击后文本显示为link2,同时希望用户控件中对应的只显示div1块;

我用客户端回调功能写了如下代码,a链接上能正常变换文本,但用户控件中的div块的变换显示不成功;
下面是我的代码:

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="callBackTest._Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>


<%@ Register src="UserControl2.ascx" tagname="UserControl2" tagprefix="uc2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<script type="text/javascript">

    function displayRight(result) {
        document.getElementById("userconDiv").style.display = "block";

//        if (result == "link1") {
//            document.getElementById("UserControl11_div1").style.display = "none";
//            document.getElementById("UserControl11_div2").style.display = "block";
//        } else {
//            document.getElementById("UserControl11_div1").style.display = "block";
//            document.getElementById("UserControl11_div2").style.display = "none";
//        }
//        

        document.getElementById("div3").style.display = "none";

        document.getElementById("alink").innerHTML = result;
    }

    function a_callBack() {
 //       alert("aaa");
    CallBackToTheServer(document.getElementById("alink").innerHTML,"");
    }

</script>

<style type="text/css">
a:link
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: blue;
}
a:visited
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #332556;
}
a:hover
{
    color: red;
    text-decoration: underline;
}

a.lnk0:link
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #2A7290;
}
a.lnk0:visited
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #332556;
}
a.lnk0:hover
{
    color: red;
    text-decoration: underline;
}
body
{
    font-size: 13px;
}
</style>
<body>
    <form id="form1" runat="server">

    <div>
    <a href="" id="alink" runat="server" onclick="a_callBack();return false;">link1</a>
    </div>

     <div id="userconDiv">
    
         <uc2:UserControl2 ID="UserControl21" runat="server" />
    
    </div>

   
    <div id="div3">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>


Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace callBackTest
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string callUserControl = Page.ClientScript.GetCallbackEventReference(this.UserControl21, "arg", "displayRight", "context");
                // this.alink.Attributes.Add("onclick", callUserControl);
                //   alink.Attributes["onclick"] = callUserControl;


                string strCallBack = string.Empty;
                strCallBack = "function CallBackToTheServer(arg, context) {" + callUserControl + "};";

                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallBackToTheServer", strCallBack, true);

            }
        }
    }
}



UserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl2.ascx.cs" Inherits="callBackTest.UserControl2" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode ="Conditional">
<ContentTemplate>

<div id="div1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button11" />
</div>
<div id="div2" runat="server">
    <asp:Button ID="Button2" runat="server" Text="Button22" />
</div>

</ContentTemplate>
</asp:UpdatePanel>

UserControl.ascx.cs:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace callBackTest
{
    public partial class UserControl2 : System.Web.UI.UserControl, ICallbackEventHandler
    {
        private string eventArgs;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.div2.Style.Add("display", "");
                this.div1.Style.Add("diaplay", "block");
            }


        }

        public string GetCallbackResult()
        {
            string linkText = "";
            if (eventArgs.Equals("link1"))
            {
                this.div1.Style.Add("display", "");
                this.div2.Style.Add("diaplay", "block");
                linkText = "link2";
            }
            else
            {
                this.div1.Style.Add("display", "block");
                this.div2.Style.Add("diaplay", "");

                linkText = "link1";
            }
            this.UpdatePanel1.Update();
            return linkText;
        }

        public void RaiseCallbackEvent(string eventArgument)
        {
            this.eventArgs = eventArgument;
       //     throw new NotImplementedException();
        }
    }
}


分析原因大概是:    this.div1.Style.Add("display", "");
                this.div2.Style.Add("diaplay", "block");这些只是在服务器端做的处理,但并没有真正告诉前端页面去做处理;因为如果在Default.aspx中强制的用js来控制用户控件内部的div块是可以正常显示的,但我觉得这不是我想要的,请问高手,我如何才能在这种客户端回调模型中,在用户控件的后台就能达到改变div1\div2的显示功能。

问题补充:

初始化a 链接文本显示为link2;用户控件中对应的只显示div1块。

 

这个可能在我实现代码中是相反的,不过没关系,不影响我的需要,即:

需要点击a链接的时候,如果当前文本为link2,则希望点击后文本显示为link1,同时希望用户控件中对应的只显示div2块;如果当前文本为link1,则希望点击后文本显示为link2,同时希望用户控件中对应的只显示div1块;(显示块的顺序可能在代码中不一样,但没有关系,大家理解这个意思就好)

ali870117的主页 ali870117 | 初学一级 | 园豆:102
提问于:2013-07-10 09:33
< >
分享
所有回答(4)
0

建议你不要用这种方式去实现

考虑用 JQUERY+AJAX

Yu | 园豆:12944 (专家六级) | 2013-07-10 09:57

能麻烦说的具体点吗,JQUERY不熟啊,我是一个初学者

支持(0) 反对(0) ali870117 | 园豆:102 (初学一级) | 2013-07-10 09:59

而且JQuery可以向用户控件发请求吗?我看到的url都是一个主页啊

支持(0) 反对(0) ali870117 | 园豆:102 (初学一级) | 2013-07-10 10:06
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>j</title>
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
        <script type="text/javascript">
$(document).ready(
    function() {
        $('a').html('Link2');
        $('#div1').css('display','');
        $('#div2').css('display','none');
        
        $('a').bind('click',function(){

           if($(this).html()=='Link2'){
                $('#div1').css('display','none');
                $('#div2').css('display','');
                $(this).html('Link1');
            } 
            else if($(this).html()=='Link1'){
                $('#div1').css('display','');
                $('#div2').css('display','none');
                $(this).html('Link2');
            }     
        });
    });
   </script>
    </head>
    <body>
<a>Link2</a>
<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>
</body>
</html>

页面切换可以这样简单实现

@ali870117: 

支持(0) 反对(0) Yu | 园豆:12944 (专家六级) | 2013-07-10 10:12

@Yu: 向服务端请求 你可以了解一下 $.ajax

支持(0) 反对(0) Yu | 园豆:12944 (专家六级) | 2013-07-10 10:13

@Yu: 非常感谢啊,但是不是我想要的,我的问题是,主页要控制用户控件内部的div显示,不是这么简单的控制当前页面的div显示问题的

支持(0) 反对(0) ali870117 | 园豆:102 (初学一级) | 2013-07-10 10:22

@ali870117: 在你的 displayRight(result) 控制不行吗 你注释掉那些是可以控制切换显示的,只是ID不对

支持(0) 反对(0) Yu | 园豆:12944 (专家六级) | 2013-07-10 11:03
0

大概看了一下内容?这仅仅是简单的前台操作 为什么要牵扯到后台呢?

是不是只要做到通过点击一个链接,控制 两个div的显隐就可以了?

TiestoRay | 园豆:687 (小虾三级) | 2013-07-10 10:20

不是的,因为后台还有其他复杂的操作,我只是反问题简化了,但还是想实现这种功能;其中之一就是控制div的显隐问题

支持(0) 反对(0) ali870117 | 园豆:102 (初学一级) | 2013-07-10 11:23
0

不赞成这么做

Meen | 园豆:321 (菜鸟二级) | 2013-07-10 11:07

原因是什么呢?

支持(0) 反对(0) ali870117 | 园豆:102 (初学一级) | 2013-07-10 11:23
0

ajax吧

Tom.汤 | 园豆:1838 (小虾三级) | 2013-07-10 12:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册