使用Ajax更新数据库

本例通过CheckBox控制修改状态。使用按钮通过Ajax更新数据。

例子下载： https://files.cnblogs.com/scottckt/frmGetDb.rar

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmGetDb.aspx.cs" Inherits="frmGetDb" %>

<!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 asName, string asId)
        {
            string conectionString = "Data Source=scott;Initial Catalog=bbs;Persist Security Info=True;User ID=sa;Password=123";
            System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(conectionString);
            conn.Open();
            string sSQl = "UPDATE block SET block_name = '" + asName + "' WHERE block_id = " + asId;
            System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(sSQl, conn);
            cmd.ExecuteNonQuery();

            conn.Close();
            conn.Close();
            conn.Dispose();
            return true;

        }
    </script>

    <script type="text/javascript">

    //启动后将所有控件状态设为不可用
    function disableGridViewTextBoxes()
    {
        //得到GridView
        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;
            }
        }
    }

    //判断是否是textBox
    function isTextBox(obj)
    {
        return obj.type == 'text';
    }

    //checkBox选择后改变状态
    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="block_name">
                        <ItemTemplate>
                            <asp:TextBox ID="txbName" BorderWidth="0px" ForeColor="red" runat="server" Text='<%# Eval("block_name") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="block_id">
                        <ItemTemplate>
                            <asp:HiddenField Value='<%# Eval("block_id") %>' 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:bbsConnectionString %>"
                SelectCommand="SELECT [block_id], [block_name] FROM [block]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

<script>
disableGridViewTextBoxes();
</script>

——宽田著——