如何通过jquery按钮管理behindcode按钮点击事件

本文关键字：按钮 事件 behindcode 管理 何通过 jquery | 更新日期: 2023-09-27 17:59:52

我有两个按钮：

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

点击这些按钮中的任何一个都可以使用jQuery点击功能在弹出对话框上打开"form1"：

<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>

我需要使用对话框上的按钮（不超过两个），如；"Create User"、"Delete"等来管理我的代码点击事件以操作数据库。我该怎么做？非常感谢。

如何通过jquery按钮管理behindcode按钮点击事件

您可以使用ajax调用将数据传递到服务器并在那里进行操作。

步骤

1.在您的WebApplication中创建一个asmx（添加新项目>WebService），并将其命名为MyService.asmx
2.像这样更改后面的代码（它将在这里-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.现在在创建用户按钮的点击事件中写下这个。

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;
    });
}

这是一种方法。

您可以使用httphandler。您可以在处理程序和该方法中创建用于更新/创建用户的方法。您可以使用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;
}

以下代码将在处理程序中。

public class MyHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
    CreateUser();
}
public bool IsReusable {
    get {
        return false;
    }
}
private Employee CreateUser()
{
}

}

当您从jquery调用Httphandler时。它将命中ProcessRequest。在那里您可以执行代码隐藏操作。

尝试添加runat="server"&类似按钮的onclick="function()"：

<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>

希望能有所帮助。

如果没有，另一种方法可以是使用ajax：

  1. 添加onclick=ajaxcall()

2-在Javascript中，添加ajax调用，如：

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

或

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

3-基于get或post，在代码背后的公共MethodName上使用HttpGet或HttpPost属性。

或

或者尝试PageMethods，查看此链接以了解有关PageMethods的更多详细信息。

相关文章：