<%@ 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";

    }

}

弹出层和ajax数据交互的更多相关文章

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JS实现弹出层对话框

    点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...

  5. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

  6. layui在open弹出层回显，解决动态select数据回显问题

    //监听数据表格工具条         table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 l ...

  7. Lyaer 单弹出层获取数据

    案例完整代码如下 var cls = layer.open({                title: "请选择被换班人",                type: 2,   ...

  8. wuzhicms上传弹出层，如何返回数据到当前页面？

    我们要实现下面功能: 上传图片后,返回图片列表到页面: 点击开始上传后,自动返回结果到页面. 原理:通过openiframe打开上传弹出层. 其中: returntype 在这里是 2 www/res ...

  9. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

随机推荐

  1. Android笔记：Socket客户端收发数据

    client.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and ...

  2. CALayer的使用

    http://blog.csdn.net/maylorchao/article/details/42652161 http://www.jianshu.com/p/8b0d694d1c69城觅

  3. PMP--论文部分

    个人观点,是三个部分最简单,最容易复习的,当然,如果你没有做好一个项目的摘要和正文的背诵,连各个过程的工具输输入输出的都记不住几个,就不用往下看了,以上内容的观点,至少保证真题做三次以上,书籍教材看三 ...

  4. LeetCode Majority Element I && II

    原题链接在这里:Majority Element I,Majority Element II 对于Majority Element I 来说,有多重解法. Method 1:最容易想到的就是用Hash ...

  5. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  6. CSS：CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  7. 线上Linux服务器运维安全策略经验分享

    线上Linux服务器运维安全策略经验分享 https://mp.weixin.qq.com/s?__biz=MjM5NTU2MTQwNA==&mid=402022683&idx=1&a ...

  8. 磁盘空间已满导致rabbitmq无法启动

    rabbitmq-server 启动问题 今天遇到一个挺奇怪的 rabbitmq-server 的启动问题. 在内部使用的 openstack 环境上,rabbitmq-server突然就关掉了,无法 ...

  9. MVC项目实践,在三层架构下实现SportsStore-03,Ninject控制器工厂等

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  10. dojo使用疑难杂症集锦

    最近在用dojo做项目, 把使用过程中遇到的一些问题记录下来, 方便以后查阅, 因为问题不断, 所以持续更新中.......... 嵌套 TabContainer 时会出现样式问题: tab控制样式问 ...