Calling a server side function with a JQuery UI button

Question

I have a JQuery UI button that I create below. Is there a way to add some type of event director, so that when I click the button, one of my vb.net functions is called in my .aspx.vb file?

Thanks

$("#editor-form").dialog({
            autoOpen: false,
            height: 400,
            width: 650,
            modal: true,
            buttons: {
                "Add Editor": function () {
                 //fire serverside event??

I tried adding this, but it doesn't work...no errors, just doesn't work.

                   $.ajax({
                        type: "POST",
                        url: "CreateTest.aspx/btnAddEditors_Click",
                        //data: "{subject:'" + subject + "',message:'" + message + ",messageId:'" + messageId + "',pupilId:'" + pupilId + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            // Do something interesting here.
                        }

You need to investigate using AJAX (either a GET or POST request): http://api.jquery.com/jQuery.ajax/ — Chris Laplante, Jan 14 '13 at 21:23
Or, if you want to cause full postback - you can call a `click()` method of a control. — Yuriy Galanter, Jan 14 '13 at 21:25
You can check this [link](http://stackoverflow.com/questions/886903/calling-asp-net-server-side-method-via-jquery) — erhun, Jan 14 '13 at 21:26

tam tam · Accepted Answer · 2013-01-14T21:50:59.317

In my following example I have a dialog box and within the dialog box I have a button called update page which upon click will execute a method on the server via POST

POST EXAMPLE

    var runDates = "Pages/Mobile/Login.aspx/LoginUser";

    function initDailog() {

        RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: true,
            modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields & Test Exceptions:',
            width: 600, height: 500, position: 'center',
            open: function (type, data) {
                originalContent = $("#treeview").html();
            },
            buttons: { UpdatePage: function () {
                $.post(runDatesUrl,
//the following line sends my entire form or you could send individual values to the server
              $("#form").serialize(),
               function (data) {
                   This is your success function
                   //In my case the server was sending updated data to re-fresh my form fields
                   //so I update my div with the new results/content
                    $("#main").html(data);
                              }, "html");
            },
                Cancel: function () {
                    $(this).dialog("close");
                  }
            }
        });
    }

.LOAD EXAMPLE

Instead of POST you could also do a .LOAD to an empty div

$("#yourDivNameHere").load(UR, { ID: $("#ID").val(), ErrorCodes: errorTextArea });

EDIT

Assuming you have the following method on server-side code behidn file:

 public static bool AddNewItem(string name, string surname, int age)
    {


      return true;      
    }

Now in the post:

buttons:
{
    "Add": function () {
        var name = $("#<%= txtName.ClientID  %>").val();
        var surname = $("#<%= txtSurname.ClientID %>").val();
        var age = $("#<%= txtAge.ClientID %>").val();

        $.ajax({
            type: 'POST',
            url: 'MyWebPage.aspx/AddNewItem',
            data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d) {
                    alert("Successfully added new item");                                    
                }
            },
            error: function () {
                alert("Error! Try again...");
            }
        });
    },
    "Cancel": function () {
        $(this).dialog("close");
    }
}

Hi tam tam, how do you specify what function/method to use? -thanks — SkyeBoniwell, Jan 14 '13 at 21:45
@999cm999 Please check my Edit in the answer, I put a sample code behind fucntion which takes three values from the form and the method simply returns a true or fale. The method name to be called is specified in the URL. That should work for you — tam tam, Jan 14 '13 at 21:51
@999cm999 Please mark the question as correct if it resolved your question. Thanks — tam tam, Jan 15 '13 at 02:48

Calling a server side function with a JQuery UI button

1 Answers1