处理ListView中HTML按钮的onclick事件

时间:2019-03-21 18:31:14

标签: c# html listview button visual-studio-2017

我一直在努力使它工作,我有一个ListView,它有2个按钮,它们在图像上大都是“接受”和“拒绝”,这个按钮是由Listview本身生成的,所以我不能输入id,我不能使用commandargument,因为它们是html按钮,我也不能使用linkbutton,因为它们发送回发导致页面刷新,不能使用Asp按钮,因为里面有一个FA图标(我知道我可以下载库,但是我不能可以确定),所以问题是当使用方法单击一个按钮时,另一种阴影变为灰色,当我单击最后一个按钮时,我将如何遍历列表视图并检索所有“已接受”图像。 / p>

列表视图代码:

<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>&nbsp; <span>Aprobar </span></p>
                                                <p><i class="fa fa-ban fa-2x mt-1 ico-rojo"></i>&nbsp; <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>


                                        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                                <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 = "";
            }
        }  
    }

图像如下:

Image

当前,我可以使其暂时与按钮中使用的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';

    }

1 个答案:

答案 0 :(得分:0)

好,如果其他人遇到相同的问题,这是答案:

首先在数据绑定中,定义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";

    }

我还定义了一个隐藏字段来存储值(如果被接受或拒绝),希望这将是有用的。