Avatar billede mikkel251 Seniormester
14. august 2016 - 12:59 Der er 1 kommentar og
1 løsning

beholde bootstrap tabs efter et postback

Jeg bruger bootstrap tabs og jeg har fundet frem til noget javascript der få min tabs til at blive hvor den er ved postback,
men problemet er at jeg skal dobbelklikke for at få mine dynamiske textboxe frem, jeg har en textbox hvor jeg kan vælge hvor mange textboxe jeg skal bruge og det virker fint bortset fra jeg skal dobbelt klikke på opret antal boxe knappen før de viser sig, men så kommer de også, og når jeg trykker gem så gemmer den fint men den redirecter ikke til den første tab som er en oversigt over Disipliner jeg har oprettet, så hvordan undgår jeg at skulle dobbelt klikke og hvordan får jeg den til at redirecte,
jeg har prøvet med updatepanel og jeg har prøvet med et hiddenfield


min HTML
  <div id="wrapper">
        <div id="page-content-wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <h1>Disipliner</h1>
                    <p>Opret en eller flere disipliner ad gangen.</p>
                    <br />
                </div>
            </div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" id="myTab">
                <li role="presentation" class="active"><a href="#visForening" aria-controls="home" role="tab" data-toggle="tab">Disipliner</a></li>
                <li role="presentation"><a href="#opretForening" aria-controls="profile" role="tab" data-toggle="tab">Opret disiplin(er)</a></li>
                <li role="presentation"><a href="#redigerForeninger" aria-controls="messages" role="tab" data-toggle="tab">Rediger Disiplin</a></li>
            </ul>
            <!-- Panel 1 -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="visForening">
                    <br />
                      <table class="table table-hover table-bordered">
                        <asp:Literal ID="litVisDisipliner" runat="server" />
                        <asp:PlaceHolder ID="phlDisipliner" runat="server"></asp:PlaceHolder>
                    </table>
                </div>


                <!-- Panel 2 -->
                <div role="tabpanel" class="tab-pane fade" id="opretForening">
                    <div class="form-group"></div>
                    <div class="col-sm-4">


                        <%-- Indhold --%>
                        <asp:TextBox ID="txtTal" runat="server" />
                        <asp:Button ID="btnAntal" runat="server" Text="Antal" OnClick="btnAntal_Click" />
                        <asp:Label ID="lblError" runat="server" Text="Du skal vælge et antal kolloner"/>
                        <hr />
                        <br />
                        <asp:PlaceHolder ID="plh1" runat="server"></asp:PlaceHolder>
                        <br />
                        <asp:Button ID="btnGem" runat="server" Text="Test" OnClick="btnGem_Click1" />
                       
                        <br />
                     
                        <asp:Literal ID="litMsg" runat="server" />
                    </div>
                </div>


                <!-- Panel 3 -->
                <div role="tabpanel" class="tab-pane fade" id="redigerForeninger">
                    <br />
                    <table class="table table-hover table-bordered">
                        <asp:Literal ID="litRedigerDisipliner" runat="server" />
                    </table>
                </div>
            </div>

        </div>
    </div>


Javascript i header for at holde tabs åben ved postback
    <script src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
                localStorage.setItem('activeTab', $(e.target).attr('href'));
            });
            var activeTab = localStorage.getItem('activeTab');
            if (activeTab) {
                $('#myTab a[href="' + activeTab + '"]').tab('show');
            }
        });
    </script>

min kode i page_Load
ViewState["AddTxt"] = "true";
            if (Session["Antal"] != null)
            {
                _antal = Convert.ToInt32(Session["Antal"]);

                if (Convert.ToString(ViewState["AddTxt"]) == "true")
                {
                    AddTxt(_antal);
                }
            }

En metode vi har fået den ligger i codebehind samme sted som Page_Load
    public void AddTxt(int number)
    {
        for (int i = 0; i < number; i++)
        {
            //servercontrol i codebehind for txtbox
            TextBox txt = new TextBox();
            //Id på servercontrollen textbox
            txt.ID = "txt_" + i;
            //servercontrol button
            Button btnSubmit = new Button();
            //id på servercontrol button
            btnSubmit.ID = "btn_" + i;
            //text der vises til brugeren på knappen
            btnSubmit.Text = "Ok";
            btnSubmit.Click += new EventHandler(btnSubmit_Click);

            plh1.Controls.Add(new LiteralControl("<div>"));
            plh1.Controls.Add(txt);
            plh1.Controls.Add(btnSubmit);
            plh1.Controls.Add(new LiteralControl("</div>"));
        }
    }

Knappen opret antal
  protected void btnAntal_Click(object sender, EventArgs e)
    {

        Session["Antal"] = txtTal.Text;
        // Response.Redirect("disipliner.aspx#tab_opretForening");

    }

og knappen gem det hele
    protected void btnGem_Click1(object sender, EventArgs e)
    {
        try
        {
            //Opretter en tom variabel som skal bruges til at sende data ind til databasen
            string str = "";

            for (int i = 0; i < Convert.ToInt32(Session["Antal"]); i++)
            {
                // - + i - ligger et tal til hver gang loopen køre.
                TextBox txt = (TextBox)plh1.FindControl("txt_" + i);
                if (txt.Text != "")
                {
                    //Metode til DB
                    // txt.Text + "," - bruges til at skille rows fra hinanden             
                    str += txt.Text + ",";
                }
                else
                {
                    litMsg.Text = "test";
                }
            }           
            //her trimmer jeg komma væk så det ikke tages med i DB
            str = str.TrimEnd(',');
            //her forbinder jeg min - str - variabel med databaseb - Opret -
            objAdd.opret(str);
            Response.Redirect("disipliner.aspx#tab_opretForening");
           
        }
        catch (Exception)
        {
           
        }
    }

