Cannot get inner HTML when trying to show div element-CodePudding

I am supporting a really old legacy application that is about to be taken down which is written in aspx. I have a <div> element inside a page (Example.aspx) that I am trying to make visible in the code behind (Example.aspx.cs) based on a checkbox checked value. However I keep getting this Cannot get inner content of '' because the contents are not literal error and thus my div is not being rendered. I referred to this SO post: Cannot get inner content of '' because the contents are not literal which mentions that this will not work on controls that are run on the server i.e runat="server". I cannot access the Wordpress url referenced in the one answer from this SO post that was suggested: Cannot get inner HTML - and this one (Cannot manage to change the inner html of a div element) is not applicable to my question.

Example.aspx:

<div id="testID" runat="server"> </div>

Example.aspx.cs:

 protected void checkBoxName_CheckedChanged(object sender, EventArgs e)
 {
      if(!checkBoxName.Checked)
           testID.Visible = true; //The exception is thrown here
 }

CodePudding user response：

You haven't shown the code for the CheckBox, but considering that you have an event handler for it, I assume you have something like the following:

<asp:CheckBox id="checkBoxName" runat="server" OnCheckedChanged="checkBoxName_CheckedChanged" AutoPostBack="true" Checked="true" /> This is my CheckBox
<div class='myClass1' id="testID" runat="server">This is my DIV</div>

in which case, the following should work:

protected void checkBoxName_CheckedChanged(object sender, EventArgs e)
{
    CheckBox cBox = (CheckBox)sender;
    Control divCtrl = cBox.Parent.FindControl("testID");

    if (divCtrl != null)
    {
        //set value
        divCtrl.Visible = cBox.Checked;
    }
}

This has been tested using the following:

Create a new project - ASP .NET Web Application (.NET Framework)

For Project Name: CheckBoxTest
Click Create
Click Empty
Uncheck Configure for HTTPS (optional)
Click Create

Open Solution Explorer

In VS menu, click View
Select Solution Explorer

Add Web form

In Solution Explorer, right click <project name>
Click Add
Select New Item
Click Web Form (name: default.aspx)
Click Add

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="CheckBoxTest._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:CheckBox id="checkBoxName" runat="server" OnCheckedChanged="checkBoxName_CheckedChanged" AutoPostBack="true" Checked="true" /> This is my CheckBox
        <p />
        <div class='myClass1' id="testID" runat="server">This is my DIV</div>
    </form>
</body>
</html>

default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CheckBoxTest
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void checkBoxName_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox cBox = (CheckBox)sender;

            //find desired control
            Control divCtrl = cBox.Parent.FindControl("testID");

            if (divCtrl != null)
            {
                //set value
                divCtrl.Visible = cBox.Checked;
            }
        }
    }
}

Resources:

Additional Resources:

Call JavaScript function when CheckBox is checked or unchecked

CodePudding user response：

Ok, this looks to be as simple as possible.

However, DO keep in mind that HTML rendering does NOT occur when you set a control visible = false.

In other words, you set visible = false, then other code (in most cases client side) will not then see this "div" or whatever - since it not at all rendered.

I don't know what other code is involved here, but I would test/try/consider using style to hide, and thus the HTML is still there - but does not show.

so, try this:

 testID.Style["display"] = "none";

and to display, then

 testID.Style["display"] = "normal";

However, perhaps some udpate panel is involved here - and that will change how this works. If the button/checkbox is say inside of a update panel, and the div is not? Then this will not work.

However, if the button/checkbox is outside of the update panel, then it should work ok. So, if update panels are being used, this could effect behavours.