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取消编辑。

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