AJAX提交数据无刷新,“重量级”的实现:ModalUpdateProgress控件。

原创 2007年09月30日 00:15:00
需要下载 ModalUpdateProgress控件。自行修改它的AjaxControlTookit.dll的引用位置
 
前台页面代码!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Post.aspx.cs" Inherits="Demo1_Post" %>
<%@ Register Assembly="ModalUpdateProgress" Namespace="Jeffz.Web" TagPrefix="cc1" %>
<!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>无标题页</title>
    <style type="text/css">
    .modalBackground
{
 background-color : gray;
 filter : alpha(opacity=30);
 opacity : 0.7;
}
#updateAnimation
{
 color : Black;
 background-color : #ffffae;
 font-family : Arial;
 font-size : 8pt;
 font-weight : bold;
 line-height : 30px;
 height : 30px;
 padding-left : 5px;
 padding-right : 5px;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
          <%= DateTime.Now %>
                用户名:&nbsp;<asp:TextBox ID="txt_User" runat="server"></asp:TextBox>
               
            
                <asp:Button ID="btn_Post" runat="server" Text="Button" Width="70px" OnClick="btn_Post_Click" />
            </ContentTemplate>
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btn_Post" />
            </Triggers>
        </asp:UpdatePanel>
         
       
        &nbsp; &nbsp; &nbsp;
        <cc1:modalupdateprogess id="ModalUpdateProgess1" runat="server" associatedupdatepanelid="UpdatePanel1" BackgroundCssClass="modalBackground">
             <ProgressTemplate>
                     <div id="updateAnimation">
                         &nbsp;<img src="../Images/loading1.gif" />Working on your request...
        </div>
            </ProgressTemplate>
       
  
        </cc1:modalupdateprogess>
        &nbsp;<br />
        <br />
        &nbsp;
        </div>
    
    </div>
    </form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Threading;
cs 文件代码
public partial class Demo1_Post : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
 
        }
    }
    protected void btn_Post_Click(object sender, EventArgs e)
    {
    
        Thread.Sleep(5000);
        string username=this.txt_User.Text;
        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["constr"]);
            //throw new Exception("办法");
 
        con.Open();
        string sql = "Insert into Xk_User(Reg_Name,sex)values('"+username+"','21')";
        SqlCommand cmd = new SqlCommand(sql, con);
        bool result = Convert.ToBoolean(cmd.ExecuteNonQuery());
        if (result)
        {
            msgbox("提交成功");
      
        }
        else {
            msgbox("提交失败");
         
        }
        con.Close();
    }
    void msgbox(string msg)
    {
        ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "updateScript", "alert('"+msg+"');", true);
    }
}
 

Ajax实现无刷新表单提交

一般方式实现 function f1(){ //创建xmlHttp对象...
  • Yeoman92
  • Yeoman92
  • 2016年11月15日 17:53
  • 224

【Jsp】Ajax提交数据不刷新页面

传统的网页基本都是通过get或者post提交数据,但是一旦提交,本页面就被刷新了,即便提交到本页面,原本用户修改的数据就被清空了,这个场景在用户注册时,体验是很糟糕的。 Ajax为此而生,它可以提交...
  • u010875635
  • u010875635
  • 2017年04月14日 11:01
  • 1062

django 用jquery ajax提交form 实现刷新部分页面

首先要引入jquery文件,可以引入在线的,也可以下载离线的 添加进自己staticfiles 这里演示的是添加离线的 注意这句是要添加到自己写的jquery脚本前边 然后写一个简单的表...
  • u011437680
  • u011437680
  • 2015年04月11日 19:30
  • 5695

记录<a>标签使用中click事件中ajax提交数据后,整体页面也做了刷新操作的坑

标签中ajax提交,页面整体刷新的坑
  • u013833031
  • u013833031
  • 2017年12月21日 23:07
  • 44

ajax无刷新表单提交、验证码的使用

无刷新网页表单使用 1、给表单添加验证 //注册验证 $("#myform").valid([ { name: "reg_name", type: "text", ...
  • zhgl7688
  • zhgl7688
  • 2016年02月18日 08:19
  • 1260

ajax刷新ASP.NET Repeater控件的数据

使用repeater控件时,遇到这样一个问题,
  • u010371458
  • u010371458
  • 2014年01月25日 16:27
  • 1683

利用ajax和JSP技术实现网页中表单的局部刷新(只刷新表单数据,而不刷新整个页面)

在web开发中有时有局部刷新的需求,这样做的好处是克服了页面整体刷新对网络速度受限的情况。 1.MySQL数据表如下(简单举例): 表名:stu_info stuId               ...
  • Hadas_Wang
  • Hadas_Wang
  • 2015年08月12日 14:48
  • 5479

AJAX提交下拉框更新数据小笔记

好久没用ajax写下拉框了,让我现在直接写一个使用ajax提交下拉框的例子,我是真的不能一下子写出来的,作为后端开发人员,这些也不是经常用,所以现在写出来记录下来,方便以后回头看看,写的不好请见谅! ...
  • vitelon
  • vitelon
  • 2016年12月03日 01:30
  • 838

ajax无刷新加载数据

最近做了一个手机端的需求,里面有一个需要使用到ajax无刷新加载数据这样的功能 老样子先展示所需要实现的功能, 里面的数据是我的测试数据,随意了一点,但是能解决问题就行了,不要在意 正题...
  • hpu_yly_bj
  • hpu_yly_bj
  • 2017年05月16日 15:15
  • 386

jQuery实现AJAX定时刷新局部页面实例

jQuery实现AJAX定时刷新局部页面实例
  • sunyiming537
  • sunyiming537
  • 2016年09月06日 10:07
  • 5090
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX提交数据无刷新,“重量级”的实现:ModalUpdateProgress控件。
举报原因:
原因补充:

(最多只允许输入30个字)