弹出层和ajax数据交互

时间：2022-01-03 02:02:49
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>弹出层和ajax数据交互</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Button ID="btn_Select" runat="server" Text="检索" class="btnok" OnClick="btn_Select_Click"

            Style="margin: 0" />

        <a href="javascript:" onclick="addInfo();">添加</a>

        <!--隐藏着的添加层,在添加事件中被弹出-->

        <div class="conLi" style="display: none; height: 100%;" id="shows">

            <div class="topder">

                <h4>

                    添加工作计划</h4>

            </div>

            <div class="lbContent">

                <table class="tabCon">

                    <tr>

                        <td>

                            <span>员工：</span>

                        </td>

                        <td>

                            <asp:DropDownList ID="Ddl_user" runat="server" CssClass="DropDownList">

                            </asp:DropDownList>

                        </td>

                        <td>

                            <span>任务量：</span>

                        </td>

                        <td>

                            <asp:TextBox ID="tb_Count" runat="server" CssClass="InpShadow InpW">0</asp:TextBox>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <span>岗位：</span>

                        </td>

                        <td>

                            <asp:TextBox ID="tb_gangwei" runat="server" CssClass="InpShadow InpW"></asp:TextBox>

                        </td>

                        <td>

                            <span>截止日期：</span>

                        </td>

                        <td>

                            <input id="tb_time" runat="server" readonly="true" class="Wdate intest InpShadow InpW2"

                                style="width: 186px; height: 22px; cursor: pointer" onfocus="WdatePicker()" />

                        </td>

                        <td>

                        </td>

                    </tr>

                </table>

            </div>

            <div class="lbFooter">

                <asp:Button ID="Btn_Tijiao" runat="server" Text="提交" CssClass="flat floatR" OnClientClick="return valiedate();" />

                <input type="button" class="flat floatR" onclick="CancleDiv();" value="取消" />

            </div>

        </div>

    </div>

    </form>

</body>

</html>

<script type="text/javascript" src="../Js/jquery-1.7.min.js"></script>

<script src="../Js/jquery.blockUI.js" type="text/javascript"></script>

<script src="../DatePicker/WdatePicker.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    //添加事件

    function addInfo() {

        $.blockUI({ message: $('#shows') }); //弹出层

    }

    //关闭弹出层

    function CancleDiv() {

        $.unblockUI();

    }

    //弹出层的提交事件

    function valiedate() {

        //先非空判断

        var ugangwei = document.getElementById("tb_gangwei").value;

        if (ugangwei == "") {

            alert("岗位不能为空！");

            return false;

        }

        var udate = document.getElementById("tb_time").value;

        if (udate == "") {

            alert("截止日期不能为空！");

            return false;

        }

        var uCount = document.getElementById("tb_Count").value;

        if (uCount < ) {

            alert("任务量输入有误！");

            return false;

        }

        var uName = document.getElementById("Ddl_user").value;

        //通过ajax和后台来对数据进行交互。

        $.ajax({

            type: "post",

            url: "RS_gongzuoliang.aspx/UpdateUserJH",

            data: '{ugangwei:"' + ugangwei + '",udate:"' + udate + '",uCount:"' + uCount + '",uName:"' + uName + '"}',

            contentType: "application/json; charset=utf-8",

            async: false,

            cache: false,

            success: function(msg) {

                if (msg.d == "ok") {

                    alert("操作成功！");

                    $("#btn_Select").click();

                    $.unblockUI(); //关闭弹出层

                }

                else {

                    alert("操作失败！");

                    $.unblockUI(); //关闭弹出层

                }

            }

        });

    }

</script>

后台：

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Web.Services;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

　　UserB ub = new UserB();
   //通过ajax来处理数据

    [WebMethod]

    public static string UpdateUserJH(string ugangwei, string udate, string uCount, string uName)

    {

        UserB ub = new UserB();

        int i = ub.AddRenWu(uName, uCount, ugangwei, Convert.ToDateTime(udate), DateTime.Now);

        if (i > )

        {

            return "ok";

        }

        return "error";

    }

}

相关文章