.NET中使用Jquery和Ajax（一）

做网页开发也好几年了，一直困扰我的两大难题，具体来说主要做.NET的WebFrom中使用了服务器控件，导致一直有那么些问题无法或者说那个时候的我不太愿意去解决。

一个是按钮提交，一个是数据分页。

在之前也看到过很多Jquery的插件来做这些事，但是一和服务器端控件整合在一起就不太会了，然后在最近看了点Ajax的知识，也找了点demo把这些整合到了一起，终于解决了这两个难题。

现在就听我慢慢道来：

首先是找到了一个Jquery的弹窗\层插件layer，官网地址http://sentsin.com/jquery/layer/ ，这个插件能做很多事，但现在的对我来讲就是一个提示信息，一个确认框，一个确定框等等。

需要饮用Jquery1.8以上版本，和layer.js这两个文件，首先接触下我们的基础使用：

信息框

HTML代码

信息

Javascript代码

 $('.msg').on('click', function () {
         layer.msg("这是提示信息哈~",2,1);
 })

然后成功之后运行就可以看到: 。

弹出框

HTML代码

错误提示

Javascript代码

$(function () {
    $('.alert').on('click', function () {
       layer.alert('这是提示信息哈', 8);
    });
}）

然后成功之后运行就可以看到:

确认框


HTML代码

删除

Javascript代码

$('.confirm').on('click', function () {
       layer.confirm('确定要删除么？', function () {
             layer.msg('删除成功！', 2， 2）
       });
});

然后成功之后运行就可以看到 : 点击确定之后就会看到： 。

提交框

HTML代码

提交

Javascript代码

$('.submit').on('click',function() {
    $.layer({
        shade: [1],
        area: ['top', 'auto'],
        dialog: {
            msg: '是否真的提交！！',
            btns: 2,
            type: 4,
            btn: ['确定', '取消'],
            yes: function() {
                var ii = layer.load('加载中', 1);
                setTimeout(function() {
                    layer.msg('添加成功', 2, 1);
                },
                1000);
                setTimeout(function() {
                    location.href = "http://blog.csdn.net/tuzkiss1017";
                },
                2000);
            },
            no: function() {
                layer.msg('添加取消', 2, 8);
            }
        }
    });
})






 然后成功之后运行就可以看到
，点击确定之后会加载提交动画
，提交成功之后就会
。




当然这些只是我经常要用的所以把它做了出来，更多的可以详见layer官网API文档和demo。

解决第一步之后就可以进入到使用Ajax了，好了，与Ajax整合将在下篇博文中讲到。