如何控制用户控件内部的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块；（显示块的顺序可能在代码中不一样，但没有关系，大家理解这个意思就好）
所有回答(4)
0
建议你不要用这种方式去实现
考虑用 JQUERY+AJAX
能麻烦说的具体点吗，JQUERY不熟啊，我是一个初学者
而且JQuery可以向用户控件发请求吗？我看到的url都是一个主页啊
<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:
@Yu: 向服务端请求 你可以了解一下 $.ajax
@Yu: 非常感谢啊，但是不是我想要的，我的问题是，主页要控制用户控件内部的div显示，不是这么简单的控制当前页面的div显示问题的
@ali870117: 在你的 displayRight(result) 控制不行吗 你注释掉那些是可以控制切换显示的，只是ID不对
0
大概看了一下内容？这仅仅是简单的前台操作 为什么要牵扯到后台呢？
是不是只要做到通过点击一个链接，控制 两个div的显隐就可以了？
不是的，因为后台还有其他复杂的操作，我只是反问题简化了，但还是想实现这种功能；其中之一就是控制div的显隐问题
0
不赞成这么做
原因是什么呢？
0
ajax吧
