How to manage behindcode buttonclick event by jquery button?

Question

I have two buttons:

<center>
<p><button id="newuserbutton" >Create New User</button>
<p><button id="edituserbutton" >Edit User</button>
</center>

Clicking any of these button opens 'form1' over popup dialog using jQuery click function:

<script type="text/javascript">
// On DOM ready (this is equivalent to your $(document).ready(function () { ...} )
$(function() {

// Initialize modal (only once) on #div1
$('#div1').dialog({
    modal: true,
    autoOpen: false,
    minHeight: 300
});

// Bind click on #newuserbutton button
$('#newuserbutton').click(function() {
    $('#div1')
        // Set buttons
        .dialog("option", "buttons", [ 
            { text: "Create User", click: function() { $(this).dialog(""); } },
            { text: "Cancel", click: function() { $(this).dialog("close"); } }
        ])
        // Set modal title
        .dialog('option', 'title', 'Create new user')
        // Set modal min width
        .dialog({ minWidth: 550 })
        // Open modal
        .dialog('open');
});

// Bind click on #edituser button
$('#edituserbutton').click(function () {
    $('#div1')
        // Set buttons
        .dialog("option", "buttons", [
            { text: "Save Changes", click: function() { $(this).dialog(""); } },
            { text: "Delete", click: function() { $(this).dialog("alert"); } },
            { text: "Cancel", click: function() { $(this).dialog("close"); } }
        ])
        // Set modal title
        .dialog('option', 'title', 'Edit User')
        // Set modal min width
        .dialog({ minWidth: 500 })
        // Open modal
        .dialog('open');
    });

})
</script>

I need to use buttons (not above two) on dialog such as; "Create User", "Delete" etc. to manage my behind-code click events to manipulate a database. How i can do it? Thank you.

Answer 1

You could use an ajax call that can pass the data to the server and manipulate it there.

Steps

1.Create an asmx in your WebApplication (Add New Item > WebService) and name it MyService.asmx
2.Change the code-behind like this (it will be here - App_Code/MyService.asmx.cs)

using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService
{
    [WebMethod]
    public string CreateUser(string userName, string password)
    {
        //here you can do all the manipulations with your database
        return userName + " - " + password;
    }
}

3.Now in the Create User Button's click event write this.

click: function () {
    var DTO = {
        userName: $("#username").val(),
        password: $("#password").val()
    };
    $.ajax({
        type: 'POST',
        data: JSON.stringify(DTO),
        url: "MyService.asmx/CreateUser",
        contentType: 'application/json'
    }).done(function (result) {
        //check whether the result is wrapped in d
        var msg = result.hasOwnProperty("d") ? result.d : result;
        alert(msg);
    }).fail(function (xhr) {
        alert('Error: ' + xhr.statusText);
        return false;
    });
}

This is one way of doing it.

Answer 2

you can use the httphandler. you can create the method to update/Create User in handler and that method.you can call by using Jquery.

function CallHandler() {
$.ajax({
url: "Handler/MyHandler.ashx",
contentType: "application/json; charset=utf-8",
data: { 'Id': '10000', 'Type': 'Employee' },
success: OnComplete,
error: OnFail
});
return false;
}

Following code will be in handler.

public class MyHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

    CreateUser();

}

public bool IsReusable {
    get {
        return false;
    }
}

private Employee CreateUser()
{

}

}

When you call the Httphandler from jquery.It will hit to ProcessRequest. there you can perform code behind operation.

Answer 3

Try Adding runat="server" & onclick="function()" in button like :

<center>
  <p><button id="newuserbutton" runat="server" onclick="function1()">Create New User</button>
  <p><button id="edituserbutton" runat="server" onclick="function2()">Edit User</button>
</center>

Hope it can help.

If not, Another way can be to using ajax:

1. add onclick=ajaxcall()

2- in Javascript, add ajax call like:

`ajaxcall= function()
{
  $.ajax({
    type: "GET",
    url: "youraspxpage.aspx/MethodName?data=AnyDataAsQueryString",
    success: function(data){
      $("#resultarea").text(data);
    }
  });
}`

OR

ajaxcall= function()
    {
      $.ajax({
        type: "POST",
        url: "youraspxpage.aspx/MethodName",
        data:data,
        success: function(data){
          $("#resultarea").text(data);
        }
      });
    }

3- Based on get or post use HttpGet or HttpPost attribute on public MethodName in code behind.

OR

alternatively try PageMethods, Check this link for more detail about pagemethods.