ModalPopupExtender on a ContentPage with MasterPage - upon closing disables contentpage

Posted Date: 15 Jun 2012 Posted By:: Tomahawk Member Level: Bronze Member Rank: 3068 Points: 5 Responses: 2

Hi All,

I am using Visual Web Developer 2010 Express with SQL Server database and my requirement is as below:

The contentpage is a form with a CustomerName dropdown and other fields (that need to be validated before the record is saved). Next to the dropdown is a link button "Add New". Clicking the Add New button brings up a modal popup to enable insert new customer records. Some fields of the new customer record also need to be validated before saving. The modalpopup window has two buttons Save And Cancel.

My requirement is such that if the user clicks on the Add New button the modal popup should be displayed (disabling the parent/content page). Once the new customer record is validated and inserted the modal popup window should close and control return to the dropdown to enable the user select the newly inserted customer record. If the user chooses Cancel on the modal popup window the modal popup window should close and control return to the dropdown again.

I have managed more or less everything except when the user inserts a new customer record, the modal popup window closes but the content page is disabled which requires a refresh to continue with the new parent record entry. I have tried numerous techniques but none of them has helped. Assume it has to do with the fact that the content page is linked to a masterpage. Since most of the tips and examples on the web show the use of a datagridview, it was not much help, although i tried taking hints from the javascript segments shown therein.

Kindly assist me with tips/tricks to achieve the above.

Thanks in advance

Code Block added as below:

<script type="text/javascript">
var bProceed = false;
function validate() {
var EmailAddress = document.getElementById("<%=txtEmail.ClientID%>").value;
var RegExEmail = /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/;
if (document.getElementById("<%=txtCustName.ClientID%>").value == "") {
document.getElementById("<%=lblErrMsg.ClientID%>").innerHTML = "* Customer Name Cannot Be Blank";
document.getElementById("<%=txtCustName.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtCity.ClientID %>").value == "") {
document.getElementById("<%=lblErrMsg.ClientID%>").innerHTML = "* City Name Cannot Be Blank";
document.getElementById("<%=txtCity.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=txtCountry.ClientID %>").value == "") {
document.getElementById("<%=lblErrMsg.ClientID%>").innerHTML = "* Country Name Cannot Be Blank";
document.getElementById("<%=txtCountry.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=txtEmail.ClientID %>").value == "") {
document.getElementById("<%=lblErrMsg.ClientID%>").innerHTML = "* Email Address Cannot Be Blank";
document.getElementById("<%=txtEmail.ClientID %>").focus();
return false;
}
if (!RegExEmail.test(EmailAddress)) {
document.getElementById("<%=lblErrMsg.ClientID%>").innerHTML = "* Please Enter A Valid Email Address";
document.getElementById("<%=txtEmail.ClientID %>").focus();
return false;
}
else {
bProceed == true;
return true;
}
if (bProceed == false) {
document.getElementById("<%=txtCustName.ClientID%>").focus();
return false;
}
}
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="divRHS">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="lblInvDet" runat="server" CssClass="RightSideDivHeaderCaption"
Text="Invoice Details" Width="798px"></asp:Label>
<table cellpadding="0" cellspacing="0" class="style1">
<tr>
<td>
<table cellspacing="1" class="style2">
<tr>
<td class="AllLabels" style="width: 65px">
<asp:Label ID="lblCustomer" runat="server" Text="Customer:"></asp:Label>
</td>
<td colspan="3">
<asp:DropDownList ID="ddlCustomer" runat="server" CssClass="AllTextBoxes" Width="340px"
TabIndex="4" AppendDataBoundItems="True">
</asp:DropDownList>
<asp:LinkButton ID="lnkAddNew" runat="server" Font-Names="Verdana" Font-Size="10pt"
Text="Add New">Add New</asp:LinkButton>

