从jQuery用户界面对话框调用ASP.NET服务器端方法


jQuery UI对话框是jQuery UI框架的一个很好的功能。如果您已经使用过它,那么当您想要直接从jQuery UI对话框中的按钮进行服务器端发布时,可能会遇到一些问题。jQuery UI Dialog有Button参数,它帮助我们在对话框的底部添加自定义按钮。但是,由于它是客户端的html控件,为了进行服务器端的POST,我们必须使用基于AJAX的方法。

让我们来看一个示例…

首先,我们需要加载jQuery和jQuery UI库以及jQuery UI CSS文件:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet" 
        type="text/css" />

现在,一旦我们加载了jQuery文件,我们将添加将用于演示的HTML/ASPX代码。


HTML/ASPX

在Body->Form标记中(如果您使用的是ASP.NETMVC,则没有Form),首先添加以下行:

<a href="#" id="add">Add New</a>
那就加上这个
<div class="addNew" title="Add new Person">
    <table>
        <tr>
            <td>Name</td>
            <td><asp:TextBox ID="txtName" runat="server" /></td>
        </tr>
        <tr>
            <td>Surname</td>
            <td><asp:TextBox ID="txtSurname" runat="server" /></td>
        </tr>
        <tr>
            <td>Age</td>
            <td><asp:TextBox ID="txtAge" runat="server" /></td>
        </tr>
    </table>
</div>   

这将是单击Add New后将显示的ASPX。

最终结果将使用转发器控件显示

<asp:Repeater ID="rptShowItems" runat="server">
    <HeaderTemplate>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
                <tr>
                    <td><%# Eval("Name") %></td>
                    <td><%# Eval("Surname") %></td>
                    <td><%# Eval("Age") %></td>
                </tr>
    </ItemTemplate>
    <FooterTemplate>
            </tbody>
        </table>
    </FooterTemplate>
</asp:Repeater>

因此,正如您已经注意到的,我们的数据源集合有三个参数Name、Surname和Age。

以下是代码隐藏中的完整代码:

using System;
using System.Collections.Generic;
using System.Web.Services;

public partial class MyWebPage : System.Web.UI.Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

    [WebMethod]
    public static bool AddNewItem(string name, string surname, int age)
    {
        Person person = new Person() { Name = name, Surname = surname, Age = age };

        //add your logic to insert item into database
        
        //we will always return true here, in real life, this of course can't be always true ;)
        return true;        
    }
}

public class Person
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public int Age { get; set; }    
}

代码非常简单。我们有包含姓名、姓氏和年龄的Person类,以及AddNewItem静电方法,该方法接受三个参数并返回true。在现实生活场景中,这并不总是正确的,但将取决于插入是否成功。此外,该方法还修饰了WebMethod属性,以便从客户端使用AJAX进行调用。

现在,jQuery Ajax部分。

<script type="text/javascript">
    $(function () {
        $(".addNew").dialog({
            autoOpen: false,
            width: 300,
            height: 300,
            modal: true,
            close: function (event, ui) {
                location.reload(false);
            },
            buttons:
            {
                "Add": function () {
                    //add functionality
                    //make ajax post
                },
                "Cancel": function () {
                    //cancel
                }
            }
        });

        $("#add").click(function (event) {
            event.preventDefault();
            $(".addNew").dialog("open");                
        });
    });
</script>
使用此代码,我们主要将jQuery UI Dialog附加到.addNew元素,因此默认情况下它将变为不可见,并在我们创建对话框(“打开”)后打开。在对话框中,我们有几个属性可以设置默认行为,如宽度/高度、AutoOpen设置为false、mode设置为true,并且我们有针对Close事件的函数( location.reload(False)),关闭对话框后将重新加载页面。最后一个属性是 按钮,我们有两个按钮 添加和 取消。如您所见,两者都有回调函数,只要我们单击相应的按钮就会运行。正如您从预先添加的注释中可以注意到的,我们将在内部编写Ajax post函数 添加按钮功能,在取消时,我们将只使对话框关闭。

代码的最后一部分是将函数连接到#add选择器的单击事件。我们阻止默认的元素行为,然后触发对话框打开。换句话说,一旦我们单击Add new link,对话框就会打开。

jqueryuidialog_addnew_1

在此阶段,只有‘X’按钮在工作:)。

所以,现在让我们添加一个函数,一旦我们单击“Add”按钮,该函数将使用提供的参数调用AddNewItem方法

按钮中的两种功能:

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");
    }
}
您必须注意json字符串参数名称。这些名称必须与AddNewItem C#函数中定义的参数名称相同。

除了我们不在中继器控件中绑定任何数据这一事实之外,我还为您添加了这一点,以帮助您准备代码片段,以防您希望在应用程序中使用此类逻辑,并在成功完成插入后立即显示数据。

如果你有任何问题,请随时提出来。