编辑gridview中的ASP.NET C#签名画布
Posted
技术标签:
【中文标题】编辑gridview中的ASP.NET C#签名画布【英文标题】：ASP.NET C# signature canvas in editing gridview 【发布时间】：2020-09-23 12:23:14 【问题描述】：我是 *** 的新手，如果我有任何遗漏，请随时发表评论。
所以，这是我的问题。
我正在尝试在我的可编辑网格视图中包含一个签名画布。 我尝试了许多不同的解决方案，但画布从来没有工作过。 我曾尝试将其从网格视图中删除，令我惊讶的是，签名正在工作。 但是，当我单击箭头进行编辑时，即使它不在网格视图中，画布也会停止工作。
知道为什么吗？
这是我的代码，我没有包含所有内容，如果您需要更多，请询问。
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" >
<tr class="bottom" >
<td ><asp:Label ID="lbl_ID2" runat="server" Text='<%#Eval("ID") %>'></asp:Label></td>
<td ><asp:Label ID="lbl_User2" runat="server" Text='<%#Eval("User") %>'></asp:Label></td>
<td ><asp:Label ID="lbl_Dep2" runat="server" Text='<%#Eval("Departement") %>'></asp:Label></td>
<td ><asp:Label ID="lbl_Total2" runat="server" Text='<%#Eval("Total") %>'></asp:Label></td>
<td ><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" 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" ></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();
【问题讨论】：
画布的初始化发生在您的$(function() 中而不是其他地方？
【参考方案1】：
-
您在客户端的 DOM 中更改的所有内容，例如当您回发并且不以任何方式告诉服务器更改时，使用 javascript 添加/更改内容将会丢失。
当您使用 async-Postbacks（在您的情况下为
UpdatePanels）时，document.ready-Event 仅触发一次 - 在第一次加载页面时。 window.onload 也是如此。
不要在您的UpdatePanel 中放置 javascript-links 之类的东西，它们应该是静态的并且只加载一次。
所以你知道为什么这不起作用：当页面第一次加载时，canvas 没有呈现，因为你的 GridView 没有处于编辑模式，我假设。所以document.ready-function 不能初始化canvas。
要使其正常工作，您需要在切换到编辑模式后初始化 canvas，例如通过在 server-event 中添加启动脚本，或在 javascript 中使用 async-page-load-events。
【讨论】：
谢谢！我现在知道了。我将脚本移出更新面板。现在我需要想办法在编辑按钮中调用脚本。我将在服务器事件中对“启动脚本”进行一些研究。 完全正确 - 如果您仍有问题，请更新您的问题。以上是关于编辑gridview中的ASP.NET C#签名画布的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 C# 从 ASP.NET 中的 SQL Server 数据库中检索和显示 GridView 中的值