CALLING AN ASP.NET CODE BEHIND METHOD IN JAVASCRIPT

I have a client-side modal popup with an input button. Once the input button is clicked I want to be able to execute a server side method in code behind. The reason for this is I use a asp.net Gridview, which is great. Once I have submitted the updated data I then want to execute a server-side method that is not static so that I can see the gridview and update it with the changes. Using Gridview.databind.

I undertand web-services and pass my data to this to update the database. Just cannot access the server-side UI control because web-service methods have to be static.

In short I just want to access a asp.net code behind event handler of a hidden button being called from Javascript. I know it is possible. Was hoping someone could supply me with some clear concise code for this.

I have put below a brief code example.

I am really stuck with this. I just cant seem to get the javascript function to execute the hidden asp.net server controls server side event.

Regards,
Javascript:

    function hello() {
// call hidden button
}

ASPX:
<input id="Button1" type="button" value="button" onclick="hello()" />
<div style="display: none;"> 
        <asp:Button ID="myHiddenButton" Text="hello" runat="server" OnClick="ButtonClickHandlerMethod" /> 
   </div>

ASPX.CS

protected void ButtonClickHandlerMethod(object sender, EventArgs e)
    {
        int one = 1 + 2;
    }

Open in new window

metta0_3Asked:
Who is Participating?
 
masterpassCommented:
Try this ,

Since you are using the master pages, document.getElementById("myHiddenButton") will not return you any thing .. so you will have to use clientID ...

NB: I had tested the code in post  ID: 31853448 and it worked for me ... This code has also been tested and I hope this will work for you this time ....
ASPX
------

<div>
        <input id="Button1" type="button" value="button" onclick="hello()" />
        <div style="display: none;">
            <asp:Button ID="myHiddenButton" Text="hello" runat="server" OnClick="ButtonClickHandlerMethod" />
        </div>
        <asp:Label ID="Label1" runat="server" Text="Not Clicked"></asp:Label>
    </div>

<script type="text/javascript">
        function hello() {
            var btn = document.getElementById('<%=myHiddenButton.ClientID %>');
            btn.click();
        }
</script>

CODE-BEHIND

protected void ButtonClickHandlerMethod(object sender, EventArgs e)
{
   Label1.Text = "Clicked";
}

Open in new window

0
 
masterpassCommented:
Its pretty simple


function hello() {
  __doPostBack('<%= myHiddenButton.ClientID %>', '');
}

Open in new window

0
 
metta0_3Author Commented:
I am getting javascript runtime error. Object Expected. Here is all I have. I just cannot seem to get it to work. javascript doesn't recognise myHiddenButton because it is a server control. I'm missing something.

Thanks for your help.


ASPX:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="JScript.js" type="text/javascript"></script>
   <p>Hello poop</p>

   <input id="Button1" type="button" value="button" onclick="yoyoyo()" />
   <div style="display: none;"> 
        <asp:Button ID="myHiddenButton" Text="hello" runat="server" OnClick="ButtonClickHandlerMethod" />

   </div>
  
</asp:Content>

ASPX.CS:

protected void ButtonClickHandlerMethod(object sender, EventArgs e)
    {
        int one = 1 + 2;
    }

JAVASCRIPT:
// as you provided.
function yoyoyo() {
    __doPostBack('<%= myHiddenButton.ClientID %>', '');
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
masterpassCommented:
I have revised the code .. I had it tested and it works

NB : I have added a textbox with autopostback="true" , it is necessary as a workaround and you will get the same error if you are removing it ....

Hope this helps ...
ASPX:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="JScript.js" type="text/javascript"></script>
   <p>Hello poop</p>

   <input id="Button1" type="button" value="button" onclick="yoyoyo()" />
   <div style="display: none;"> 
        <asp:Button ID="myHiddenButton" Text="hello" runat="server" OnClick="ButtonClickHandlerMethod" />
		<asp:TextBox id="txtHidden" runat="server" AutoPostBack="true"  style="display: none"/>
   </div>
  
</asp:Content>

ASPX.CS:

protected void ButtonClickHandlerMethod(object sender, EventArgs e)
    {
        int one = 1 + 2;
    }

JAVASCRIPT:
// as you provided.
function yoyoyo() {
    __doPostBack(document.getElementById('<%=myHiddenButton.ClientID %>').id, '');
}

Open in new window

0
 
metta0_3Author Commented:
This performs a postbask:

function yoyoyo() {
        __doPostBack('<%= myHiddenButton.ClientID %>;', '');
}

This raises the same error as before:
function yoyoyo() {
    __doPostBack(document.getElementById('<%=myHiddenButton.ClientID %>').id, '');
}

Although neither execute the server side method attached to myHiddenButton. i can do a postback but I cannot invoke the method ButtonClickHandlerMethod which is attached to myHiddenButton.

0
 
masterpassCommented:
Do you have the txtHidden as given below ?
<div style="display: none;"> 
        <asp:Button ID="myHiddenButton" Text="hello" runat="server" OnClick="ButtonClickHandlerMethod" />
		<asp:TextBox id="txtHidden" runat="server" AutoPostBack="true"  style="display: none"/>
   </div>

Open in new window

0
 
Rajkumar GsSoftware EngineerCommented:
Write the javascript function like this

Hope this helps
Raj
function hello() 
{
    var btn = document.getElementById("myHiddenButton");
    btn.click();
}

Open in new window

0
 
metta0_3Author Commented:
function hello()
{
    var btn = document.getElementById("myHiddenButton");
    btn.click();
}

I tried this but myHiddenButton is a serverside object so will not be seen by javascript.

Hi masterclass I have it as you stated, hidden. Still no joy.
0
 
Rajkumar GsSoftware EngineerCommented:
I wonder why not worked out for you! When I tested it is working.

Anyway I have attached the text files of ASPX & CS files fully (done in Visual Studio 2008) . Have a check

Try create a new project
Rename the attached files by removing their extension '.txt'
Copy and replace these two files into the new project folder
Run and check whether works

Raj
Default.aspx.cs.txt
Default.aspx.txt
0
 
metta0_3Author Commented:
Did exactly what you have stated, I get runtime error btn.click() is null or not an object. It cannot find myHiddenButton as it has runat server.
Here is my code, that I have taken from yours.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="JScript.js" type="text/javascript"></script>
    <div>
        <input id="Button1" type="button" value="button" onclick="hello()" />
    <div style="display: none;">
        <asp:Button ID="myHiddenButton" Text="hello" runat="server" OnClick="ButtonClickHandlerMethod" />    
    </div>  
    <asp:Label ID="Label1" runat="server" Text="Not Clicked"></asp:Label>
</div>
</asp:Content>

function hello() {
    var btn = document.getElementById("myHiddenButton");
    btn.click();
}

This is a nighmare, thanks guys for all your help.
0
 
metta0_3Author Commented:
masterpass: That worked exactly. Thank you. I know I been a bit of a nuisance with this.

I just started using .NET 4 VS 2010. When creating a new project, for testing like this it just builds it with master pages included, whereas 2008 you had to add them I believe. Since my actual project where this is to be used does use master pages I decided to eave them. Im using the release candidtae too. For a minute there I thought that, there was something wrong with the development suite.

Thank also Raj for all your assistance too. Thanks for helping me successfully, sppedily. Now for getting asynchronous.

Regards,
0
 
metta0_3Author Commented:
Thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.