I made a couple of improvements:
To prevent a postback when clicking the menu item, use the NavigateUrl property to call javascript which displays the ModalPopupExtender; Use style="display:none" on the popup panel to prevent strange flashing in this instance. Now there is no need to handle the menu item click for the menu item that is associated with the ModalPopupExtender ("Apples" in this case).
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
EnableEventValidation="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
<!--
function pageLoad(sender, e) {
var mpe = $find('mpeBehavior');
mpe.add_shown(mpe_Shown);
mpe.add_hidden(mpe_Hidden);
var shown = ($get('<%= HiddenField1.ClientID %>').value == "shown");
if(shown)
mpe.show();
}
function mpe_Shown(sender, e) {
var hf = $get('<%= HiddenField1.ClientID %>');
hf.value = "shown";
var hf = $get('<%= HiddenField2.ClientID %>');
if (hf.value != "loaded") {
hf.value = "loaded";
__doPostBack('<%= btnLoadData.UniqueID %>','');
}
}
function mpe_Hidden(sender, e) {
var hf = $get('<%= HiddenField1.ClientID %>');
hf.value = "hidden";
}
function showModalPopupExtender(behaviorId) {
var mpe = $find(behaviorId);
mpe.show();
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:HiddenField ID="HiddenField1" runat="server" Value="hidden" />
<asp:HiddenField ID="HiddenField2" runat="server" Value="unloaded" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Menu runat="server" ID="menu" Orientation="horizontal" OnMenuItemClick="menu_ItemClick"
StaticDisplayLevels="1">
<Items>
<asp:MenuItem Text="Fruit" Selectable="false">
<asp:MenuItem Text="Apple" NavigateUrl="javascript:showModalPopupExtender('mpeBehavior')" />
<asp:MenuItem Text="Banana" />
<asp:MenuItem Text="Cherry" />
</asp:MenuItem>
<asp:MenuItem Text="Colors" Selectable="false">
<asp:MenuItem Text="Red" />
<asp:MenuItem Text="Yellow" />
<asp:MenuItem Text="Blue" />
</asp:MenuItem>
</Items>
</asp:Menu>
<asp:Panel runat="server" ID="pnlSelection" CssClass="modalForeground" DefaultButton="btnSelectOK"
BorderStyle="solid" BorderColor="#C0C0C0" BackColor="white" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlLoading">
Please wait while the data is loaded...
</asp:Panel>
<asp:Panel runat="server" ID="pnlSelect" Visible="false">
Modal Popup
<asp:Button runat="server" ID="btnLoadData" OnClick="btnLoadData_Click" Text="Load Data"
Style="visibility: collapse;" />
<br />
</asp:Panel>
<asp:Button runat="server" ID="btnSelectOK" Text="OK" OnClick="btnSelectOK_Click"
Enabled="false" />
<asp:Button runat="server" ID="btnSelectCancel" Text="Cancel" Enabled="false" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="Button1" Text="hide" Style="visibility: hidden" />
<ajaxToolkit:ModalPopupExtender ID="mpeSelect" runat="server" PopupControlID="pnlSelection"
CancelControlID="btnSelectCancel" TargetControlID="Button1" BehaviorID="mpeBehavior"
DropShadow="true" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
public partial class _Default : System.Web.UI.Page
{
protected void btnLoadData_Click(object sender, EventArgs e)
{
//pretend to load data
System.Threading.Thread.Sleep(2000);
pnlLoading.Visible = false;
pnlSelect.Visible = true;
btnSelectOK.Enabled = true;
btnSelectCancel.Enabled = true;
}
protected void btnSelectOK_Click(object sender, EventArgs e)
{
// here I would process the user's input
mpeSelect.Hide();
}
protected void menu_ItemClick(object sender, EventArgs e)
{
//this will no longer happen for the menu item associated with the mpe
}
}