ASP.NET C# 簽名 canvas 正在編輯 gridview

Question

我是stackoverflow的新手，如果我錯過了什么，請不要猶豫發表評論。

所以，這是我的問題。

我正在嘗試在我的可編輯 gridview 中包含簽名 canvas。 我嘗試了許多不同的解決方案，但 canvas 從未工作過。 我曾嘗試將其從 gridview 中取出，令我驚訝的是，簽名正在工作。 但是，當我單擊箭頭進行編輯時，canvas 停止工作，即使它不在 gridview 中。

知道為什么嗎？

這是我的代碼，我沒有包括所有內容，如果您需要更多，請詢問。

ps：gridview 中的所有其他內容都可以正常工作並且顯示沒有問題。

ASP.NET

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">


    <asp:UpdatePanel ID="Panel1" runat="server">
    <ContentTemplate> <%--runat="server">--%>

  <asp:GridView 
             ID="GridView2" 
             runat="server" 
             GridLines="None" 
             AutoGenerateColumns="False" 
             CellPadding="6" 
             CssClass="mGrid" 
             OnRowCancelingEdit="GridView2_RowCancelingEdit"   
             OnRowEditing="GridView2_RowEditing" 
             OnRowUpdating="GridView2_RowUpdating" 
             OnRowDeleting="GridView2_RowDeleting" 
             OnRowDataBound="GridView2_RowDataBound">  
            <Columns>                  
                <asp:TemplateField  HeaderText="Numéro">  
                    <ItemTemplate><asp:Label ID="lbl_ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label></ItemTemplate>  
                    <EditItemTemplate>  
                            <table  cellpadding="0" cellspacing="0" width="100%" width="100%">
                            <tr class="bottom" >
                                <td width="70px"><asp:Label ID="lbl_ID2" runat="server" Text='<%#Eval("ID") %>'></asp:Label></td>
                                <td width="205px"><asp:Label ID="lbl_User2" runat="server" Text='<%#Eval("User") %>'></asp:Label></td>
                                <td width="123px"><asp:Label ID="lbl_Dep2" runat="server" Text='<%#Eval("Departement") %>'></asp:Label></td>
                                <td width="52px"><asp:Label ID="lbl_Total2" runat="server" Text='<%#Eval("Total") %>'></asp:Label></td>
                                <td width="80px"><asp:Label ID="lbl_Date2" runat="server" Text='<%#Eval("Date") %>'></asp:Label></td>
                             </tr><tr class="spacer"><td></td></tr>
                            <tr>
                                <td class="support"></td>
                                <td colspan="4"><asp:GridView GridLines="None" CssClass="mGrid2" width="100%" ID="GridView" runat="server"></asp:GridView></td>
                            </tr>
                            <tr class="spacer">
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="2"><asp:Label ID="Lproject" runat="server" Text=""></asp:Label></td>
                                <td class="bottom" colspan="2" rowspan="4">                   
                                   <div class="tools">
                                   <a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">Eraser</a>
                                   </div><br />
                                    <canvas id="colors_sketch" width="300px" height="100pxs"></canvas><asp:HiddenField ID="ImageVal" runat="server" />                   
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="2"><asp:Label ID="Lpaiement" runat="server" Text=""></asp:Label></td>
                                <td><asp:Button ID="btn_Update" runat="server" Text="Autoriser" CommandName="Update"/></td>
                            </tr>
                            <tr>
                                <td  colspan="2">Autorisé/Refuser par :</td>
                            </tr>
                            <tr class="bottom" >
                                <td colspan="2"><asp:TextBox ID="Tauth" runat="server"></asp:TextBox></td>               
                                <td><asp:Button ID="btn_Delete" runat="server" Text="Refuser" CommandName="Delete"/>  </td>
                            </tr>
                        </table>
                    </EditItemTemplate> 
                </asp:TemplateField >  
                <asp:TemplateField HeaderText="Soumis">  
                    <ItemTemplate><asp:Label  ID="lbl_User" runat="server" Text='<%#Eval("User") %>'></asp:Label></ItemTemplate>  
                </asp:TemplateField>  
                <asp:TemplateField HeaderText="Departement">  
                    <ItemTemplate>  <asp:Label ID="lbl_Name" runat="server" Text='<%#Eval("Departement") %>'></asp:Label>  </ItemTemplate>  
                </asp:TemplateField>  
                <asp:TemplateField HeaderText="Total">  
                    <ItemTemplate><asp:Label ID="lbl_Total" runat="server" Text='<%#Eval("Total") %>'></asp:Label></ItemTemplate>  
                </asp:TemplateField> 
                <asp:TemplateField HeaderText="Date">  
                    <ItemTemplate><asp:Label ID="lbl_Date" runat="server" Text='<%#Eval("Date") %>'></asp:Label></ItemTemplate>  
                </asp:TemplateField> 
                <asp:TemplateField>  
                    <ItemTemplate><asp:Button ID="btn_Edit" runat="server" Text="↓" CommandName="Edit" /></ItemTemplate>  
                    <EditItemTemplate>  
                        <asp:Button ID="btn_Cancel" runat="server" Text="↑" CommandName="Cancel" />  
                    </EditItemTemplate>   
                    </asp:TemplateField>  
            </Columns>  
           <HeaderStyle />             
        </asp:GridView>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#colors_sketch').sketch();
                $(".tools a").eq(0).attr("style", "color:#000");
                $(".tools a").click(function () {
                    $(".tools a").removeAttr("style");
                    $(this).attr("style", "color:#000");
                });
                $("#btnSave").bind("click", function () {                
                    var base64 = $('#colors_sketch')[0].toDataURL();
                    $('[Id*=ImageVal]').val(base64);
                });
            });
        </script>

 </ContentTemplate>     
        </asp:UpdatePanel> 
    </div>

