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取消編輯。

這是在牛腩老師的方法，希望在以後的學習中，可以領會此方法之外，能夠更新知識和做法，也希望得到大牛的指導和點撥，再次感謝了。