usercontrol中的UpdatePanel不更新客户端控件
本文关键字：客户端 控件 更新 中的 UpdatePanel usercontrol | 更新日期: 2023-09-27 18:00:16
我已经为此挠头好几个小时了。我有一个用户控件，它有标签、文本框等。所有这些都封装在一个更新面板中。我在uc中有一个按钮，当点击它时，它会更改标签。
当我把这个uc放在表单/页面中时，无论我做什么，我都看不到标签的变化。它被更改为服务器端，而不是客户端。我总是尝试更新模式，有条件的触发器，我尝试了所有的。脚本管理器很好，如果我把代码复制到它自己的页面上，它就可以正常工作。脚本管理器在页面上，而不是uc，所以不是这样。
有人举过这样的例子吗？
aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/KezberProjectManager.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="KezberProjectManager.WebForm1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<%@ Register assembly="KezberProjectManager" namespace="KezberProjectManager" tagprefix="cc1" %>
<%@ Register src="ProjectView.ascx" tagname="ProjectView" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<uc1:ProjectView ID="ProjectView1" runat="server" PID="76" />
</div>
</asp:Content>
uc:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProjectView.ascx.cs" Inherits="KezberProjectManager.ProjectView1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl" runat="server">
<div id="kez_header">
<table class="style1">
<tr>
<td>
<h4 runat="server" id="main_label">
Project</h4>
</td>
<td align="right" valign="middle">
<asp:Button ID="btnTasks" runat="server" CssClass="btn btn-primary"
Text="Tasks" Width="81px" onclick="btnTasks_Click" />
</td>
</tr>
</table>
</div>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="<%=txtTitle.ClientID%>">
Title</label>
<div class="controls">
<asp:TextBox ID="txtTitle" placeholder="Title" runat="server"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtDescription.ClientID%>">
Description</label>
<div class="controls">
<asp:TextBox ID="txtDescription" placeholder="Description" runat="server" Rows="3" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=lblEstimatedHours.ClientID%>">
Estimated Hours</label>
<div class="controls">
<label class="checkbox label-block">
<div id="lblEstimatedHours" runat="server">
Data</div>
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="<%=txtColor.ClientID%>">
Color</label>
<div class="controls">
<asp:TextBox ID="txtColor" runat="server" Width="80px" MaxLength="6"></asp:TextBox>
<asp:FilteredTextBoxExtender ID="txtColor_FilteredTextBoxExtender"
runat="server" TargetControlID="txtColor" ValidChars="0123456789abcdefABCDEF">
</asp:FilteredTextBoxExtender>
<asp:ColorPickerExtender ID="txtColor_ColorPickerExtender" runat="server"
TargetControlID="txtColor" SampleControlID="btnColor" PopupButtonID="btnColor">
</asp:ColorPickerExtender>
<asp:Button ID="btnColor" runat="server" Text="" CssClass="btn-color" Width="25px" />
</div>
</div>
<asp:Button CssClass="btn" ID="btnEdit" runat="server" Text="Save Changes" onclick="btnEdit_Click"
/>
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnEdit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
uc代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Transactions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using LibKezberProjectManager;
using LibKezberProjectManager.Logic;
using LibKezberProjectManager.Utility;
using LibKezberProjectManager.Web;
namespace KezberProjectManager
{
public partial class ProjectView1 : System.Web.UI.UserControl
{
private int workingID = -1;
private string pid;
private Project workingProject = null;
public String PID
{
get
{
return pid;
}
set
{
pid = value;
if (!HandleRequestType())
{
HandleOnClickDisabled();
HandleMainLabel();
pnl.DefaultButton = "btnEdit";
if (workingProject != null)
{
PopulateEditMode();
}
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnTasks_Click(object sender, EventArgs e)
{
// Response.Redirect(String.Format("Tasks.aspx?id={0}", workingProject.ProjectID));
}
public void HandleOnClickDisabled()
{
//btnEdit.Attributes.Add("onclick", "this.disabled=true;" + GetPostBackEventReference(btnEdit).ToString());
}
public bool HandleRequestType()
{
string strId = pid;
bool invalidPage = false;
//id is required, can be new or valid id
if (strId == null)
{
invalidPage = true;
}
else
{
int.TryParse(strId, out workingID);
workingProject = ProjectManager.GetProject(workingID);
//must be valid project
if (workingProject == null)
{
invalidPage = true;
}
}
if (invalidPage)
{
//Response.Redirect("Forbidden.aspx");
}
return invalidPage;
}
public void HandleMainLabel()
{
main_label.InnerText = workingProject.ProjectTitle;
}
public void PopulateEditMode()
{
txtTitle.Text = workingProject.ProjectTitle;
txtDescription.Text = workingProject.ProjectDescription;
if (workingProject.EstimatedHours != null)
lblEstimatedHours.InnerText = workingProject.EstimatedHours.ToString();
else
lblEstimatedHours.InnerText = "";
if (workingProject.Color != null)
{
System.Drawing.Color color = System.Drawing.Color.FromArgb((int)workingProject.Color);
txtColor.Text = String.Format("{0:X2}{1:X2}{2:X2}", color.R, color.G, color.B);
}
}
protected void btnEdit_Click(object sender, EventArgs e)
{
KezErrorList errors = new KezErrorList();
bool didSomething = false;
bool changedColor = false;
using (var scope = new TransactionScope())
{
try
{
if (txtTitle.Text != workingProject.ProjectTitle
&& txtTitle.Text.Length > 0)
{
didSomething = true;
bool success = ProjectManager.ChangeProjectTitle(
workingProject.ProjectID, txtTitle.Text);
if (!success)
{
errors.Add("There was a problem changing the title.");
}
}
else if (txtTitle.Text != workingProject.ProjectTitle)
{
errors.Add("A title is required.");
}
if (txtDescription.Text != workingProject.ProjectDescription)
{
didSomething = true;
bool success = ProjectManager.ChangeProjectDescription(
workingProject.ProjectID, txtDescription.Text);
if (!success)
{
errors.Add("There was a problem changing the description.");
}
}
try
{
System.Drawing.Color color =
ColorConversion.GetSystemDrawingColorFromHexString("#" + txtColor.Text);
if (workingProject.Color == null || color.ToArgb() != (int)workingProject.Color)
{
changedColor = true;
if (!ColorManager.ChangeProjectColor(workingProject.ProjectID, color.ToArgb()))
{
errors.Add("There was a problem changing the color.");
}
}
}
catch (Exception)
{
errors.Add("The color provided is invalid.");
}
if (errors.Count() == 0 && didSomething)
{
if (!SyncManager.Instance.UpdateProject(workingProject))
{
errors.Add("There was a problem syncing with 1 or more sources.");
}
}
if (errors.Count() == 0)
{
scope.Complete();
}
}
catch (Exception ex)
{
errors.Add("An unknown error has occured.");
}
}
if (errors.Count() > 0)
{
// master.ShowErrorAlert(errors.GetErrorString());
}
else if (didSomething || changedColor)
{
//master.ShowSuccessAlert();
//refresh
if (workingProject != null)
{
workingProject = ProjectManager.GetProject(workingProject.ProjectID);
}
HandleMainLabel();
PopulateEditMode();
}
UpdatePanel1.Update();
}
}
}
主：
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="KezberProjectManager.master.cs" Inherits="KezberProjectManager.KezberProjectManager" %>
<!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>
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="assets/css/kezblu.styles.css" rel="stylesheet"/>
<style type="text/css">
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/kezcommon.js"></script>
<script type="text/javascript">
$(document).ready
(
function () {
createAutoClosingAlert('.success_alert', 6000);
}
);
function createAutoClosingAlert(selector, delay) {
var alert = $(selector).alert();
window.setTimeout(function () { $(alert).slideUp() }, delay);
}
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="default.aspx">KezBlu</a>
<div class="nav-collapse collapse">
<ul class="nav">
<asp:Repeater runat="server" id="MenuRepeater">
<headertemplate>
</headertemplate>
<itemtemplate>
<%# Eval("Content") %>
</itemtemplate>
<footertemplate>
</footertemplate>
</asp:Repeater>
</ul>
<div id="auth">
<asp:HyperLink id="lnkSignIn" runat="server">Sign In</asp:HyperLink>
<br />
<asp:LinkButton ID="lnkSignOut" runat="server" onclick="lnkSignOut_Click">Sign Out</asp:LinkButton>
</div>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="wrap">
<div id="content">
<div id="alerts">
<div class="bs-docs-example">
<div runat="server" id="success_alert" class="success_alert alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<div runat="server" id="success_alert_text">
</div>
</div>
</div>
<div class="bs-docs-example">
<div runat="server" id="error_alert" class="error_alert alert alert-error fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<div runat="server" id="error_alert_text">
</div>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>
我认为您的用户控件中缺少公开内部UpdatePanel控件的UpdateMode属性和Update方法的代码。您需要这样做，以便外部源可以显式刷新用户控件的内容。您需要以下内容：
public UpdatePanelUpdateMode UpdateMode
{
get { return this.UpdatePanel1.UpdateMode; }
set { this.UpdatePanel1.UpdateMode = value; }
}
public void Update()
{
this.UpdatePanel1.Update();
}
现在，您可以将用户控件添加到.aspx页面，并以声明方式设置内部UpdatePanel控件的UpdateMode属性：
<div>
<uc1:ProjectView ID="ProjectView1" runat="server" UpdateMode="Conditional" />
</div>
这个过程在以下文件中有很好的解释：
将ASP.NET UpdatePanel控件与用户控件一起使用