<asp:ModalPopupExtender ID="mp1" BehaviorID="popupCustomerMaster" runat="server"
PopupControlID="Panel1" TargetControlID="lnkAddNew" PopupDragHandleControlID="Panel1"
CancelControlID="btnCancelNewCustomer" OnOkScript="onOk()" DropShadow="true"
BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="HellowWorldPopup" Style="display: none">
<div class="popup_Titlebar" id="PopupHeader" style="text-align: center">
<asp:Label Font-Bold="True" ID="lblPopupHeader" runat="server" Text="Customer Details"
Font-Names="Tahoma" Font-Size="10pt" ForeColor="White"></asp:Label>
</div>
<table cellpadding="1" cellspacing="2">
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblCustomerCode" runat="server" Text="Customer Code:"></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="txtCustCode" runat="server" CssClass="AllTextBoxes"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblCustomerName" runat="server" Text="Customer Name:"></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="txtCustName" runat="server" Width="350px" CssClass="AllTextBoxes"
MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblPhysicalAddress" runat="server" Text="Physical Address:"></asp:Label>
</td>
<td colspan="3" style="width: 115px">
<asp:TextBox ID="txtAddress" runat="server" Height="115px" TextMode="MultiLine"
Width="400px" CssClass="AllTextBoxes_ProperCase"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblPostBox" runat="server" Text="Post Box:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtBox" runat="server" CssClass="AllTextBoxes" MaxLength="10"></asp:TextBox>
</td>
<td class="AllLabels_Normal">
<asp:Label ID="lblPostCode" runat="server" Text="Post Code:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPCode" runat="server" CssClass="AllTextBoxes" MaxLength="6"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblCity" runat="server" Text="City:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCity" runat="server" Width="200px" CssClass="AllTextBoxes_ProperCase"
MaxLength="30"></asp:TextBox>
</td>
<td class="AllLabels_Normal">
<asp:Label ID="lblCountry" runat="server" Text="Country:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCountry" runat="server" Width="175px" CssClass="AllTextBoxes_ProperCase"
MaxLength="30"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblPhoneNo" runat="server" Text="Phone No.:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPhoneNo" runat="server" Width="200px" CssClass="AllTextBoxes"
MaxLength="50"></asp:TextBox>
</td>
<td class="AllLabels_Normal">
<asp:Label ID="lblFaxNo" runat="server" Text="Fax No.:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFaxNo" runat="server" Width="175px" CssClass="AllTextBoxes" MaxLength="50"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal" style="width: 125px">
<asp:Label ID="lblEmailAddress" runat="server" Text="E-mail Address:"></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="txtEmail" runat="server" Width="400px" CssClass="AllTextBoxes_LowerCase"
MaxLength="60"></asp:TextBox>
</td>
</tr>
<tr>
<td class="AllLabels_Normal">
<asp:Label ID="lblContactPerson" runat="server" Text="Contact Person:"></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="txtContact" runat="server" Width="275px" CssClass="AllTextBoxes_ProperCase"
MaxLength="50"></asp:TextBox>
</td>
</tr>
<tr>
<td class="SpacerRow" colspan="4">
</td>
</tr>
<tr>
<td colspan="4" align="right">
<asp:Button ID="btnSaveNewCustomer" runat="server" Text="Save" CssClass="CommandButtonStyle"
Style="padding-right: 0px" OnClick=" SaveCust" OnClientClick="return validate()" />
<asp:Button ID="btnCancelNewCustomer" runat="server" Text="Cancel" CssClass="CommandButtonStyle"
Style="padding-right: 0px" />
</td>
</tr>
<tr>
<td colspan="4">
<asp:Label ID="lblErrMsg" runat="server" Font-Bold="True" Font-Names="Tahoma"
Font-Size="12px" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>

</td>
</tr>
<tr>
<td class="AllLabels">
<asp:Label ID="lblAddress" runat="server" Text="Address:"></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="txtAddress" runat="server" CssClass="AllTextBoxes" Rows="3" TextMode="MultiLine"
Width="325px" TabIndex="5"></asp:TextBox>
</td>
</tr>
<tr>
</tr>
</table>
</td>
<td>
<table cellpadding="1" cellspacing="2" style="width: 295px">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td class="SpacerRow" colspan="4">
</td>
</tr>
<tr>
<td colspan="4" align="right">
<asp:Button ID="btnNew" runat="server" Text="New" CssClass="CommandButtonStyle" Style="padding-right: 0px"
CausesValidation="False" />
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="CommandButtonStyle"
Style="padding-right: 0px" OnClientClick="return validate()" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="CommandButtonStyle"
Style="padding-right: 0px" CausesValidation="False" />
</td>
</tr>
</table>
<div class="Horiz_LineClass">
</div>
<div id="InvoiceItems">
<table cellpadding="0" cellspacing="5" class="style3">
</table>
<table cellpadding="2" style="line-height: 12px">
<tr>
<td colspan="7">
</td>
</tr>
</table>
</div>
<div>
<span id="spanChecking">
<asp:Label ID="lblFormStatus" runat="server" Font-Bold="True" Font-Names="Tahoma"
Font-Size="12px" ForeColor="Red"></asp:Label>
</span>
</div>
</div>