Der er en del kode men jeg ved ikke helt hvor jeg fejler
Avatar billede mikkel251 Seniormester
07. september 2016 - 19:54 #1
jeg har fundet ud af løsningen og den kommer her...
den virker også hvis du vil oploade et billede i tab 2 eller i tab 3 og at den så bliver på den tab som er aktiv uden at springe hen på tab 1.
og skal man bare bruge den uden billede opload så behøver man ikke lave response.redirect om til en querystring, så skal man se bort fra lige den omgang kode, så prøv jer lidt frem så skal den nok virke :D

det er hvad jeg selv er kommet frem til og det virker hos mig, som den skal.

så jeg behøver ikke hjælp til den aligevel

HTML siden
<%-- HIDDENFIELD TIL AT GEMME DEN FØRSTE TABS ID I --%>
    <asp:HiddenField ID="hidTAB" runat="server" Value="#home" />
    <div class="container">
        <%-- tabs navigation --%>
        <h1 class="page-header">Bootstrap tabs</h1>
        <h5>Behold den aktive tabs i et postback så den ikke hopper over på default tab</h5>
        <br />
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="myTabs">
            <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <h2>Home</h2>
                <br />
                <asp:Button ID="Button1" OnClick="Button1_Click" runat="server" Text="Button" />
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <h2>Profil</h2>
                <br />
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <asp:Button ID="Button2" OnClick="Button2_Click" runat="server" Text="Button" />


            </div>
            <div role="tabpanel" class="tab-pane" id="messages">               
                <h2>Messages</h2>
                <br />
                <asp:Button ID="Button3" OnClick="Button3_Click" runat="server" Text="Button" />

            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <h2>Settings</h2>
                <br />
                <asp:Button ID="Button4" OnClick="Button4_Click" runat="server" Text="Button" />

            </div>
        </div>
    </div>


java script: Den ligger jeg i headeren da den godt ved den først skal loade når siden er læst ind
    <script type="text/javascript">
        $(document).ready(function () {
            var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
            $('#myTabs a[href="' + tab + '"]').tab('show');
        });
    </script>

CODEBEHIND
Page_load sektionen den her være
  if (!IsPostBack)
        {
            //hvis man skal oploade et billede på den tab man er på uden at den hopper tilbage til default tab
            //så skal man tjekke her i starten af pageload om querystrin tabID findes og hvis den gør det
            //Så tilføjer man hash tag til den qyerystring man har fanget F.eks home vil blive til #home som er id på tab home.
            if (!string.IsNullOrEmpty(Request.QueryString["tabID"]))
            {
                //tilføj hash tag til hiddenfield og til querystringen
                hidTAB.Value = "#" + Request.QueryString["tabID"];
            }
        }

NU HAR JEG SÅ 4 KNAPPER MEN DET ER FOR AT ILLUSTRERE HVORDAN DEN VIRKER MED FLERE TABS
protected void Button1_Click(object sender, EventArgs e)
    {
        //værdien fra hiddenfield
        hidTAB.Value = "#home";

        //hvis man skal oploade et billede på den tab man er på uden at den hopper tilbage til default tab
        //Så skal man lave en querystring med navnet på det id tab har, her er det F.eks home, og så tjekker man i starten af pageload om
        //Querystring findes og hvis den gør tilføjer man # til navnet i qyerystringen
        Response.Redirect("bootstra-tabs.aspx?tabID=" + "home" + "");
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        //værdien fra hiddenfield
        hidTAB.Value = "#profile";

        //hvis man skal oploade et billede på den tab man er på uden at den hopper tilbage til default tab
        //Så skal man lave en querystring med navnet på det id tab har, her er det F.eks profile, og så tjekker man i starten af pageload om
        //Querystring findes og hvis den gør tilføjer man # til navnet i qyerystringen
        Response.Redirect("bootstra-tabs.aspx?tabID=" + "profile" + "");
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
        //værdien fra hiddenfield
        hidTAB.Value = "#messages";

        //hvis man skal oploade et billede på den tab man er på uden at den hopper tilbage til default tab
        //Så skal man lave en querystring med navnet på det id tab har, her er det F.eks messages, og så tjekker man i starten af pageload om
        //Querystring findes og hvis den gør tilføjer man # til navnet i qyerystringen
        Response.Redirect("bootstra-tabs.aspx?tabID=" + "messages" + "");
    }

    protected void Button4_Click(object sender, EventArgs e)
    {
        //værdien fra hiddenfield
        hidTAB.Value = "#settings";

        //hvis man skal oploade et billede på den tab man er på uden at den hopper tilbage til default tab
        //Så skal man lave en querystring med navnet på det id tab har, her er det F.eks settings, og så tjekker man i starten af pageload om
        //Querystring findes og hvis den gør tilføjer man # til navnet i qyerystringen
        Response.Redirect("bootstra-tabs.aspx?tabID=" + "settings" + "");
    }
Avatar billede mikkel251 Seniormester
07. september 2016 - 19:56 #2
lige en tjek op jeg kan se jeg skriver værdien fra tabben i en kommentar - //værdien fra hiddenfield
hidTAB.Value = "#settings"

der mener jeg id på den tab som hiddenfield skal holde aktiv
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester