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...

Oct
27
2008

How To Create AJAX-enabled SharePoint Web Part with UpdatePanel and UpdateProgress in 10 minutes

In this post I am going to show you how you can setup your SharePoint site to support Microsoft ASP.NET AJAX framework and create a basic AJAX-enabled SharePoint Web Part. You can find many great articles on MSDN on how to do these and they explained in more details, but if you are looking for a way to get it up and running in 10 minutes, this is it.

James Tsai .NET SharePoint Blog - AJAX enabled webpart 

James Tsai .Net SharePoint Blog - AJAX enabled webpart updating

An AJAX-enabled web part with update button and display current time every time when button is clicked. Loading image and text displayed during the update.

Goal

  • Enabling SharePoint site with ASP.NET AJAX framework support
  • Create AJAX-enabled SharePoint web part
    • with UpdateProgress control for visual feedback in browser when web part is updating
    • with AJAX request event script to hide UpdatePanel while web part is updating
  • Add AJAX-enabled web part to page and see it in action

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.

James Tsai

Blog Disclaimer