problem with class "active" in page

0

I do not know much about the subject but I think it's a postback problem. When I click on a number on my page the number is not put in active state, but the script that I have is for that reason but it does not work. if it puts it in active state for a fraction of a second until the page is reloaded and shows me the other data

Is there any solution by modifying the code I already have ??? otherwise, how could I solve it using AJAX or Angular? I think that for those cases it's those tools.

I have the following code in html (asp.net) c #

<div class="container-fluid" style="overflow: hidden;">
  <asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">

    <HeaderTemplate>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12 text-center">
            <ul id="id_pgn" class="pagination">
    </HeaderTemplate>

    <ItemTemplate>
      <li class="btn_pgn">
        <asp:LinkButton ID="btnPage" CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server">
          <%# Container.DataItem %>
        </asp:LinkButton>
      </li>
    </ItemTemplate>

    <FooterTemplate>
      </ul>
      </div>
      </div>
      </div>
    </FooterTemplate>
  </asp:Repeater>
</div>
<script>
  var header = document.getElementById("id_pgn");
  var btns = header.getElementsByClassName("btn_pgn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }
</script>

As I use a repeater to show my data, in my code on the server side I have the following code for the page

 /// <summary>
    /// Page numeracion
    /// </summary>
    public int PageNumber
    {
        get
        {
            if (ViewState["PageNumber"] != null)
            {
                return Convert.ToInt32(ViewState["PageNumber"]);
            }
            else
            {
                return 0;
            }
        }
        set { ViewState["PageNumber"] = value; }
    }
    private void BindRepeater()
    {

        //Create the PagedDataSource that will be used in paging
        PagedDataSource pgitems = new PagedDataSource();
        pgitems.DataSource = tab_user002.DefaultView;
        pgitems.AllowPaging = true;

        //Control page size from here 
        pgitems.PageSize = 4;
        pgitems.CurrentPageIndex = PageNumber;
        if (pgitems.PageCount > 1)
        {
            rptPaging.Visible = true;
            ArrayList pages = new ArrayList();
            for (int i = 0; i <= pgitems.PageCount - 1; i++)
            {
                pages.Add((i + 1).ToString());
            }
            rptPaging.DataSource = pages;
            rptPaging.DataBind();
        }
        else
        {
            rptPaging.Visible = false;
        }

        //Finally, set the datasource of the repeater
        rp_gs_tu.DataSource = pgitems;
        rp_gs_tu.DataBind();
    }

    //This method will fire when clicking on the page no link from the pager repeater
    protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
    {
        PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
        BindRepeater();
    }
    
asked by aldair guzman bolaños 12.06.2018 в 09:45
source

0 answers