弹出层和ajax数据交互

<%@ 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数据交互的更多相关文章

JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
JS实现弹出层对话框
点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...
权限管理系统之LayUI实现页面增删改查和弹出层交互
由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...
layui在open弹出层回显，解决动态select数据回显问题
//监听数据表格工具条 table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 l ...
Lyaer 单弹出层获取数据
案例完整代码如下 var cls = layer.open({ title: "请选择被换班人", type: 2, ...
wuzhicms上传弹出层，如何返回数据到当前页面？
我们要实现下面功能: 上传图片后,返回图片列表到页面: 点击开始上传后,自动返回结果到页面. 原理:通过openiframe打开上传弹出层. 其中: returntype 在这里是 2 www/res ...
jQuery layer弹出层插件 http://layer.layui.com/直接上官网学
在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

随机推荐

http文件的断点续传和下载
http://www.tuicool.com/articles/ZbyymqJ Content-Disposition:inline; filename= "c501b_01_h264_sd ...
禁用ipv6
禁用ipv6 1.在/etc/sysctl.conf 添加一行:net.ipv6.conf.all.disable_ipv6=1 2.在/etc/sysconfig/network 添加一行:NETW ...
Java 找到数组中两个元素相加等于指定数的所有组合
思路1:可以用hash表来存储数组中的元素,这样我们取得一个数后,去判断sum - val 在不在数组中,如果在数组中,则找到了一对二元组,它们的和为sum,该算法的缺点就是需要用到一个hash表,增 ...
linux的5个查找命令_转
转自:http://www.ruanyifeng.com/blog/2009/10/5_ways_to_search_for_files_using_the_terminal.html 在Linux中 ...
Springfox Reference Documentation
1. Introduction The Springfox suite of java libraries are all about automating the generation of mac ...
pip是用国内镜像源
pipy国内镜像目前有: http://pypi.douban.com/ 豆瓣 http://pypi.hustunique.com/ 华中理工大学 http://pypi.sdutlinux.o ...
C++ note
主要是为了学习c++的类和对象内容摘自 c++概述 http://see.xidian.edu.cn/cpp/biancheng/cpp/rumen_1/ 1,变量 ,C++中,我们可以在 ...
基于jdk proxy的动态代理模式
代理模式是spring AOP机制的实现基础,有必要学习一下. 有两种,一种是目标类有接口的, 采用JDK动态代理,一种是目标类没接口的,采用CGLIB动态代理. 先看一组代码, package c ...
c#操作Excel时，抛出异常：“未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序”
我们开发环境下,使用excel导入数据到数据库中,编译的软件起初是x86 方式,起初并未发现什么问题,一切很正常: 程序该进的过程: 后来导入文件一次就要读取几百G的数据导入数据库中,使用编译的X86 ...
Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）
背景曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...

弹出层和ajax数据交互

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

随机推荐

热门专题