0

I am a new-bee at ASP.net development. You help is highly appreciated.

I have created a webform with a cascading drop down that includes 6 drop downs, a TextBox and a button(ButtonTotalingLevel). It calls the server side code to add the new data entered in the textbox to the database. The level where it gets added is decided by the selections on the drop down lists. I tested the server side method ButtonTotalingLevel_Click by calling it from OnClick event for ButtonTotalingLevel and it works.

Now I want change the functionality of the web page so that when I click ButtonTotalingLevel, I get a popup to show selected values on drop down lists and textbox value and take confirmation from the user before adding it to the database. The popup shows up when I click ButtonTotalingLevel, but when I click the Ok Button, I get error: 0x800a1391 - JavaScript runtime error: 'ButtonTotalingLevel_Click' is undefined.

Please take a look at my web page code and advise correction to overcome the above error and also suggest how to display the values from the dropdown and textbox on the popup. <%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="newlevels.aspx.cs" Inherits="COA.newlevels" EnableEventValidation="false" UnobtrusiveValidationMode="None" %>

<%--@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="newlevels.aspx.cs" Inherits="ChartOfAccounts.newlevels"  UnobtrusiveValidationMode="None"--%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="JScript.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
    <table>
        <tr>
            <td>Totaling Level A</td>
            <td>
                <asp:DropDownList ID="ddlTotalingLevelA" runat="server" Width="250" OnSelectedIndexChanged="ddlTotalingLevelA_SelectedIndexChanged" required></asp:DropDownList>
                <asp:CascadingDropDown ID="cdlTotalingLevelA" TargetControlID="ddlTotalingLevelA" PromptText="Select Totaling Level A"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetLevelAList" runat="server"
                    Category="TOTALING_LEVEL_A" LoadingText="Loading..." />
            </td>
        </tr>
        <tr>
            <td>Totaling Level B</td>
            <td>
                <asp:DropDownList ID="ddlTotalingLevelB" runat="server" Width="250" OnSelectedIndexChanged="ddlTotalingLevelB_SelectedIndexChanged"></asp:DropDownList>
                <asp:CascadingDropDown ID="cdlTotalingLevelB" TargetControlID="ddlTotalingLevelB" PromptText="Select Totaling Level B"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetLevelBList" runat="server"
                    Category="TOTALING_LEVEL_B" ParentControlID="ddlTotalingLevelA" LoadingText="Loading..." />
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
        <tr>
            <td>Totaling Level C</td>
            <td>
                <asp:DropDownList ID="ddlTotalingLevelC" runat="server" Width="250" OnSelectedIndexChanged="ddlTotalingLevelC_SelectedIndexChanged"></asp:DropDownList>
                <asp:CascadingDropDown ID="cdlTotalingLevelC" TargetControlID="ddlTotalingLevelC" PromptText="Select Totaling Level C"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetLevelCList" runat="server"
                    Category="TOTALING_LEVEL_C" ParentControlID="ddlTotalingLevelB" LoadingText="Loading..." />
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Totaling Level D</td>
            <td>
                <asp:DropDownList ID="ddlTotalingLevelD" runat="server" Width="250" OnSelectedIndexChanged="ddlTotalingLevelD_SelectedIndexChanged"></asp:DropDownList>
                <asp:CascadingDropDown ID="cdlTotalingLevelD" TargetControlID="ddlTotalingLevelD" PromptText="Select Totaling Level D"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetLevelDList" runat="server"
                    Category="TOTALING_LEVEL_D" ParentControlID="ddlTotalingLevelC" LoadingText="Loading..." />
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Totaling Level E</td>
            <td>
                <asp:DropDownList ID="ddlTotalingLevelE" runat="server" Width="250" OnSelectedIndexChanged="ddlTotalingLevelE_SelectedIndexChanged"></asp:DropDownList>
                <asp:CascadingDropDown ID="cdlTotalingLevelE" TargetControlID="ddlTotalingLevelE" PromptText="Select Totaling Level E"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetLevelEList" runat="server"
                    Category="TOTALING_LEVEL_E" ParentControlID="ddlTotalingLevelD" LoadingText="Loading..." />
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Totaling Level F</td>
            <td>
                <asp:DropDownList ID="ddlTotalingLevelF" runat="server" Width="250"></asp:DropDownList>
                <asp:CascadingDropDown ID="cdlTotalingLevelF" TargetControlID="ddlTotalingLevelF"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetLevelFList" runat="server"
                    Category="TOTALING_LEVEL_F" ParentControlID="ddlTotalingLevelE" LoadingText="Loading..." />
            </td>
            <td>
                <asp:TextBox ID="txtTotalingLevel1" runat="server" required></asp:TextBox></td>
            <td>
                <asp:Button ID="ButtonTotalingLevel" runat="server" Text="Add New Totaling Level"  /></td>
             <%--onclick ="ButtonTotalingLevel_Click"--%>
        </tr>
    </table>
    <asp:modalpopupextender id="ModalPopupExtender1" runat="server"
        targetcontrolid="ButtonTotalingLevel" popupcontrolid="Panel1"
        popupdraghandlecontrolid="PopupHeader" drag="true"
        backgroundcssclass="ModalPopupBG">

    </asp:modalpopupextender>

    <asp:Panel ID="Panel1" Style="display: none" runat="server">
        <div class="ConfirmationPopup">
            <div class="PopupHeader" id="PopupHeader">Confirm to add new level</div>
            <div class="PopupBody">
                <p>Test Popup</p>
            </div>
            <div class="Controls">
                <input id="btnOkay" type="button" value="Add New Totaling Level" onclick ="ButtonTotalingLevel_Click" />
                <input id="btnCancel" type="button" value="Cancel" onclick ="DoNothing" />
            </div>
        </div>
    </asp:Panel>

</div>
</asp:Content>

Next is the server side code:

protected void DoNothing(object sender, EventArgs e)
    {
        ModalPopupExtender1.Hide();
    }

protected void ButtonTotalingLevel_Click(object sender, EventArgs e)
    {
        ModalPopupExtender1.Hide();
        if (!String.IsNullOrEmpty(ddlTotalingLevelAValue))
        {
            connection.Open();
            SqlCommand cmd = connection.CreateCommand();
            cmd.CommandType = CommandType.Text;

             ///build sql query


            cmd.ExecuteNonQuery();
            connection.Close();

    }
user1689992
  • 21
  • 1
  • 5

1 Answers1

0

AFAIK, onclick event provided in input literal control refers to client-side function method, hence direct method calling like below is certainly wrong:

<input id="btnOkay" type="button" value="Add New Totaling Level" onclick="ButtonTotalingLevel_Click" />

To call server-side event handlers from literal input button, use __doPostBack method for each client-side onclick event which provides postback to server as given below:

<input id="btnOkay" type="button" value="Add New Totaling Level" onclick="__doPostBack('btnOkay', 'ButtonTotalingLevel_Click')" />

<input id="btnCancel" type="button" value="Cancel" onclick="__doPostBack('btnCancel', 'DoNothing')" />

NB:

  1. From my experiments, jQuery trigger method on btnOkay i.e. $('#<%= ButtonTotalingLevel.ClientID %>').trigger('click') can't be used since ButtonTotalingLevel bound as target control ID for ModalPopupExtender, which automatically suppresses server-side click event on the button even the event handler has setting up.

  2. You can wrap __doPostBack events into client-side functions for each button if you want to add other actions.

Related issues:

Call ASP.NET function from JavaScript?

Call C# Function From JavaScript/JQuery In Asp.net webforms

How to fire a button click event from JavaScript in ASP.NET

Community
  • 1
  • 1
Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61