<%@ 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=" 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 < 1) { 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 > 0) { return "ok"; } return "error"; } }