</asp:Content>

C#

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowState.ToString().Contains("Edit"))
        {
            GridView editGrid = sender as GridView;
            int colSpan = editGrid.Columns.Count;
            for (int i = 1; i < colSpan - 1 ; i++)
            {
                e.Row.Cells[i].Visible = false;
                e.Row.Cells[i].Controls.Clear();
            }

            e.Row.Cells[0].Attributes["ColSpan"] = (colSpan - 1).ToString();
        }

    }

 protected void GridView2_RowEditing(object sender, System.Web.UI.WebControls.GridViewEditEventArgs e)
    {



        //NewEditIndex property used to determine the index of the row being edited.  
        GridView2.EditIndex = e.NewEditIndex;
        fillcomm(Ddepfilt.SelectedValue);
        GridView GV = GridView2.Rows[GridView2.EditIndex].FindControl("GridView") as GridView;
        Label id = GridView2.Rows[GridView2.EditIndex].FindControl("lbl_ID2") as Label;       
        Label project = GridView2.Rows[GridView2.EditIndex].FindControl("Lproject") as Label;
        Label paiement = GridView2.Rows[GridView2.EditIndex].FindControl("Lpaiement") as Label;

        string query2 = "select bdc_projectname, bdc_paiement from BDC where bdc_num = '" + id.Text + "'";
        string query = "select bdci_qty as Qty, bdci_item as Decription, bdci_price as Prix from BDCITEM inner join BDC on bdci_num = bdc_num where bdc_num = '"+id.Text+"'";
        SqlDataAdapter gridadapt = new SqlDataAdapter(query, conn);
        SqlDataAdapter detailsadapt = new SqlDataAdapter(query2, conn);
        DataSet currentgrid = new DataSet();
        DataSet details = new DataSet();

        conn.Open();

        gridadapt.Fill(currentgrid);
        detailsadapt.Fill(details);

        conn.Close();

        project.Text = "Projet : " + details.Tables[0].Rows[0][0].ToString();
        paiement.Text = "Méthode de paiement : " + details.Tables[0].Rows[0][1].ToString();

        GV.DataSource = currentgrid;
        GV.DataBind();




    }

Answer 1

1. 您在客戶端的 DOM 中更改的所有內容，例如使用 javascript 添加/更改內容，都將丟失，當您回發並且不以任何方式告訴服務器更改時。
2. 當您使用 async-Postbacks（在您的情況下為UpdatePanels ）時， document.ready -Event 僅觸發一次 - 在第一次加載頁面時。 window.onload 。
3. 不要將 javascript-links 之類的東西放在UpdatePanel中，它應該是 static 並且只加載一次。

所以你看，為什么這不起作用：當頁面首次加載時， canvas沒有呈現，因為你的 GridView 不處於編輯模式，我假設。 所以document.ready -function 不能初始化canvas 。

要使這項工作正常工作，您需要在切換到編輯模式后初始化canvas ，例如通過在服務器事件中添加啟動腳本，或在 javascript 中使用異步頁面加載事件。