Archive for April, 2008

Event bubble up in user controls

Sunday, April 6th, 2008

As I was new in MVP and NMock, I was given a small assignment to code. The goal was to be able to add user controls dynamically in an aspx file by clicking an “Add control”. Then each control will have a delete button in them, which upon click will remove the control from the page. There was also one more thing, upon changes in the user control, each change will appear in a panel in the Default page.

Now it sounded pretty easy in the beginning. But to implement things in the MVP architecture created the first barrier. It was hard to put the mindset first on MVP. To take the control away from the web project made the event handling a bit tricky for me. There are actually 2 type of event which needed communication between the dynamically created user controls and the parent aspx page –

  • Upon deletion let the aspx page know which control was deleted, and update the view state. And do this by the Presenter.
  • Upon change in content of a control, let the aspx file know to update the change log.

The first event was handled in the following way-
( Code in the ascx.cs file ( the View) )

public delegate void DeleteControlDelegate(string id);
public event DeleteControlDelegate DeleteControl;

protected void btnDelete_Click(object sender, EventArgs e)

if (DeleteControl != null)




Now the Presenter for the Parent aspx page has a method with the same signature of the DeleteControl(id), UpdateViewState.

public void UpdateViewState(string id)

home.ControlList = _home.ControlList.Replace(id,String.Empty);

_home.ControlList = _home.ControlList.Replace(“||”, “|”);

_home.ActionList.Add(String.Format(“Control #{0} been removed”, id.Substring(0, 5)));


Now who to hook up the two? Thats actually the easy part. See, when I added the control dynamically in the aspx page I hooked it up as follows –

public string AddControl(string type, string id, bool isNew)

lblMsg.Text = String.Empty;
DemoModule uc = (DemoModule)Page.LoadControl(Constants.PATH);
uc.Type = type;
uc.DeleteControl += new DemoModule.DeleteControlDelegate(_homePresenter.UpdateViewState);
uc.PropagateAction = this.Show_Activity;
if (isNew)

uc.ID = System.Guid.NewGuid().ToString();


uc.ID = id;pnlControl.Controls.Add(uc);

this.ActionList.Add(String.Format(“Control #{0} has been added.”, uc.ID.Substring(0,5)));


return uc.ID;


The second event was rather easy. As I didnt have to bubble up dynamic information from the user control, just the action was bubbling up, I used the systems event handler delegate to work for me ( this.Show_Activity ).

protected void Show_Activity(object sender, EventArgs e)

Control ctl = (Control)sender;
string controlName = ctl.GetType().Name;
string text = _homePresenter.FormatMessage(controlName,”change”);
this.ViewState[Constants.CHANGELOG] = this.ViewState[Constants.CHANGELOG] + “|” + text;


Its the simplest solution. But its not complete, if we want to bubble up what was changed, the specific information, we would use the first custom delegate. Even still the code is messy, there is too much code and decisions in the code behind file. To clear it up, I could create an object that will emulate the user control. Presenter will update the object and view will just show it. But that looks like too much work for something so small. But as I now know, its quite easy if needed :).

the sample solution is here