[英]Handle onclick event of Html Button inside ListView
我一直在努力完成這項工作,我有一個 ListView,它有 2 個按鈕,基本上是“接受”和“拒絕”圖像,這些按鈕是由 Listview 本身生成的,因此我無法分配 ID。 我不能使用命令參數,因為它們是 html 按鈕,我也不能使用鏈接按鈕,因為它們發送導致頁面刷新的回發,不能使用 Asp 按鈕,因為里面有一個 FA 圖標(我知道我可以下載一個庫,但是我對此不確定),所以問題是當使用單擊一個按鈕時,另一個按鈕變為灰色,當我單擊最后一個按鈕時,我將遍歷列表視圖並檢索所有“已接受” “ 圖片?
列表視圖代碼:
<asp:ListView ID="listadoImg" runat="server" Visible="true" OnItemDataBound="listadoImg_DataBound" >
<ItemTemplate>
<div class="col-12 col-md-6">
<div class="card">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("imagen") %>' CssClass="card-img-top" />
<div class="card-body">
<div class="row">
<div class="col-7 text-right ">
<asp:Label ID="Label13" Text='<%# string.Concat("SKU: ",Eval("sku"))%>' runat="server"
CssClass="" Font-Size="Small" /><br />
<asp:Label ID="Label17" Font-Size="Small" Text='<%# Eval("marca").ToString() + " " + Eval("descripcion").ToString()%>' runat="server" CssClass="labelImagenes" /><br />
<asp:Label ID="Label15" Font-Size="Small" Text='<%# string.Concat("Precio Normal: ",Eval("precioNormal"))%>'
runat="server" CssClass="labelImagenes" /><br />
<asp:Label ID="lblPrecioOferta" Font-Size="Small" Text='<%# string.Concat("Precio Oferta: ",Eval("precioPublicacion"))%>'
runat="server" CssClass="labelImagenes" />
</div>
<%--<div class="col-5 text-left mt-3">
<p><i class="fa fa-check fa-2x ico-verde"></i> <span>Aprobar </span></p>
<p><i class="fa fa-ban fa-2x mt-1 ico-rojo"></i> <span>Rechazar </span></p>
</div>--%>
<div class="col-5 text-left mt-3">
<button type="button" id="btnAceptado1" class="btn btn-light" style="position: relative; display: inline-block; left: 5%; font-size: 18px; top: 3%; padding: 0px; background-color: transparent; margin-top: -10px; border: 1px solid transparent"
aria-label="Left Align" onclick="CambiarAceptado1()" >
<i class="fa fa-check fa-2x ico-verde"></i>
<span>Aprobar </span>
</button>
<button type="button" id="btnAceptado2" class="btn btn-light" style="position: relative; display: none; left: 5%; font-size: 18px; top: 3%; padding: 0px; background-color: transparent; margin-top: -10px; border: 1px solid transparent"
aria-label="Left Align" onclick="CambiarAceptado2()" >
<i class="fa fa-check fa-2x ico-plomo"></i>
<span>Aprobar </span>
</button>
<br />
<button type="button" id="btnRechazado1" class="btn btn-light" style="position: relative; display: inline-block; left: 5%; top: 3%; padding: 0px; font-size: 18px; background-color: transparent; border: 1px solid transparent"
aria-label="Left Align" onclick="CambiarRechazado1()">
<i class="fa fa-ban fa-2x mt-1 ico-rojo"></i>
Rechazar
</button>
<button id="btnRechazado2" type="button" class="btn btn-light" style="position: relative; display: none; left: 5%; top: 3%; padding: 0px; font-size: 18px; background-color: transparent; border: 1px solid transparent"
aria-label="Left Align" onclick="CambiarRechazado2()" >
<i class="fa fa-ban fa-2x mt-1 ico-plomo"></i>
Rechazar
</button>
</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
到目前為止,我已經能夠制作類似於一行的東西,當空白時它會消失,如下所示:
protected void listadoImg_DataBound(object sender, ListViewItemEventArgs e)
{
Label lblPrecioOfe;
if (e.Item.ItemType == ListViewItemType.DataItem)
{
lblPrecioOfe = (Label)e.Item.FindControl("lblPrecioOferta");
System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;
string precioPub = rowView["precioPublicacion"].ToString();
if (precioPub == "")
{
lblPrecioOfe.Text = "";
}
}
}
圖像如下所示:
目前,我可以使用當前按鈕中使用的 JavaScript 使其工作,但僅適用於列表中的第一個對象。
使用的JS是這樣的:
function CambiarAceptado1() {
document.getElementById('btnAceptado1').style.display = 'inline-block';
document.getElementById('btnAceptado2').style.display = 'none';
document.getElementById('btnRechazado1').style.display = 'none';
document.getElementById('btnRechazado2').style.display = 'inline-block';
}
function CambiarAceptado2() {
document.getElementById('btnAceptado1').style.display = 'inline-block';
document.getElementById('btnAceptado2').style.display = 'none';
document.getElementById('btnRechazado1').style.display = 'none';
document.getElementById('btnRechazado2').style.display = 'inline-block';
}
function CambiarRechazado1() {
document.getElementById('btnAceptado1').style.display = 'none';
document.getElementById('btnAceptado2').style.display = 'inline-block';
document.getElementById('btnRechazado1').style.display = 'inline-block';
document.getElementById('btnRechazado2').style.display = 'none';
}
function CambiarRechazado2() {
document.getElementById('btnAceptado1').style.display = 'none';
document.getElementById('btnAceptado2').style.display = 'inline-block';
document.getElementById('btnRechazado1').style.display = 'inline-block';
document.getElementById('btnRechazado2').style.display = 'none';
}
好的,這里是答案,以防其他人遇到同樣的問題:
首先在數據綁定中,我定義了 4 個 html 按鈕 2 表示接受(打開和關閉),2 表示拒絕(相同):
protected void listadoImg_DataBound(object sender, ListViewItemEventArgs e)
{
Label lblPrecioOfe;
if (e.Item.ItemType == ListViewItemType.DataItem)
{
lblPrecioOfe = (Label)e.Item.FindControl("lblPrecioOferta");
System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;
string precioPub = rowView["precioPublicacion"].ToString();
if (precioPub == "")
{
lblPrecioOfe.Text = "";
}
}
HtmlButton bot = (HtmlButton)e.Item.FindControl("btnAceptado1");
HtmlButton bot2 = (HtmlButton)e.Item.FindControl("btnAceptado2");
HtmlButton bot3 = (HtmlButton)e.Item.FindControl("btnRechazado1");
HtmlButton bot4 = (HtmlButton)e.Item.FindControl("btnRechazado2");
bot.Attributes.Add("onclick", "CambiarAceptado1(" + bot.ClientID.Substring(bot.ClientID.ToString().Length -1)+")");
bot2.Attributes.Add("onclick", "CambiarAceptado2(" + bot.ClientID.Substring(bot.ClientID.ToString().Length - 1) + ")");
bot3.Attributes.Add("onclick", "CambiarRechazado1(" + bot.ClientID.Substring(bot.ClientID.ToString().Length - 1) + ")");
bot4.Attributes.Add("onclick", "CambiarRechazado2(" + bot.ClientID.Substring(bot.ClientID.ToString().Length - 1) + ")");
}
他們每個人都發送控件的clientid的最后一個字符,因此在javascript中我收到它們以在頁面中找到特定的控件,如下所示:
function CambiarAceptado1(valor) {
document.getElementById('listadoImg_btnAceptado1_' + valor ).style.display = 'inline-block';
document.getElementById('listadoImg_btnAceptado2_' + valor).style.display = 'none';
document.getElementById('listadoImg_btnRechazado1_' + valor).style.display = 'none';
document.getElementById('listadoImg_btnRechazado2_' + valor).style.display = 'inline-block';
document.getElementById("listadoImg_hdfAprobacion_" + valor).value = "1";
}
我還定義了一個隱藏字段來存儲被接受或拒絕的值,希望這會有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.