0

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!

3
  • 1
    possible duplicate of Call ASP.NET Function From Javascript?
    – dav_i
    Mar 3, 2015 at 9: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? Mar 3, 2015 at 9:43
  • the problem is with the approach. you should not use gridview and ajax updates. if you wanna usetableDND 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. Mar 3, 2015 at 10:11

1 Answer 1

2

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

The AJAX way:

  1. Add ScriptManager to the page, like this:

    <asp:ScriptManager runat="server"
           ID="ScriptManager1" 
           EnablePageMethods="true"
           EnablePartialRendering="true"
    />
    
  2. 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;
    }
    
  3. Call it from the client side, via the PageMethods class, like this:

    function doClientStuff() {
        var result = PageMethods.DoServerStuff('test parameter');
        alert(result);
    }
    
  4. For doing the same thing using jQuery check this out.


The postbacks way:

  1. Make the page (that contains the method to be called) implement the IPostBackEventHandler interface.
  2. Call the __doPostback method on the client side, like this:

    function doClientStuff() {
        var result = __doPostBack('<%= this.UniqueID %>', 'Select');
    }
    
  3. Implement the server side logic inside the IPostBackEventHandler.RaisePostBackEvent method of the page.

  4. More on the raising postbacks from the client side here.

6
  • 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. Mar 3, 2015 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 3, 2015 at 11:11
  • Ok, then it wont work, the server method is in the user control. Mar 3, 2015 at 11:16
  • Yes, it won't, but you can still use the IPostBackEventHandler option ;)
    – pangular
    Mar 3, 2015 at 11:32
  • 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. Mar 3, 2015 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.