asp.netajax与jquery和bootstrap的无刷新完美实现
Posted wslk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了asp.netajax与jquery和bootstrap的无刷新完美实现相关的知识，希望对你有一定的参考价值。
20190421asp.netajax与jquery和bootstrap的无刷新完美实现
设计代码和后台代码中重要部分加粗和深色以及字号加大。
设计前台代码：
<%@ Page Title="添加/修改商家" Language="C#" MasterPageFile="~/Site_cg007.Master" AutoEventWireup="true"
CodeBehind="web_cg007.aspx.cs" Inherits="jfydxfjz.web_cg007" EnableEventValidation="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>开发者</title>
<script type="text/javascript" src="scripts/bootstrap_v30/jquery/jquery-
1.8.3.min.js"></script>
<script type="text/javascript" src="scripts/layer/layer.js"></script>
<script type="text/javascript" src="scripts/bootstrap_v30/bootstrap/js/bootstrap.min.js"></script>
<link href="StyleSheet_dn.css" rel="stylesheet" type="text/css" />
<link href="scripts/bootstrap_v30/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{color:#686868;}
@media all and (max-width:768px){
p{font-size:12px;}
h2{font-size:16px;}
h3{font-size:14px;}
li{font-size:14px;margin-left:30px;}
.myimg{width:50%;}
}
/*模态窗口取消背景变暗的效果
.modal-backdrop-zrp
{
opacity: 0 !important;
filter: alpha(opacity=0) !important;
}
*/
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-12 text-center">
<asp:UpdateProgress ID="UpdateProgress_gly" runat="server" AssociatedUpdatePanelID="UpdatePanel_sjgl">
<ProgressTemplate><asp:Image ID="Image_gly"
CssClass="myimg" runat="server" ImageUrl="~/images/progress.gif" /></ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel_sjgl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div class="container">
<center>
<table class="nav-justified">
<tr>
<td style="text-align:left;">
<input type="text" runat="server" id="tbx_kfz_sjqq" placeholder="商家名称或QQ" />
</td>
<td>
<asp:Button ID="btn_kfz_cxsjqq" runat="server" Text="查询" CssClass="btn_dn" OnClick="btn_kfz_cxsjqq_Click" />
</td>
<td>
<button class="btn-primary" data-toggle="modal" data-target="#tjsjmodal" id="btn_html_tj">添加</button>
</td>
<td>
<asp:Button ID="btn_kfz_tjgly" runat="server" Text="添加管理员" CssClass="btn_dn" OnClick="btn_kfz_tjgly_Click" />
</td>
</tr>
<tr style="text-align:center">
<td colspan="4" style="padding-top:5px;text-align:center">
<!--采用自带的分页功能-->
<center>
<asp:GridView ID="GridView_sjgl" runat="server" Width="100%" AllowPaging="True" AutoGenerateColumns="False" CssClass="grid_dn" DataKeyNames="ID" HorizontalAlign="Center" OnRowCommand="GridView_sjgl_RowCommand" OnRowDataBound="GridView_sjgl_RowDataBound" OnPageIndexChanging="GridView_sjgl_PageIndexChanging">
<Columns>
<asp:BoundField DataField="ID" HeaderText="编号">
<HeaderStyle CssClass="header_dn" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Dwmc" HeaderText="商家">
<HeaderStyle CssClass="header_dn" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="sqbh" HeaderText="授权令">
<HeaderStyle CssClass="header_dn" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:TemplateField HeaderText="试用">
<HeaderStyle CssClass="header_dn" />
<ItemTemplate>
<asp:Button ID="btn_jk_sy" runat="server" Text="试用" CssClass="btn"
CommandArgument=‘<%# Eval("ID") %>‘ CommandName="cmn_jz_sy" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="注册">
<HeaderStyle CssClass="header_dn" />
<ItemTemplate>
<asp:Button ID="btn_jk_zc" runat="server" Text="注册" CssClass="btn"
CommandArgument=‘<%# Eval("ID") %>‘ CommandName="cmn_jz_zc" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="row_dn" />
<HeaderStyle CssClass="header_dn" />
<PagerSettings FirstPageText="首页" LastPageText="尾页" Mode="NextPreviousFirstLast" NextPageText="下页" PreviousPageText="上页" />
<PagerStyle HorizontalAlign="Center" />
<SelectedRowStyle CssClass="selectrow_dn" />
</asp:GridView>
</center>
</td>
</tr>
</table>
</center>
</div>
<!--添加商家弹出窗口：#tjsjmodal-->
<div id="tjsjmodal" class="modal fade bs-example-modal-sm" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">添加商家</h4>
</div>
<div class="modal-body">
<div class="form-group">
商家名称
<input type="text" runat="server" id="tbx_sjmc" placeholder="输入商家名称" />
</div>
<div class="form-group">
授权口令
<input type="text" runat="server" id="tbx_sqkl" placeholder="输入或者空白" />
</div>
<div class="form-group">
联 系 QQ
<input type="text" runat="server" id="tbx_lxqq" placeholder="输入QQ号" />
</div>
<div class="form-group">
<asp:Label ID="lbl_ts" runat="server" ForeColor="Red" Font-Size="Large" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<asp:Button ID="btn_gb" CssClass="btn" Text="关闭" runat="server" OnClick="btn_gb_Click" Visible="false" />
<asp:Button ID="btn_tjsj" CssClass="btn" Text="添加" runat="server" OnClick="btn_tjsj_Click" />
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
</asp:Content>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace jfydxfjz
{
public partial class web_cg007 : System.Web.UI.Page
{
private jf_cyclxfjzEntities sjklj = new jf_cyclxfjzEntities();//数据库连接
private webncxk_class gj = new webncxk_class();//加解密工具
protected void Page_Load(object sender, EventArgs e)
{
//加入用户登录认证判断---处理中
cy_kfz db_kfz = Session["E1DAD727864"] as cy_kfz;
if (db_kfz == null) //不是开发者
{
this.Response.Redirect("~/Default.aspx");
}
if (!Page.IsPostBack) //数据控件绑定数据，必须放入这里，不然每次对数据控件的操作都无效
{
this.GridView_sjgl.DataSource = sjklj.cy_sqdw.OrderByDescending(aa => aa.ID);
this.GridView_sjgl.DataBind();
}
}
protected void GridView_sjgl_RowCommand(object sender, GridViewCommandEventArgs e)
{
try
{
if (e.CommandName == "cmn_jz_sy") //单击了试用按钮
{
int id = int.Parse(e.CommandArgument.ToString());
//定位记录
var cxsy = from aa in sjklj.cy_sqdw
where aa.ID == id
select aa;
//授权口令生成器
//生成随机试用口令
Random sjs = new Random(DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Minute +
DateTime.Now.Second + DateTime.Now.Millisecond + 20316);
int scsjs = sjs.Next(10000, 99999);
string sqkl = "a" + scsjs.ToString();//试用口令
//没有加密的口令：
string ywkl=sqkl;
sqkl = webncxk_class.Encrypt(sqkl, webncxk_class.salt, webncxk_class.jmmy);//加密,自动生成的
if (string.IsNullOrWhiteSpace(cxsy.First().sqbh))//没有加入试用口令,正式使用默认30年
{
cxsy.First().sqbh = sqkl;
sjklj.SaveChanges();
//重新绑定
(e.CommandSource as Button).Text = ywkl;
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
// aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "顾客异步刷新");
return;
}
else
{
//对口令进行解密
string kl = cxsy.First().sqbh.Trim();
kl = gj.Decrypt(kl, webncxk_class.salt, webncxk_class.jmmy);
if (kl.Contains("a"))
{
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "已经是试用了");
return;
}
else
{
cxsy.First().sqbh = sqkl;
sjklj.SaveChanges();
//重新绑定
(e.CommandSource as Button).Text = ywkl;
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "加入试用成功！");
return;
}
}
}
//注册
if (e.CommandName == "cmn_jz_zc") //单击了注册
{
int id = int.Parse(e.CommandArgument.ToString());
//定位记录
var cxsy = from aa in sjklj.cy_sqdw
where aa.ID == id
select aa;
//授权口令生成器
//生成随机正式口令
Random sjs = new Random(DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Minute +
DateTime.Now.Second + DateTime.Now.Millisecond + 20316);
int scsjs = sjs.Next(10000, 99999);
string sqkl = "b" + scsjs.ToString();//注册口令
//没有加密的口令：
string ywkl = sqkl;
sqkl = webncxk_class.Encrypt(sqkl, webncxk_class.salt, webncxk_class.jmmy);//加密,自动生成的
if (string.IsNullOrWhiteSpace(cxsy.First().sqbh))//没有加入正式口令,正式使用默认30年
{
cxsy.First().sqbh = sqkl;
sjklj.SaveChanges();
//重新绑定
(e.CommandSource as Button).Text = ywkl;
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
// aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "顾客异步刷新");
return;
}
//对口令进行解密
string kl = cxsy.First().sqbh.Trim();
kl = gj.Decrypt(kl, webncxk_class.salt, webncxk_class.jmmy);
if (kl.Contains("b"))
{
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "已经注册成功！");
return;
}
else
{
cxsy.First().sqbh = sqkl;
cxsy.First().yxq = DateTime.Now.Year + 30;
sjklj.SaveChanges();
//重新绑定
(e.CommandSource as Button).Text = ywkl;
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
// aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "顾客异步刷新");
return;
}
}
}
catch (Exception err)
{
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "错误："+err.Message);
}
}
protected void btn_kfz_cxsjqq_Click(object sender, EventArgs e)
{
// this.UpdatePanel_sjgl.Update();
// aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "测试查询！");
try
{
string cxtj = this.tbx_kfz_sjqq.Value.Trim();
if (cxtj == string.Empty)
{
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "请输入学校名称或者QQ号！");
return;
}
var cxxx = (from aa in sjklj.cy_sqdw
where aa.Dwmc.Contains(cxtj) || aa.qq.Contains(cxtj)
select aa).OrderByDescending(bb => bb.ID);
this.GridView_sjgl.DataSource = cxxx;
this.GridView_sjgl.DataBind();
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
}
catch
{
}
}
protected void GridView_sjgl_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
try
{
int id = int.Parse(this.GridView_sjgl.DataKeys[e.Row.RowIndex].Value.ToString());//获取主键
//获取加密的授权口令
string sqkl = sjklj.cy_sqdw.Where(aa => aa.ID == id).First().sqbh;
sqkl = gj.Decrypt(sqkl, webncxk_class.salt, webncxk_class.jmmy);//解密
// this.Gv_xx.Rows[e.Row.RowIndex].Cells[2].Text = sqkl;//出错，索引找不到
e.Row.Cells[2].Text = sqkl;
}
catch
{
}
}
}
protected void GridView_sjgl_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
this.GridView_sjgl.PageIndex = e.NewPageIndex;
this.GridView_sjgl.DataSource = sjklj.cy_sqdw.OrderByDescending(aa => aa.ID);
this.GridView_sjgl.DataBind();
//刷新
this.UpdatePanel_sjgl.Update();
}
protected void btn_kfz_tjgly_Click(object sender, EventArgs e)
{
try
{
//123加密为初始密码
string jbmm = webncxk_class.Encrypt("123", webncxk_class.salt, webncxk_class.jmmy);
//查看管理员是否还没有添加,查找在管理员表中没有的xk_sqdw记录
var cxmygly = from aa in sjklj.cy_sqdw
where !sjklj.admin_user.Any(bb => bb.dwid == aa.ID)
select aa;//这个方法很不错
Random sjs = new Random(DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Minute +
DateTime.Now.Second + DateTime.Now.Millisecond + 20316);
foreach (var kk in cxmygly)
{
int scsjs = sjs.Next(1000, 9999);
admin_user tj_gly = new admin_user
{
dwid = kk.ID,
Yhm =kk.ID.ToString()+"a"+scsjs.ToString(),//按照a分割出dwid
Mm = jbmm
};
sjklj.admin_user.AddObject(tj_gly);
}
sjklj.SaveChanges();
//layeriujq.Msg("管理员添加完成", "6", "3000", this.Page);
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "管理员添加完成！");
return;
}
catch
{
}
}
protected void btn_tjsj_Click(object sender, EventArgs e)
{
try
{
//只需要商家名称和QQ号
string sjmc = this.tbx_sjmc.Value.Trim();
string qq = this.tbx_lxqq.Value.Trim();
string sqxx = this.tbx_sqkl.Value.Trim();
//生成随机试用口令
Random sjs = new Random(DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Minute +
DateTime.Now.Second + DateTime.Now.Millisecond + 20316);
int scsjs = sjs.Next(10000, 99999);
string sqkl = "a" + scsjs.ToString();//试用口令
sqkl = webncxk_class.Encrypt(sqkl, webncxk_class.salt, webncxk_class.jmmy);//加密,自动生成的
string sdsqkl = "";//人工生成的授权口令
if (sqxx != string.Empty)
{
sdsqkl = webncxk_class.Encrypt(sqxx, webncxk_class.salt, webncxk_class.jmmy);
}
if (sjmc == string.Empty || qq == string.Empty)
{
//layeriujq.Msg("学校名称或QQ不能为空", "2", "3000", this.Page);
// this.lbl_tj_xx_ts.Text = "商家名称或QQ不能为空";
//有条件更新，而且子控件
this.UpdatePanel_sjgl.Update();
// aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "商家名称或QQ不能为空"); //两个弹窗，前者会消失
//aspnetajaxjavascript.Msg(this.UpdatePanel_sjgl, "商家名称或QQ不能为空", "2", "2000");//bootstrap模态与layer冲突
this.lbl_ts.Text = "商家名称或QQ不能为空";
ScriptManager.RegisterStartupScript(this.UpdatePanel_sjgl, this.UpdatePanel_sjgl.GetType(),
"updateScript", "$(‘.modal‘).modal();",true);//改为false，则不返回提示结果
//使用火狐浏览器完美实现，QQ浏览器也不错，谷歌浏览器的低版本则不能很好实现(高版本可以)，需要重庆打开该页面（重定向）才可以
// System.Threading.Thread.Sleep(200);
//ScriptManager.RegisterStartupScript(this.UpdatePanel_sjgl, this.UpdatePanel_sjgl.GetType(),
//"updateScript", "$(‘#btn_html_tj‘).click();", true);//模态窗口消失后，200毫秒再自动点击
//ScriptManager.RegisterStartupScript(this.UpdatePanel_sjgl, this.UpdatePanel_sjgl.GetType(),
// "updateScript", "$(‘#tjsjmodal‘).modal(‘show‘);", true);
// aspnetajaxjavascript.Msg(this.UpdatePanel_sjgl, "商家名称或QQ不能为空", "2", "50");//bootstrap模态与layer冲突
// ScriptManager.RegisterStartupScript(this.UpdatePanel_sjgl, this.UpdatePanel_sjgl.GetType(),
// "updateScript", "$(‘#btn_html_tj‘).click();", true);//模态窗口消失后，200毫秒再自动点击
return;
}
//查找学校名称是否唯一
var cxxx = from aa in sjklj.cy_sqdw
where aa.Dwmc ==sjmc
select aa;
if (cxxx.Count() > 0)
{
//layeriujq.Msg("该学校名称已经存在", "2", "3000", this.Page);//另一个页面调用该提示无效，只能当前页面
// this.lbl_tj_xx_ts.Text = "该学校名称已经存在";
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "该商家名称已经存在");
return;
}
else //添加
{
if (sqxx == string.Empty) //自动生成
{
cy_sqdw tj_sqdw = new cy_sqdw
{
Dwmc = sjmc,
qq = qq,
sqbh = sqkl
};
sjklj.cy_sqdw.AddObject(tj_sqdw);
sjklj.SaveChanges();
// this.lbl_tj_xx_ts.Text = "添加试用学校成功！";
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "添加试用商家成功！");
}
else
{
cy_sqdw tj_sqdw = new cy_sqdw
{
Dwmc = sjmc,
qq = qq,
sqbh = sdsqkl
};
sjklj.cy_sqdw.AddObject(tj_sqdw);
sjklj.SaveChanges();
// this.lbl_tj_xx_ts.Text = "添加试用学校成功！";
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "添加试用商家成功！");
}
}
}
catch(Exception err)
{
this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
aspnetajaxjavascript.layermsg(this.UpdatePanel_sjgl, "错误："+err.Message);
}
}
protected void btn_gb_Click(object sender, EventArgs e)
{
// this.UpdatePanel_sjgl.Update();//有条件更新，而且子控件
// ScriptManager.RegisterStartupScript(this.UpdatePanel_sjgl, this.UpdatePanel_sjgl.GetType(),
// "updateScript", "$(‘#tjsjmodal‘).modal(‘hide‘);", true);
// this.Page_Load(null, null);//野蛮刷新，最下策
this.Response.Redirect("~/web_cg007.aspx");//重定向打开本页面
}
}
}
以上是关于asp.netajax与jquery和bootstrap的无刷新完美实现的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET AJAX $find 方法在 jQuery $(document).ready() 方法中使用时失败
ASP.NET MVC 中的 ASP.NET AJAX 与 jQuery