AJAX and Code Behind

i would like to do some code behind work along with javascript on my page. I have a modalPopup taht when the user clicks submit i want it to call the javascript function to alert the user and also call a function in my codebehind to insert so values into a database. when i added an OnClick to my button it never fires. Why?

You can handleBeginRequest to execute some JavaScript code as the partial postback initializes.

Hi,

This should work if you do not cancel the form submit event.

Please share your code for better understanding.

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="iPort.master" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server" > <script type="text/javascript"> // JScript File var styleToSelect; function onOk() { alert('New portfolio created!'); } function Getnew() { var num = Math.ceil(Math.random()*10); var control = document.getElementById('Text7'); control.value = num; } </script> <br /> <br /> <p id="P1"> <table style="border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <asp:Button ID="New_iPort" runat="server" Text="New" Width="75px" OnClientClick="Getnew()" /></td> </tr> <tr> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> <strong> PortfolioID</strong></td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> <strong> PortInfo1</strong></td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> <strong> PortInfo2</strong></td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> <strong> PortInfo3</strong></td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> <strong> ActivePortfolio</strong></td> </tr> <tr> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> 1001</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> 1</td> </tr> <tr> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> 1002</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> 0</td> </tr> <tr> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> 1003</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> Data</td> <td style="width: 100px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;"> 1</td> </tr> </table> </p> <p> <asp:Label ID="Label9" runat="server" Text="Label"></asp:Label> </p> <asp:Panel ID="Panel1" runat="server" Width="505px" CssClass="modalPopup" style="display:none;"> <div style="width: 100%; font-weight: bold; font-size: 14pt; text-align: center;">  New Portfolio <hr /> </div> <div style="width: 100%;"> <table cellpadding="0" cellspacing="1"> <tr> <td style="width: 100px"> <asp:Label ID="Label1" runat="server" Text="PortfolioID"></asp:Label></td> <td style="width: 100px"> <input id="Text7" disabled="disabled" type="text" /></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label2" runat="server" Text="PortData1"></asp:Label></td> <td style="width: 100px"> <input id="Text8" type="text" /></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label7" runat="server" Text="PortData2"></asp:Label></td> <td style="width: 100px"> <input id="Text9" type="text" /></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label3" runat="server" Text="PortData3"></asp:Label></td> <td style="width: 100px"> <input id="Text10" type="text" /></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label4" runat="server" Text="PortData4"></asp:Label></td> <td style="width: 100px"> <input id="Text11" type="text" /></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px; height: 19px"> <asp:Label ID="Label6" runat="server" Text="PortData5"></asp:Label></td> <td style="width: 100px; height: 19px"> <input id="Text12" type="text" /></td> <td style="width: 100px; height: 19px"> </td> </tr> <tr> <td style="width: 100px; height: 19px"> <asp:Label ID="Label5" runat="server" Text="PortData6"></asp:Label></td> <td style="width: 100px; height: 19px"> <input id="Text13" type="text" /></td> <td style="width: 100px; height: 19px"> </td> </tr> <tr> <td style="width: 100px; height: 20px;"> <asp:Label ID="Label8" runat="server" Text="Active"></asp:Label></td> <td style="width: 100px; height: 20px;"> <input id="Checkbox2" type="checkbox" /></td> <td style="width: 100px; height: 20px;"> </td> </tr> </table> </div> <div style="width: 100%; text-align: center;"> <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />   <asp:Button ID="Button2" runat="server" Text="Cancel" OnClick="Button2_Click" /> </div> </asp:Panel> <br /> <ajaxToolkit:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="New_iPort" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="Button1" OnOkScript="onOk()" CancelControlID="Button2"> </ajaxToolkit:ModalPopupExtender> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </asp:Content>

protected void Button1_Click(object sender, EventArgs e) { Label9.Text ="Submit button clicked!"; }protected void Button2_Click(object sender, EventArgs e) { Label9.Text ="Cancel Button clicked!"; }

Hi,

I am afraid it is normal,

ASP.NET render the two buttons as following:

<input type="submit" name="ctl00$SampleContent$OkButton" value="OK" id="ctl00_SampleContent_OkButton" />
<input type="submit" name="ctl00$SampleContent$CancelButton" value="Cancel" id="ctl00_SampleContent_CancelButton" />

Wether you add OnClick or not,it render the same, no postback is fired!

But you can fire the postback in the OkScript via javascript.That is the workaround.

Best Regards,

and how would one go about doing that?

hello.

for instance, you can call the __doPostBack method from your js code and set the target to the client id of your button.