Jun
27
2009

How to use ASP.NET AJAX UpdatePanel in ModalPopup

This design not only shows you how to use ASP.NET UpdatePanel inside ModalPopup, it also shows a way of having multiple dynamically created controls that act as triggers to show ModalPopup, and the content of ModalPopup will change depending on the control that triggered the Popup. Then user can perform an action that does partial update inside the ModalPopup. You will only need one ModalPopupExtender control by using this design.

The following diagram shows how the controls are structured in the .aspx page

UpdatePanel_In_ModalPopup_Design

As you can see here, we have an UpdatePanel inside the ModalPopup, and the ModalPopup is in the another UpdatePanel along with other dynamic controls on page.

The next diagram shows the actual look of the page.

UpdatePanel_In_ModalPopup_

More...

Feb
29
2008

How to make DotNetBlogEngine search box to work with AJAX AutoCompleteExtender control

Earlier today I was thinking: um.. It would be good to have AJAX auto complete on search box of my blog.

It only takes you about 10mins to do this (Thanks to ASP.NET AJAX Control Toolkit).

There are many articles/posts about how to use AutoCompleteExtender control from ASP.NET AJAX Control Toolkit already. So I will focus on how to make it work with DotNetBlogEngine default searchbox

Step 1.

Because AutoCompleteExtender will not work with current HTML textbox comes with default searchbox. We have to change it to ASP.NET Textbox control.

//SearchBox.cs
private void BuildHtml()
    {
      StringBuilder sb = new StringBuilder();
      /*
      sb.AppendLine("<div id=\"searchbox\">");
      sb.Append("<label for=\"searchfield\" style=\"display:none\">Search</label>");
      sb.AppendFormat("<input type=\"text\" value=\"{0}\" id=\"searchfield\" onkeypress=\"if(event.keyCode==13) return Search('{1}')\" onfocus=\"SearchClear('{2}')\"    onblur=\"SearchClear('{2}')\" />", BlogSettings.Instance.SearchDefaultText, Utils.RelativeWebRoot, BlogSettings.Instance.SearchDefaultText);
      */ 
  
      /* ------------------------------------ code omitted ------------------------------------  */
      sb.AppendLine("</div>");
      _Html = sb.ToString();

    }

we remove above hard coded HTML textbox control from the method and then override CreateChildControls() to create new ASP.NET textbox control - we also preserved all the settings from default html textbox control.

protected override void CreateChildControls()
{
    base.CreateChildControls();
    TextBox newSearchBox = new TextBox();
    newSearchBox.ID = "searchfield";
    newSearchBox.Attributes["value"] = string.Format("{0}", BlogSettings.Instance.SearchDefaultText);
    newSearchBox.Attributes["onkeypress"] = string.Format("if(event.keyCode==13) return Search('{0}')", Utils.RelativeWebRoot);
    newSearchBox.Attributes["onfocus"] = string.Format("SearchClear('{0}')", BlogSettings.Instance.SearchDefaultText);
    newSearchBox.Attributes["onblur"] = string.Format("SearchClear('{0}')", BlogSettings.Instance.SearchDefaultText);
    this.Controls.Add(newSearchBox);
}

In RenderControl(), we make sure new textbox control will get rendered within default <div>. So we are not breaking the look and feels.

public override void RenderControl(HtmlTextWriter writer)
{
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("<div id=\"searchbox\">"); //default div tag moved to here
        sb.Append("<label for=\"searchfield\" style=\"display:none\">Search</label>"); //default label tag moved to here
        writer.Write(sb.ToString());
        this.Controls[0].RenderControl(writer); //render new textbox control
        writer.Write(Html);
}  

Now you have ASP.NET textbox control for your search box. But still few minor tweaks need to be done.

Step 2.

Fix up JavaScript and Styles.

Because in blog.js there are some places hard coded "searchfield" for the lookup ID of the control. It will now throw an errors with new textbox control for its "onblur","onfocus" and other events, because the actual ID of the control is now generated by server.

/* blog.js */

function SearchClear(defaultText)
{
  var input = $("searchfield"); //this will throw null exception
  if (input.value == defaultText)
    input.value = "";
  else if (input.value == "")
    input.value = defaultText;
}

Change above method to following

function SearchClear(defaultText, clientId)
{
  var input = $(clientId);
  if (input.value == defaultText)
    input.value = "";
  else if (input.value == "")
    input.value = defaultText;
}  

And then change the properties of ASP.NET textbox control to pass extra control ClientID as parameter.

newSearchBox.Attributes["onfocus"] = string.Format("SearchClear('{0}','{1}')", BlogSettings.Instance.SearchDefaultText, this.Controls[0].ClientID);

In the style.css file it also has hardcoded "searchfield" style, you might want to change this too.


#searchbox #searchfield {
    width: 200px;
}    

Step 3.

Drag AutoCompleteExtender from toolbox to SidePanel.ascx and point TargetControlID to "searchfield" then you are Done!

 autocomplete

Extra: If you are looking for using AJAX AutoCompleteExtender without web service! check out

ASP.NET Ajax Beta: AutoCompleteBehavior without a Web Service

Note: I haven't put this AJAX AutoComplete control up to this site yet. Because there aren't much to search for anyway. But I will definitely use it in later.