CodeBehind:

Protected Sub SaveCust(ByVal sender As Object, ByVal e As EventArgs)
GetNextCustomerCode()
Dim connTemp As New SqlClient.SqlConnection
Dim strSelectSQL As String
connTemp.ConnectionString = ConfigurationManager.ConnectionStrings("sqlConnString").ToString
strSelectSQL = ""
strSelectSQL = "INSERT INTO Customers" & _
" (CustCode, CustName, Address, PBox, PCode, City, Country, PhoneNumber, FaxNumber, EmailAddress, ContactPerson) VALUES " & _
" (@CustomerCode, @CustomerName, @Address, @PostBox, @PostCode, @City, @Country, @PhoneNumber, @FaxNumber, @EmailAddress, @ContactPerson)"
Dim cmdTempData As New SqlClient.SqlCommand(strSelectSQL, connTemp)
cmdTempData.Parameters.AddWithValue("@CustomerCode", StrConv(txtCustomerCode.Text, VbStrConv.Uppercase))
cmdTempData.Parameters.AddWithValue("@CustomerName", StrConv(txtCustName.Text, VbStrConv.ProperCase))
cmdTempData.Parameters.AddWithValue("@Address", StrConv(txtAddress.Text, VbStrConv.ProperCase))
cmdTempData.Parameters.AddWithValue("@PostBox", StrConv(txtPBox.Text, VbStrConv.Uppercase))
cmdTempData.Parameters.AddWithValue("@PostCode", StrConv(txtPCode.Text, VbStrConv.Uppercase))
cmdTempData.Parameters.AddWithValue("@City", StrConv(txtCity.Text, VbStrConv.ProperCase))
cmdTempData.Parameters.AddWithValue("@Country", StrConv(txtCountry.Text, VbStrConv.ProperCase))
cmdTempData.Parameters.AddWithValue("@PhoneNumber", StrConv(txtPhoneNo.Text, VbStrConv.Uppercase))
cmdTempData.Parameters.AddWithValue("@FaxNumber", StrConv(txtFaxNo.Text, VbStrConv.Uppercase))
cmdTempData.Parameters.AddWithValue("@EmailAddress", StrConv(txtEmail.Text, VbStrConv.Lowercase))
cmdTempData.Parameters.AddWithValue("@ContactPerson", StrConv(txtContact.Text, VbStrConv.ProperCase))
Try
connTemp.Open()
cmdTempData.Connection = connTemp
cmdTempData.CommandText = strSelectSQL
cmdTempData.ExecuteNonQuery()
lblErrorMessage.Text = "Record Added Successfully!"
Finally
connTemp.Close()
cmdTempData.Dispose()
End Try
End Sub

Responses

#675693 Author:

Ravindran

Member Level: Diamond Member Rank: 3 Date: 15/Jun/2012 Rating: 2 out of 5

Points: 4

Tomahawk ,

I take your modal popup control code and modify that as per your requirement just rewrite like below code and execute it

first include this css this css is used to enabled false of your content/parent page when popup open


<style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
        .modalPopup
        {
            background-color: #ffffdd;
            border-width: 3px;
            border-style: solid;
            border-color: Gray;
            padding: 3px;
            width: 250px;
        }
    </style>

Rewrite your modalpoup extender code like below


 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnDummy"
            PopupControlID="Panel1" BackgroundCssClass="modalBackground">
        </asp:ModalPopupExtender>
        <asp:Button ID="btnDummy" runat="server" Text="Button" Style="visibility: hidden" />
