Обрабатывать событие onclick кнопки Html внутри ListView - PullRequest
1 голос
/ 21 марта 2019

я изо всех сил пытался сделать это, у меня есть ListView, у которого есть 2 кнопки, которые в основном "Принять" и "Отклонить" к изображению, эти кнопки генерируются самим ListView, поэтому я не могу присвоить идентификатор, я не могу использовать командный аргумент, потому что они являются кнопками HTML, ни я не могу использовать linkbutton, потому что они посылают обратную передачу, вызывая обновление страницы, не могу использовать кнопки 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>&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 = "";
            }
        }  
    }

Изображения выглядят так:

Изображение

В настоящее время я могу заставить его работать с 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 голосов
/ 22 марта 2019

Хорошо, вот ответ на случай, если кто-то другой получит такую ​​же проблему:

Сначала в графе данных я определяю 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) + ")");


    }

каждый из них отправляет последний символ клиентской части элемента управления, поэтому в 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";

    }

Также я определяю скрытое поле для хранения значения, если оно принято или отклонено, надеюсь, это будет полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...