how to keep bootstrap tabs after page reload when uploading image

Question

i am using a hiddenfield to keep my tabs open after a postback, but when i upload an image i have to reload the page before i can se the image, and when i do that, the hiddenfield dont work, haw can i make it work

HTML

                                    <%-- Skjult felt med værdien fra menu tabs --%>
                                    <asp:HiddenField ID="HiddenField1" runat="server" Value="#slider" />
                                    <asp:Panel ID="pnlImg" CssClass="pnl-img" DefaultButton="btnGemProfilImg" runat="server">
                                        <asp:Literal
                                            ID="litHentProfilImg"
                                            runat="server" />
                                        <br />
                                        <asp:Label
                                            ID="lbRoterImg"
                                            runat="server"
                                            Text="Roter billede" />
                                        <br />

                                        <%-- mod uret --%>
                                        <asp:ImageButton
                                            ID="ibRoterImgModUret"
                                            ImageUrl="../img/roter-img.png"
                                            Width="25"
                                            ToolTip="Roter billede mod uret"
                                            ValidationGroup="roterImg"
                                            OnClick="ibRoterImgModUret_Click"
                                            runat="server" />

                                        <%-- med uret --%>
                                        <asp:ImageButton
                                            ID="ibRoterImgMedUret"
                                            ImageUrl="../img/roter-img-med-uret.png"
                                            Width="25"
                                            ToolTip="Roter billede med uret"
                                            ValidationGroup="roterImg"
                                            OnClick="ibRoterImgMedUret_Click"
                                            runat="server" />
                                        <br />
                                        <asp:FileUpload
                                            ID="fuProfilImg"
                                            ClientIDMode="Static"
                                            runat="server" />
                                        <br />
                                        <asp:Button
                                            ID="btnGemProfilImg"
                                            ValidationGroup="img"
                                            OnClick="btnGemProfilImg_Click"
                                            CssClass="btn btn-default"
                                            runat="server"
                                            Text="Gem" />
                                        <output></output>
                                        <br />
                                        <asp:Literal
                                            ID="litImgMsg"
                                            runat="server" />
                                    </asp:Panel>

My codebehind

 protected void btnGemProfilImg_Click(object sender, EventArgs e)
{
    //BILLEDE OPLOAD
    string guid = Guid.NewGuid().ToString();

    //brugerens id skal med til proberty
    objAdmin._id = Convert.ToInt32(Session["id"]);
    DataTable Dt_img = objAdmin.HentImg();

    //Put nuværende imagenavn i en variabel - så det efterfølgene kan overskrives med noget nyt - hvis admin har puttet nyt image i imageuploader...
    string _billedenavn = Dt_img.Rows[0]["fldImg"].ToString();//Det nuværende imagenavn i databasen...


    if (fuProfilImg.HasFile)
    {
        string extension = System.IO.Path.GetExtension(fuProfilImg.FileName.ToLower());

        if (extension == ".jpg" || extension == ".png" || extension == ".JPG" || extension == ".jpeg" || extension == ".svg" || extension == ".JPEG")
        {
            if (File.Exists(Server.MapPath(@"~\\/img/admin/" + Dt_img.Rows[0]["fldImg"])))
            {
                //Den her sletter billedet fra mappen på serveren
                File.Delete(Server.MapPath(@"~\\/img/admin/" + Dt_img.Rows[0]["fldImg"]));
            }

            //Her laver jeg det nye fil navn og gemmer det i en variabel
            string billedenavn = guid + fuProfilImg.FileName;



            //Her gemmer/uploader jeg filen med nyt navn i IMG mappen...
            fuProfilImg.SaveAs(Request.PhysicalApplicationPath + @"/img/admin/" + billedenavn);



            //gem nu hele postyret i databasen - dvs bla det nye billede navn...
            objAdmin._img = billedenavn;
            objAdmin._id = Convert.ToInt32(Session["id"].ToString());
            objAdmin.opdaterImg();

            //Og så kan vi trygt reloade siden
          Response.Redirect(Request.RawUrl);
            //værdien fra hiddenfield
           hidTAB.Value = "#profil";
        }
        else
        {
            //her er hvad den vil sige hvis filen ikke indeholde et billede format
            litImgMsg.Text = "<p class='error'>Forkert filformat</p>";
        }
    }
    else
    {
        //en fejl hvis brugeren ikke har valg nogen fil til opload
        litImgMsg.Text = "<br /><span class='error'>Vælg venligst en fil</span>";
    }
}

Answer 1

When reloading page after image upload, send a parameter in the querystring like http://Host/Page.aspx?afterimage=y

With jQuery on pageload, read QueryString parameters like:

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

var afterimage = GetQueryStringParams('afterimage');
if (afterimage=='y'){
    //play with bootstrap tabs
}

Hope this helps or gives an idea (at least).

Answer 2

You can check whether that postback is caused by fileupload or not , if it is caused by the fileupload then apply your logic for tab closing

Here how you can check:

 System.Web.UI.Control control = null;
        string controlName = Page.Request.Params["__EVENTTARGET"];
        if (!String.IsNullOrEmpty(controlName))
        {
            control = Page.FindControl(controlName);
        }
        if (control != null)
        {
            if (control.ClientID == "fuProfilImg")
            {
                //your logic
            }
        }