Question 263851 in Javascript Question posted in
A very good W3school tutorial can be found here.

In ASP.NET WebForms how to mimic in javascript code the click on an asp:LinkButton with the "CommandName" and the "CommandArgument" being set by code?

On the server side I have an asp:LinkButton control that I will make invisible in the future:

  <asp:LinkButton ID="LnkCSCommand" runat="server" Text="CSCommand" CommandName="CommandNameTest" CommandArgument="CommandArgumentTest"  CssClass="wi_dq_grid_cmd" >
  </asp:LinkButton>

and I hooked an handler function to it:

    Private Sub LnkCSCommand_Click(sender As Object, e As EventArgs) Handles LnkCSCommand.Click
        Dim i As Integer = 0
    End Sub

Now I want that handler to be hit from a client-side javascript code:

function mimicLinkButtonClick(LnkCSCommandClientID, commandName, commandArgument) {
  __doPostBack(LnkCSCommandClientID, commandName + '$' + commandArgument);
}

where "LnkCSCommandClientID" has the clientID of the real existing <asp:LinkButton ID="LnkCSCommand" > control.

But it is not working. The page "Load" event is being hit, but the LnkCSCommand_Click event handler is not.
It looks like I’m not referencing correctly the LnkCSCommand control in the __postBack call.
What I’m doing wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Definitely it was an error in the __doPostBack() first parameter referencing the control: asp.net WebForms expect it to be a name, not a ClientID. The problem is LinkButton control does not have a name property (at least it is not exposed in the generated html). Anyway, I realized I don't need to use a LinkButton. So I substituted it for a Button control that exposes the name attribute in the generated html so I can use it and... boom! Server 500 Error: "Invalid postback or callback argument". Yes, basically I'm hacking myself. Event validation is prohibiting me to generate the postback programmatically with data that is not registered. I don't want to disable event validation so I need to change my approach anyway.


  2. 0

    Ok, what you have should work, but there are significant additional issues here.

    First up, it will often depend on how/when/where/what is to trigger the JavaScript code. Remember, while a button click by a user can trigger a popup dialog, JavaScript code without a user click on the page cannot (this is for popup protection — so ONLY JavaScript code run as a result of a button click can in most cases trigger other button code on the page).

    The next issue?

    If you on say page load, or anywhere in code behind set the control in question to visible = false?

    Then the html, and server does NOT render the markup for that control.

    So, say this simple link button:

        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton test</asp:LinkButton>

    <input id="Buttonh" type="button" value="js run"
        onclick="test1();return false" />

    <script>
        function test1() {
            __doPostBack('LinkButton1', '')
        }
    </script>

    So, if we click on the 2nd button (a html button that THEN does the do postback to mimic the 1st button? Then, yes this will work (note the rule – we ARE clicking on a button, so we ARE allowed to trigger the post-back).

    However, if on page load we do this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LinkButton1.Visible = False
    End If

End Sub

    Then our code does NOT work, and the reason is as noted above: If you set a control visible property = false, then the control is not rendered and NOT sent to the client-side browser (DOM).

    As a result, any client-side code (JavaScript) can’t manipulate or use or change the button, or the markup or whatever in question WHEN the control in question has visible = false.

    Solution:

    The solution to above is to NOT use .visible = false, but use CSS style to hide the control but STILL ALLOW the markup in question to be rendered and sent to the client-side browser.

    So, while the above on-load to set the link button visible = false will not work (the html button click to trigger the button does not work), if we use CSS to "hide" the markup, then this can work.

    Thus, this will work:

        If Not IsPostBack Then
        LinkButton1.Style.Add("display", "none")
    End If

    So, keep in mind that using server-side code and "visible = false" means that such markup is NEVER sent to the client-side browser, nor is the markup rendered client side in the browser. As a result, then any attempts to modify or use that markup from client-side JavaScript code is not possible (since the markup for the given control does not exist client side in the browser DOM).

    However, hiding the control with above CSS means the markup is sent to client-side browser, and thus now JavaScript code can freely use, manipulate or in this case "mimic" the click of that hidden element (in this example the link button).

    However, there is no real given reason as to why a link button is being used here? Why not use a plain jane regular button?

    Using client-side JavaScript, I often will and need code to click on an existing button.

    So, this works (I’m assuming jQuery here).

    Simple button:

        <asp:Button ID="Button1" runat="server" Text="standard asp button"
        OnClick="Button1_Click"
        ClientIDMode="Static"
        />


    <input id="Buttonh" type="button" value="click side js code"
        onclick="test1();return false" />

    <script>
        function test1() {
            $("#Button1").click()
        }
    </script>

    Code behind:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


End Sub


Protected Sub Button1_Click(sender As Object, e As EventArgs)

    Debug.Print("button 1 code run")

End Sub

    Note how in above I did NOT use a "handler". (This means I did not double click on the button in the designer to auto wire up the button, but while in markup, I typed in this:

    enter image description here

    So, you can double click on the button in the designer, or you can type in onclick= (and then space bar, inteli-sense will now trigger).

    This is VERY important, since often you want to add a click event to a button, but if it is nested inside of a GridView, Repeater etc., then you can’t double click and thus the above solves how you can create the event.

    So, as above shows, you can use the .click() method of the control selector in jQuery. Again, in most cases, the rule applies (the code to click a button in most cases should be the result of a user click on the page).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search