Ajax实现将可以编辑的表格与数据库交互

上篇博客通过JQuery实现单击表格进行编辑的功能，本篇博客将继续延伸，将在此功能的基础之上，与数据库交互，实现真正的可编辑。



传统的网页，如果需要更新数据，需要更新整个页面，而Ajax可以通过在后台与服务器进行少量数据交换，使网页实现异步更新，是一种在无需加载整个网页的情况下， 能够更新部分网页的技术。

本篇博客将上传我在项目用到的可以编辑的表格的源代码。继续丰富了上篇博客中的编辑效果，又与数据库进行交互，实现真正的可编辑。

Html页面的代码：

<div class="span9">
       <%-- 显示提示信息--%>
        <asp:Label ID="Label1" runat="server" Text="说明 ：单击模块名称进行修改，回车或单击其它地方确定修改，ESC取消编辑。" ForeColor="Red"></asp:Label>
     <%--   局部更新--%>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%-- 表格 --%>
                <table class="table table-striped">
                    <tr>
                        <th>模块ID</th>
                        <th>模块名称</th>
                        <th>删除</th>
                    </tr>
                    <%--绑定到Repeater--%>
                    <asp:Repeater ID="rptModel" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td><%#Eval("mdlID")%></td>
                                <td class="modelname"><%#Eval("mdlName")%></td>
                                <td>
                                    <asp:LinkButton ID="lbtnDelete" runat="server" OnClick="lbtnDelete_Click" OnClientClick="return confirm('是否要真的删除？')" CommandArgument='<%#Eval("mdlID") %>'>删除</asp:LinkButton>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
        <%--显示错误信息--%>
        <div id="test"></div>
        <%--添加模块名称--%>
        <p>
            <asp:Label ID="Label2" runat="server" Text="模块名称"></asp:Label>
            <asp:TextBox ID="txtModelName" runat="server"></asp:TextBox>
            <asp:Button ID="btnAddModel" UseSubmitBehavior="false" runat="server" Text="添加" CssClass="btn btn-info" OnClick="btnAddModel_Click" />
        </p>
    </div>

绑定信息代码：

protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //绑定模块信息
                ModelInfoMgr modelInfoMgr = new ModelInfoMgr();
                DataTable dt = new DataTable();
                //查询所有的模块信息
                dt = modelInfoMgr.SelectAll();
                //绑定
                rptModel.DataSource = dt;
                rptModel.DataBind();

            }
        }

重头戏来了，JS代码

$(function () {
    $(".modelname").click(function () {//给页面中的modelname的标签加上click事件
        var objTD = $(this);
        //alert("heheh");
        //点击后，内容变成文本框
        var oldText = $(this).text();  //保存原来的文本
        var input =$( "<input type='text'  value='" + oldText + "'/>");//文本框的html代码
        objTD.html(input);  //td变为文本
        //设置文本框的点击事件失效
        input.click(function () {
            return false;
        });
        //设置文本框的样式
        input.css("border-width", 0);  //边框为0
        input.css("margin", 0);
        input.css("padding", 0);
        input.css("color","black");
        //input.height(objTD.height);//文本框的高度为当前td的高度
        //input.width(objTD.width);
        input.trigger("focus").trigger("select");//全选
        //文本框失去焦点的时候变为文本
        input.blur(function () {
            var newText = $(this).val();
            var input_blur = $(this);
            //objTD.html(newText);
            //当原来的名称与修改后的名称不同时才进行数据库提交操作
            if (oldText != newText) {

                //获取该模块名称对应的ID
                var modelID = $.trim(objTD.prev().text());
                // AJAX异步更改数据库
                var url = "../handler/changeModelName.ashx?modelname=" + encodeURI(encodeURI(newText)) + "&modelID=" + modelID + "&t=" + new Date();
                $.get(url, function (data) {
                    if (data == "false") {
                        $("#test").text("模块名称修改失败，请检查是否重复");
                        input_blur.trigger("focus").trigger("select");  //文本框全选
                    }
                    else {
                        $("#test").text("");
                        objTD.html(newText);
                    }
                });
            }
            else {
                //前后文本一样，将文本宽变成标签
                objTD.html(newText);
            }
        });
        //在文本框中按下键盘某建
        input.keydown(function () {
            var jianzhi = event.keyCode;
            var input_keydown = $(this);
            switch (jianzhi) {
                case 13:   //按下回车，保存修改
                    var newText = input_keydown.val();//修改后的名称
                    //当原来的名称与修改后的名称不同时才进行数据库提交操作
                    if (oldText != newText) {
                        //获取该模块名称对应的ID
                        var modelID = $.trim(objTD.prev().text());
                        // AJAX异步更改数据库
                        var url = "../handler/changeModelName.ashx?modelname=" + encodeURI(encodeURI(newText)) + "&modelID=" + modelID + "&t=" + new Date();
                        $.get(url, function (data) {
                            if (data == "false") {
                                $("#test").text("模块名称修改失败，请检查是否重复");
                                input_keydown.trigger("focus").trigger("select");  //文本框全选
                            }
                            else {
                                $("#test").text("");
                                objTD.html(newText);
                              
                            }
                        });
                    }
                    else {
                        //前后文本一样，将文本宽变成标签
                        objTD.html(newText);
                    }
                    break;
                case 27:    //按下Esc，取消修改，吧文本框变成文本
                    $("#test").text("");
                    objTD.html(oldText);
                    break;
            }
        });
    });
   
});
//屏蔽Enter按键
$(document).keydown(function (event) {
    switch (event.keyCode) {
        case 13: return false;
    }
});

handler文件：

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string modelid= context.Request.QueryString["modelID"];
            string modelname=context.Server.UrlDecode(context.Request.QueryString["modelname"]);
            //更改模块名称
            ModelInfoMgr modelInfoMgr = new ModelInfoMgr();
            ModelInfo modelInfo = new ModelInfo();
            modelInfo.ID = modelid;
            modelInfo.Name = modelname;
            //判断是否已经存在
            if (modelInfoMgr .Exists(modelInfo))
            {
                context.Response.Write("false");
                return;
            }
          bool flag=  modelInfoMgr.Update(modelInfo);
          if (flag)
          {
              context.Response.Write("true");
          }
          else
          {
              context.Response.Write("false");
          }
        }

效果图：



如图中的提示，上面的代码做单击 模块名称就可以进行修改，且回车或者单击其他地方确定修改，按ESC取消编辑。

这是在牛腩老师的方法，希望在以后的学习中，可以领会此方法之外，能够更新知识和做法，也希望得到大牛的指导和点拨，再次感谢了。