利用ASP.NET AJAX实现表格更新程序

转载 2007年09月25日 12:41:00
自己做了一个小程序,表格更新程序,主要功能为使用CheckBoxe允许编辑GridView行,并且能够保存修改的信息
具体程序如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipleUpdateDemo.aspx.cs" Inherits="MultipleUpdateDemo" %>

<!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>
    <script type="text/C#" runat="server">
        [System.Web.Services.WebMethod]
        public static bool UpdateText(string categoryName, string description, string Id)
        {
            string conectionString = "Data Source=(local);Initial Catalog=Northwind;User ID=sa;Password=sa";
            System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(conectionString);
            conn.Open();
            System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand("UPDATE Categories SET CategoryName = '" + categoryName + "', Description = '" + description + "' WHERE CategoryID = " + Id, conn);
            cmd.ExecuteNonQuery();
            conn.Close();
            return true;
            
        }
    </script>
    <script type="text/javascript">

    function disableGridViewTextBoxes()
    {
        var gvControl = document.getElementById("gvCategories");
        var inputElements = gvControl.getElementsByTagName("INPUT");
        for( i = 0;i < inputElements.length; i++)
        {
            if(isTextBox(inputElements[i]))
            {
                inputElements[i].disabled = true;
            }
        }
    }

    function isTextBox(obj)
    {
        return obj.type == 'text';
    }

    function editMode(obj)
    {
        var rowObject = obj.parentElement.parentElement;
        var inputElements = getElementsByTagName(rowObject,"INPUT");

        if(obj.checked)
        {
            showElements(inputElements,"INPUT","text");
        }
        else
        {
            hideElements(inputElements,"text");
        }
    }
    
    function updateMode(obj)
    {
        var rowObject = obj.parentElement.parentElement;
        var inputElements = getElementsByTagName(rowObject,"INPUT");
        
        var msg = new Array();

        for(var i=0;i<inputElements.length;i++)
        {
            if(inputElements[i].type == "checkbox")
            {
                inputElements[i].checked = false;
            }
            if(inputElements[i].type == "text")
            {
                msg.push(inputElements[i].value);
            }
            if(inputElements[i].type == "hidden")
            {
                msg.push(inputElements[i].value);
            }
        }
        PageMethods.UpdateText(msg[0], msg[1], msg[2], onSuccess);
        hideElements(inputElements,"text");
        
    }
    
    function onSuccess(response)
    {
    }

    function showElements(list, tagName,type)
    {
        for(i = 0;i < list.length; i++)
        {
            if(isTypeOf(list[i],"text"))
            {
                list[i].disabled = false;
                list[i].focus();
                //list[i].select();
            }
        }
    }

    function isTypeOf(obj,type)
    {
        return obj.type == type;
    }

    function hideElements(list, type)
    {
        for(i = 0; i < list.length;i++)
        {
            if(isTypeOf(list[i],type))
            {
                list[i].disabled = true;
            }
        }
    }
    function getElementsByTagName(obj,tagName)
    {
        return obj.getElementsByTagName(tagName);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    <div>
    <asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:CheckBox ID="chkSelect" runat="server" onclick="editMode(this)" />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Category Name">
    <ItemTemplate>
    <asp:TextBox ID="txtCategoryName" BorderWidth="0px" ForeColor="red" runat="server"
    Text='<%# Eval("CategoryName") %>' />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Description">
    <ItemTemplate>
    <asp:TextBox ID="txtDescription" BorderWidth="0px" ForeColor="red" runat="server"
    Text='<%# Eval("Description") %>' />
    </ItemTemplate>
    </asp:TemplateField>
     <asp:TemplateField>
    <ItemTemplate>
    <asp:HiddenField Value='<%# Eval("CategoryID") %>' ID="hiddenId" runat="server" />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <ItemTemplate>
    <input type="button" runat="server" id="btnUpdate" value="更新" onclick="updateMode(this)" />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>
<script>
    disableGridViewTextBoxes();
</script>
运行结果为:

打上勾变为表格该行可编辑:

点击更新后就保存修改信息:

ASP.NET ScriptManager 帮助您实现 Web 应用程序的 AJAX 功能

msdn:  http://msdn.microsoft.com/zh-cn/magazine/cc163354.aspx 当今,网站的使用者可以像发布者那样,对网站的内容、发展方向及其...
  • sky1069
  • sky1069
  • 2011年08月10日 08:16
  • 834

ASP.NET利用ajax实现类似百度的智能提示框

大家好,我是小象。交流促进成长,实践出真知!坚持原创。。。。。        这个例子也是我前几天才做的。        百度的智能提示框给了大家很大的便利,但是很多人想应该怎么实现这个功能,我今...

利用AJAX和ASP.NET实现简单聊天室

利用AJAX和ASP.NET实现简单聊天室 我的第一个简单的Chatroom是用ASP3.0写成的。那无外乎有二个TextBox,他们发送消息 给程序变量然后显示在一个每秒刷新的页面上。在那个...
  • Li_soso
  • Li_soso
  • 2013年02月28日 12:38
  • 336

ASP.NET Web利用AJAX实现搜索提示

我平时的软件开发中,信息的搜索是经常碰到的,增加搜索关键字提示是提高用户体验的一种很好的办法。今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示!          1.需要了解的一...

Asp.net 利用Jquery Ajax实现(验证用户名是否存)用户注册

====================================================== 注:本文源代码点此下载 =============================...

Asp.net利用JQuery AJAX实现无刷新评论

首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了。     再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意...
  • zhanzkw
  • zhanzkw
  • 2011年10月27日 09:26
  • 654

基于Redis的ASP.NET与js(AJAX)的聊天程序[js长连接][伪推送]

首先是安装Redis, 此处略过n步... 然后,新建一个ASP.NET的MVC2的工程《MvcMessage》,需要下载ServiceStack.Redis并把dll复制到工程下,并正确引...
  • cjy37
  • cjy37
  • 2012年01月03日 00:13
  • 2388
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用ASP.NET AJAX实现表格更新程序
举报原因:
原因补充:

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