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.

i have no idea does it make any different sense but it is web page not form. — Umit Kaya, Apr 24 '14 at 06:15
are you using asp.net webforms or asp.net mvc? also the framework version — naveen, Apr 24 '14 at 06:19

score 1 · Accepted Answer · answered Apr 24 '14 at 06:57

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.

score 0 · Answer 2 · answered Apr 24 '14 at 06:23

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.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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:

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.

How to manage behindcode buttonclick event by jquery button?

3 Answers3