如何通过jquery按钮管理代码按钮点击事件？答案

【问题标题】：How to manage behindcode buttonclick event by jquery button?如何通过jquery按钮管理代码按钮点击事件？
【发布时间】：2014-04-24 14:57:43
【问题描述】：

我有两个按钮：

<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" 等来管理我的后台代码点击事件以操作数据库。我该怎么做？谢谢。

【问题讨论】：

我不知道它有什么不同的意义，但它是网页而不是表单。
您使用的是 asp.net webforms 还是 asp.net mvc？还有框架版本

标签： c# jquery asp.net jquery-ui-dialog

【解决方案1】：

您可以使用 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;
    });
}

这是一种方法。

【讨论】：

【解决方案2】：

您可以使用 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。在那里你可以执行代码操作。

【讨论】：

【解决方案3】：

尝试在按钮中添加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：

添加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，查看link 了解有关页面方法的更多详细信息。

【讨论】：