Question 217546 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – how to hide div of ascs from the code behind

i am trying to hide a div which written in a ascx , i am hiding it from code behind of aspx page where this ascx is registerd.
here is my hidng code
My div code is here :

<div class="form-group col" runat="server" id="CorpCol" visible="false">

Here is my code behind

System.Web.UI.Control CorpCol = FindControlRecursive(this.Master, "CorpCol");
CorpCol.Visible = false;
Tags:

2

Answers


  1. 0

    you must chaning style in code behind:

    System.Web.UI.Control CorpCol = FindControlRecursive(this.Master, "CorpCol");
CorpCol.Style.Add("display", "none");

    But the easiest way is to use JavaScript.
    You can add jQuery to project and put the following code at the bottom of your page:

    <script>
$("#CorpCol").click(function(){
 var CorpCol =  document.getElementById("CorpCol").style;
 if(CorpCol.display == 'none'){
    CorpCol.display = 'block';
 }
 else{
    CorpCol.display = 'none';
 }
});
</script>
    Login or Signup to reply.
  2. 0

    I suggest you modify the user control, and expose that "div" as a public property of the user control.

    Not only then does your code become rather simple, but you also find when you drop multiple instances of that user control on a page, then the hide/show of each "instance" of that div becomes nice clean and easy code.

    So, say a user control to select a hotel, then a start, and end date.

    And let’s have "div" in that user control that we want to hide (or show).

    So, our simple user control markup is this:

    <div style="float:left">

    <h3>Select Hotel</h3>
    <asp:DropDownList ID="cboHotel" runat="server" 
        Width="200px"
        DataValueField="ID"
        DataTextField="HotelName" 
        AutoPostBack="true" >
    </asp:DropDownList>

</div>

<div style="float:left;margin-left:30px;height:100px">
    <h3>Select Start Date</h3>
    <asp:TextBox ID="txtStartDate" runat="server" TextMode="Date">
    </asp:TextBox>
</div>

<div style="float:left;margin-left:30px">
    <h3>Select Start Date</h3>
    <asp:TextBox ID="txtEndDate" runat="server" TextMode="Date">
    </asp:TextBox>
</div>

<div id="mydiv" runat="server" style="float:left;margin-left:30px">
    <h3>My div area</h3>
    <img src='<%= ResolveClientUrl(@"~/Content/Rhotel.jpg") %>' 
        width="40" height="40" />
</div>

    And the code for the user control:

        protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            cboHotel.DataSource =
                General.MyRst("SELECT ID, HotelName FROM tblhotelsA ORDER BY HotelName");
            cboHotel.DataBind();
            cboHotel.Items.Insert(0, "Select Hotel");
        }
    }

    public HtmlGenericControl MyDiv
    {
        get { return mydiv; }
    }

    Note how we just expose the "div" as a public property. And since it is an object, then no "setter" is required, only the above "get". And note the “id" and runat="server" tag for that div.

    Ok, now our web page. Let’s drop in the user control 2 times, and then have 2 buttons. One to hide (or show) the first user control div. The 2nd button will hide/show the 2nd user control div.

    So, this markup:

            <h3>First user control</h3>
        <uc1:USelectHotel runat="server" ID="USelectHotel" />

        <div style="clear:both"></div>
        <hr style="border:solid 2px" />

        <h3>Second user control</h3>
        <uc1:USelectHotel runat="server" ID="USelectHotel1" />

                    <div style="clear:both"></div>
        <hr style="border:solid 2px" />

        <asp:Button ID="cmdDiv1" runat="server" 
            Text="Hide show div 1" CssClass="btn btn-info" OnClick="cmdDiv1_Click"  />

        <asp:Button ID="cmdDiv2" runat="server" 
            Text="Hide show div 2" CssClass="btn btn-info"
            style="margin-left:35px" OnClick="cmdDiv2_Click"
            />

    And the code behind for the 2 buttons:

        protected void cmdDiv1_Click(object sender, EventArgs e)
    {
        USelectHotel.MyDiv.Visible = !USelectHotel.MyDiv.Visible;
    }

    protected void cmdDiv2_Click(object sender, EventArgs e)
    {
        USelectHotel1.MyDiv.Visible = !USelectHotel1.MyDiv.Visible;
    }

    So note how we can in code behind set USelecthotel1.MyDiv.Visible = false in code.

    The result of above looks like this:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search