How to invoke function in asp.net using javascript?

Question

I'm using the jquery plugin tablednd

$(document).ready(function () {
    $('#mygridview').tableDnD();
})

to make my rows in my gridview draggable. When I've dragged a row I want to invoke a function in asp.net to save the positions of the rows. But I can't find a proper event on gridview that only reacts on clicking on a row.

There is a onDrop method in tableDnd.

$(document).ready(function () {
    $('#mygridview').tableDnD({
      onDrop: function(table, row) {
   });
})

But how could I from there invoke a asp.net method? I've read some about ajax post but I don't understand that.

And I also read about using PageMethods but it didn't invoke my function.

The question is how can I write something that executes an update on a table in my database?

UPDATED:

I solved it using the IPostBackEventHandler method.

I had to extend both my user control and my page with IPostBackEventHandler and then added the public void RaisePostBackEvent(string eventArgument) function on both the user control and page. And finally:

onDrop: function (table, row) {
                __doPostBack('<%= this.UniqueID %>', 'Select');
            }

If someone got problem with onDrop, the solution is you have to give ID to each row like this:

    var i = 0;
    $("#<%= gridviewID.ClientID %>").find('tr').each(function () {
        $(this).attr('id', i++);
    });

above the initiation of the tablednd.

Thanks!

possible duplicate of [Call ASP.NET Function From Javascript?](http://stackoverflow.com/questions/3713/call-asp-net-function-from-javascript) — dav_i, Mar 03 '15 at 09:31
I'm getting the error: Expected class, delegate, enum, interface, or struct on all my classes when adding IPostBackEventHandler{} to my Page class. You know why? — President Camacho, Mar 03 '15 at 09:43
the problem is with the approach. you *should not* use gridview and ajax updates. if you wanna use`tableDND` you should ideally fill your table using ajax call. because the databind of a gridview is a server side event while updation in tableDnD is a clientside event. — naveen, Mar 03 '15 at 10:11

score 2 · Accepted Answer · edited May 19 '17 at 15:59

2

There are two ways in general, one using AJAX and second, using postbacks.

The AJAX way:

Add ScriptManager to the page, like this:

<asp:ScriptManager runat="server"
       ID="ScriptManager1" 
       EnablePageMethods="true"
       EnablePartialRendering="true"
/>

Make the server side method to be called as public static. Also mark it with the System.Web.Services.WebMethod attribute, like this:
```
[WebMethod]
public static string DoServerStuff(string parameter)
{
    return "Parameter passed: " + parameter;
}
```

Call it from the client side, via the PageMethods class, like this:

function doClientStuff() {
    var result = PageMethods.DoServerStuff('test parameter');
    alert(result);
}

For doing the same thing using jQuery check this out.

The postbacks way:

Make the page (that contains the method to be called) implement the IPostBackEventHandler interface.

Call the __doPostback method on the client side, like this:

function doClientStuff() {
    var result = __doPostBack('<%= this.UniqueID %>', 'Select');
}

Implement the server side logic inside the IPostBackEventHandler.RaisePostBackEvent method of the page.
More on the raising postbacks from the client side here.

edited May 19 '17 at 15:59

Andrew

7,602
2
34
42

answered Mar 03 '15 at 10:21

pangular

699
7
27

When using the AJAX method: I'm getting the error: `PageMethods is not defined`. When using the postbacks way: I'm getting the error `Expected class, delegate, enum, interface, or struct` on all my classes when adding IPostBackEventHandler{} to my Page class. – President Camacho Mar 03 '15 at 11:01
Make sure that: 1. you've specified an Id for the ScriptManager 2. its EnablePageMethods is set to true and 3. your server method is on the PAGE not the User Control – pangular Mar 03 '15 at 11:11
Ok, then it wont work, the server method is in the user control. – President Camacho Mar 03 '15 at 11:16
Yes, it won't, but you can still use the IPostBackEventHandler option ;) – pangular Mar 03 '15 at 11:32
There's no way to do the logic in the User control aspx.cs where I've my draggable gridview? – President Camacho Mar 03 '15 at 11:35
1

I tried the IPostBackEventHandler option and when I dropped my row the site does a postback but it never executes my "RaisePostBackEvent" function. I've extended my page with IPostBackEventHandler. – President Camacho Mar 03 '15 at 12:25

How to invoke function in asp.net using javascript?

1 Answers1

Linked