<asp:Panel ID="Panel1" runat="server">
    <div class="popup_Titlebar" id="PopupHeader" style="text-align: center">
        <asp:Label Font-Bold="True" ID="lblPopupHeader" runat="server" Text="Customer Details"
            Font-Names="Tahoma" Font-Size="10pt" ForeColor="White"></asp:Label>
    </div>
    <table cellpadding="1" cellspacing="2">
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblCustomerCode" runat="server" Text="Customer Code:"></asp:Label>
            </td>
            <td colspan="3">
                <asp:TextBox ID="txtCustCode" runat="server" CssClass="AllTextBoxes"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblCustomerName" runat="server" Text="Customer Name:"></asp:Label>
            </td>
            <td colspan="3">
                <asp:TextBox ID="txtCustName" runat="server" Width="350px" CssClass="AllTextBoxes"
                    MaxLength="100"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblPhysicalAddress" runat="server" Text="Physical Address:"></asp:Label>
            </td>
            <td colspan="3" style="width: 115px">
                <asp:TextBox ID="txtAddress" runat="server" Height="115px" TextMode="MultiLine" Width="400px"
                    CssClass="AllTextBoxes_ProperCase"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblPostBox" runat="server" Text="Post Box:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtBox" runat="server" CssClass="AllTextBoxes" MaxLength="10"></asp:TextBox>
            </td>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblPostCode" runat="server" Text="Post Code:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtPCode" runat="server" CssClass="AllTextBoxes" MaxLength="6"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblCity" runat="server" Text="City:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtCity" runat="server" Width="200px" CssClass="AllTextBoxes_ProperCase"
                    MaxLength="30"></asp:TextBox>
            </td>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblCountry" runat="server" Text="Country:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtCountry" runat="server" Width="175px" CssClass="AllTextBoxes_ProperCase"
                    MaxLength="30"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblPhoneNo" runat="server" Text="Phone No.:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtPhoneNo" runat="server" Width="200px" CssClass="AllTextBoxes"
                    MaxLength="50"></asp:TextBox>
            </td>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblFaxNo" runat="server" Text="Fax No.:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtFaxNo" runat="server" Width="175px" CssClass="AllTextBoxes" MaxLength="50"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal" style="width: 125px">
                <asp:Label ID="lblEmailAddress" runat="server" Text="E-mail Address:"></asp:Label>
            </td>
            <td colspan="3">
                <asp:TextBox ID="txtEmail" runat="server" Width="400px" CssClass="AllTextBoxes_LowerCase"
                    MaxLength="60"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="AllLabels_Normal">
                <asp:Label ID="lblContactPerson" runat="server" Text="Contact Person:"></asp:Label>
            </td>
            <td colspan="3">
                <asp:TextBox ID="txtContact" runat="server" Width="275px" CssClass="AllTextBoxes_ProperCase"
                    MaxLength="50"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="SpacerRow" colspan="4">
            </td>
        </tr>
        <tr>
            <td colspan="4" align="right">
                <asp:Button ID="btnSaveNewCustomer" runat="server" Text="Save" CssClass="CommandButtonStyle"
                    Style="padding-right: 0px" OnClick=" SaveCust" OnClientClick="return validate()" />
                <asp:Button ID="btnCancelNewCustomer" runat="server" Text="Cancel" CssClass="CommandButtonStyle"
                    Style="padding-right: 0px" />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Label ID="lblErrMsg" runat="server" Font-Bold="True" Font-Names="Tahoma" Font-Size="12px"
                    ForeColor="Red"></asp:Label>
            </td>
        </tr>
    </table>
</asp:Panel>

try like above code and let me know outcome result or you got any error and output seems like this

Regards
N.Ravindran
Your Hard work never fails

#675765 Author: Tomahawk Member Level: Bronze Member Rank: 3068 Date: 15/Jun/2012 Rating: Points: 1
Hi N.Ravindran, Thanks, but there is no link between the "Add New" button with the popup. So how will the popup show in the first place? I am already using a CSS class, but did not include in the initial post. .ModalPopupBG { background-color: #666699; filter: alpha(opacity=50); opacity: 0.7; } .HellowWorldPopup { min-width:200px; min-height:150px; background-color:#fffeb2; } .popup_Titlebar { background: url(Images/tbar.jpg); height: 29px; }

Post Reply

This thread is locked for new responses. Please post your comments and questions as a separate thread.
If required, refer to the URL of this page in your new post.

	Next : Text changed is not working
	Previous : Timer implementation
	Return to Discussion Forum
	Post New Message
	Category:

Related Messages

Follow us on Twitter: https://twitter.com/dotnetspider

Active Members
Today

Last 7 Days

baskar (298)
Pawan Awasthi (178)
Asheej T K (173)

more...

Awards & Gifts

Email subscription