Updating User Controls based on result of another control

Question

I'm new to ASP.NET C# and trying to accomplish the following:

Have a Default.aspx page with two user controls (Control1.ascx and Control2.ascx) Both user controls are within UpdatePanels.

Need the TextBox on the second user control disabled until the TextBox on the first control has been validated. Once validated, TextBox on user control2 needs to be enabled.

These user controls will be re-used on multiple pages. Help is appreciated. If I need to post some code let me know.

Here's code sample:

Default.aspx

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" 
      CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="Control1.ascx" tagname="CTL1"  tagprefix="uc1" %>
<%@ Register src="Control2.ascx" tagname="CTL2"  tagprefix="uc2" %>

<uc1:CTL1 Id="CTL1" runat="Server" UpdateMode="Conditional"/>
<uc2:CTL2 Id="CTL2" runat="Server" UpdateMode="Conditional"/>

Default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Control1.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Control1.ascx.cs" Inherits="Control1" %>
 <asp:UpdatePanel ID="UpdatePanel_Fld1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
  <asp:TextBox ID="TextBox_Fld1" runat="server" Enabled="True" ></asp:TextBox>
  <asp:ImageButton ID="ImageButton_ValidateFld1" runat="server" ImageUrl="~/images/validate.jpg"
      onclick="ImageButton_ValidateFld1_Click" />
  <asp:Label ID="LabelFld1Summary" runat="server" >&nbsp;</asp:Label>
  </ContentTemplate>
 </asp:UpdatePanel>  

Control1.ascx.cs

  public partial class Control1 : System.Web.UI.UserControl
   {
       protected void Page_Load(object sender, EventArgs e)
       {
       }
       public void ImageButton_ValidateFld1_Click(object sender, ImageClickEventArgs e)
       {
           LabelFld1Summary.Text = "Validated";
       }
   }

Control2.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Control2.ascx.cs" Inherits="Control2" %>
 <asp:UpdatePanel ID="UpdatePanel_Fld2" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
  <asp:TextBox ID="TextBox_Fld2" runat="server" Enabled="False"></asp:TextBox>
  <asp:ImageButton ID="ImageButton_ValidateFld2" runat="server" ImageUrl="~/images/validate.jpg"
      onclick="ImageButton_ValidateFld2_Click" />
  <asp:Label ID="LabelFld2Summary" runat="server" >&nbsp;</asp:Label>
  </ContentTemplate>
 </asp:UpdatePanel>  

Control2.ascx.cs

public partial class Control2 : System.Web.UI.UserControl
   {
       protected void Page_Load(object sender, EventArgs e)
       {
       }
       public void ImageButton_ValidateFld2_Click(object sender, ImageClickEventArgs e)
       {
           LabelFld2Summary.Text = "Validated";
       }
   }

Answer 1

我建议使用简单的JavaScript或让jQuery进行启用/禁用操作，将一些js代码添加到客户端验证脚本中

Answer 2

I suggest getting your scenario working with synchronous postbacks first, then adding the updatepanels into the mix. As a rough sketch, in a server-side OnClick handler for some button or other you can set the enabledness of the second control based on the result of validation of the first control. Then, you just need to make sure you call Update() on Control2.ascx's UpdatePanel when the asynch postback targeting Control1.ascx's UpdatePanel happens.

That said, this is going to be mildly annoying from a user's perspective. Unless the first control modulates a great deal of UI below it (like, switching to a separate control set entirely), why not just let your users enter text into both fields and validate on the combination of them?

Answer 3

I agree with Simon. jQuery would probably be the easiest way to accomplish this. you can use jQuery's ajax methods to make calls to WebMethods if you need to interact with the code behind for any reason.

I've used update panels and the ICallbackEventHandler interface ( http://madskristensen.net/post/Asynchronous-GridView-in-5-simple-steps.aspx is a good example of its use) with some success.

While I tend to stay away from UpdatePanels, I realized that they use the ICallbackEventHandler interface behind the scenes and I probably make more work for myself. The only benefit of doing it the way I did is that I don't have a bunch of garbage sitting in my ViewState (UpdatePanels love ViewState), as I've persisted it in the server-side session state.

In my case, the reason for going with the ICallbackEventHandler method over using jQuery's ajax calls and WebMethods in the code behind was that I wanted to have access to non-static fields (including my web controls). Turns out I needed to manually persist the data displayed on the page in session or otherwise and probably ended up making more work for myself in the end. It was a good chance to learn something new, but the benefits I gained from having access to the pages controls were minimal/non-existent.