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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.