Trigger an asp:button click event using javascript

问题:

I am currently working on a project which needs to trigger an asp:button click event after doing a series of events in a javascript code.

Please see my codes below:

This is my button and it's click event:

<asp:Button ID="btnRefresh" name="btnRefresh" runat="server" Text="btnRefresh" onclick="btnRefresh_Click" />

protected void btnRefresh_Click(object sender, EventArgs e)
{
    MyGrid.DataSource = null;
    MyGrid.DataSource = GetDataForGrid();
    MyGrid.DataBind();
}

I have referenced a javascript file which holds all my javascript codes for the page. I do it this way since I don't really like mixing up my javascript code inside my .aspx file.

This is how the function looks like in my external .js file:

function Refresh() {
    var btn = $(document).getElementById('btnRefresh');
    if (btn) {
        btn.click();
    }
    else {
        alert('false');
    }
}

I have also tried other ways I saw on the internet as follows all of which with no luck:

document.getElementById('btnRefresh');
__doPostBack('btnRefresh', '');
__doPostBack('btnRefresh', 'Click');
$('#btnRefresh').click();

Can someone please point me a good way to do it? Thank you!

EDIT:

What I want to do is this: I have a gridview inside an UpdatePanel. I have a trigger which is fired when btnRefresh is clicked. So basically, it refreshes my gridview. Therefore, I cannot use the button's OnClick Property to call my javascript functions since I will not be clicking the button in the first place. I need to be able to call the btnRefresh_Click event from my external javascript so that my Trigger would be fired to update my GridView.

EDIT 2:

I tried to define my btn on the .aspx page itself using the line below:

var btn = $("#");

and I also changed my JS Code as follows:

function Refresh() { if (btn) { btn.click(); } else { alert('false'); } }

The js was able to see btn and it event went through the line btn.click() However, my btnRefresh_Click still didn't fire up. Am I missing something here?

回答1:

Here you can use the OnClientClick property and mention the name of function which is in external js to call , as this property actually execute before the execution of server side event.

回答2:

Take a look at the ClientID Property.

You can use the property to get the ID of the button at client side, and use the ID to trigger the click.

function Refresh() {
    var btn = $("#<%=btnRefresh.ClientID%>");
    if (btn) {
        btn.click();
    }
    else {
        alert('false');
    }
}

But be mindful that <%=btnRefresh.ClientID%> can only work on the same page as the btnRefresh, not in external JS file. The ClientID is dynamically generated by ASP.NET.

回答3:

Since you reference your JS file, you have two options. either pass in the button's ClientID or set button's ClientIDMode to Static.

I suggest you pass in the id to the JS function.

function Refresh(id) {
    var btn = $(document).getElementById(id);
    if (btn) {
        btn.click();
    }
    else {
        alert('false');
    }
}

When you want to call it in another JS function, pass in the ClientID.

function doSomthing(){
    //do this
    //do that
    Refresh('<%=btnRefresh.ClientID%>');
}

But as you said, if you don't like to put JS in your aspx page, then just set your button's ClientIDMode = Static.

<asp:Button ID="btnRefresh" ClientIDMode="Static" name="btnRefresh" runat="server" Text="btnRefresh" onclick="btnRefresh_Click" />

回答4:

Here is a 'hack' I have used in the past

The button that is visible to the client would be

<input type="button" id="btPart1" value="Trigger Phase 1" 
    onclick="clicked()" class="btn btn-default" />

Define button like this in your web form

<asp:button id="Triggered" runat="server" OnClick="btnRefresh_Click"
    Style="visibility: hidden;"/>

In your JavaScript you would have

function clicked(){
    document.getElementById("ctl02_Triggered").click();
}

Depending on which version of asp you are using the ID will change, so make sure you inspect the button's actual id so you can trigger it via js. I mention this because at compile time ASP will actually transform the ID you have given based off of what parents it has.

回答5:

Actually you have to make sure that DOM is loaded before you run any JS methods. So make sure that your js file is included at end of your DOM (html).

Since btnRefresh button is server control, you need to refer it by clientID In the Refresh method,

var btn= document.getElementById(‘<%=btnRefresh.ClientID=%>’);

But your code does not show how you are calling the Refresh method. So I hope above helps you. OR you need to show more code.