locked
ASP.net, C#, How to set value for Textbox that needs to be not visible using viewstate or hiddenfield? RRS feed

  • Question

  • User1045460610 posted

    I have a dropdownlist to allow the user to change the textbox values on the page. The RecordID is a GUID and won't be meaningful to the user so it doesn't need to be seen. If I set it to not visible then I get the error 'unable to set property 'value' of undefined or null reference when I step to it in the browser debugger. How would it work to use a viewstate or hiddenfield to do that?

    document.getElementById('<%=nameof(txtRecordID)%>').value = recordID;

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="instructorcourse.aspx.cs" Inherits="updatecourses" %>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head3" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>On Grounds</title>
    <style type="text/css">
    .auto-style1 {
    width: 30px;
    }

    .auto-style2 {
    width: 132px;
    }

    .auto-style5 {
    width: 24px;
    }
    .auto-style7 {
    width: 140px;
    height: 26px;
    }
    .auto-style8 {
    width: 24px;
    height: 26px;
    }
    .auto-style9 {
    width: 273px;
    }
    .auto-style10 {
    width: 123px;
    }
    .auto-style11 {
    width: 123px;
    height: 26px;
    }
    .auto-style12 {
    /*width: 140px;*/
    }
    .auto-style13 {
    width: 319px;
    }
    </style>
    </head>
    <body>
    <%--<script>JavaScript is Active</script>
    <noscript>JavaScript is Disabled</noscript>--%>
    <form id="form3" runat="server">
    <h2 class="auto-style9">
    <asp:Image ID="Image1" runat="server" Height="103px" Width="216px" ImageUrl="~/headerLogo.png" />
    </h2>
    <h2 class="auto-style13">Attendance</h2>
    <h2>Intructor - Next Course</h2>
    <table>
    <tr>
    <td class="auto-style10">Insctructor ID:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtInstructorID" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style5"></td>
    </tr>
    <tr>
    <td class="auto-style11">Instructor Name:</td>
    <td class="auto-style7">
    <asp:TextBox ID="txtInstructorName" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style8"></td>
    </tr>
    <tr>
    <td class="auto-style10">Course Code:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtCourseCode" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style5">&nbsp;</td>
    </tr>

    <tr>
    <td class="auto-style10">Course Title:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtCourseTitle" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style5">
    <select name="DropDownList1" id="DropDownList1" onchange="changeCourse(event)">
    </select> <%--on change, populates text boxes with result--%>
    </td>

    </tr>

    <tr>
    <td class="auto-style10">Course Start Time:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtStartTime" runat="server" Enabled="False"></asp:TextBox></td>
    </tr>


    <tr>
    <td class="auto-style10">Attendance Code: </td>
    <td class="auto-style12">
    <asp:TextBox ID="txtAttendanceCode" runat="server" ToolTip="Use the System Generated Random Code or click the Code Button to Generate a New Code, Youn can alsto Enter Your Own Code!"></asp:TextBox>
    </td>
    <td class="auto-style5">
    <asp:Button ID="btnGenerateCode" runat="server" OnClick="BtnGenerateCode_Click" Text="Code" />
    </td>
    </tr>


    </table>
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Save Code" OnClick="btnAdd_Click" />
    <br />
    <br />
    <asp:Button ID="btnHelp" runat="server" Text="?" ToolTip="Instructions/Notes: You can use the system generated code or create your own. We recommend that it is user-friendly. All codes are unique to this course. Click Save Code to capture the attendance code for this course session. Students must be in this class and on the wireless network to post their attendance. If students do not have a smartphone or laptop, you can allow them to log in at the podium. " />
    <br />
    <br />
    <asp:Label ID="lblMsg" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <asp:Panel ID="Panel1" runat="server" Width="267px">
    <%--<br />
    Instructions/Notes:
    <br />
    -You can use the system generated code or create your own. We recommend that it is user-friendly.
    <br />
    -All codes are unique to this course.
    <br />
    -Click Save Code to capture the attendance code for this course session.
    <br />
    -Students must be in this class and on the Parker U wireless network to post their attendance.
    <br />
    -If students do not have a smartphone or laptop, you can allow them to log in to MyParker at the podium.--%>
    </asp:Panel>
    <asp:Label ID="Label2" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <br />
    <table>
    <tr>
    <%--<td class="auto-style4">Record ID: </td>--%>
    <td class="auto-style2">
    <asp:TextBox ID="txtRecordID" runat="server" Enabled="False"></asp:TextBox>
    </td>
    <td class="auto-style1">
    <%--&nbsp;will select next course on form load, by hostid, will go in form load</tr>--%>

    </table>
    <br />
    <br />
    </form>

    <script type="text/javascript">
    function load() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('post', 'instructorcourse.aspx/GetCourseTitles', true);
    xhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.onreadystatechange = function () {
    if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) {
    var $titlesDropDown = document.getElementById('DropDownList1'),
    courses = JSON.parse(JSON.parse(this.responseText).d),
    html = '';
    //courses.forEach(function (course) {
    // var value = course.RecordID + '|' + course.CourseCode + '|' + course.Title;
    courses.forEach(function (course) {
    var value = course.RecordID + '|' + course.CourseCode + '|' + course.Title + '|' + course.StartTime;
    html += '<option value="' + value + '">' + course.Title + '</option>';
    });
    $titlesDropDown.innerHTML = html;
    }
    };
    xhttp.send(JSON.stringify({ instructorId: '<%=txtInstructorID.Text%>' }));
    }
    document.addEventListener('DOMContentLoaded', load);

    function changeCourse(e) {
    var temp = e.target.value.split('|'),
    recordID = temp[0],
    courseCode = temp[1],
    title = temp[2],
    startTime = temp[3];
    document.getElementById('<%=nameof(txtRecordID)%>').value = recordID;
    document.getElementById('<%=nameof(txtCourseCode)%>').value = courseCode;
    document.getElementById('<%=nameof(txtCourseTitle)%>').value = title;
    document.getElementById('<%=nameof(txtStartTime)%>').value = new Date(startTime).toLocaleDateString() + ' ' + new Date(startTime).toLocaleTimeString();
    }
    </script>
    </body>
    </html>

    Wednesday, April 17, 2019 1:27 PM

Answers

  • User475983607 posted

    The RecordID is a GUID and won't be meaningful to the user so it doesn't need to be seen. If I set it to not visible then I get the error 'unable to set property 'value' of undefined or null reference when I step to it in the browser debugge

    Use a hidden field.  Setting the Visible property to false does not render the element.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 17, 2019 1:30 PM

All replies

  • User475983607 posted

    The RecordID is a GUID and won't be meaningful to the user so it doesn't need to be seen. If I set it to not visible then I get the error 'unable to set property 'value' of undefined or null reference when I step to it in the browser debugge

    Use a hidden field.  Setting the Visible property to false does not render the element.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 17, 2019 1:30 PM
  • User1045460610 posted

    Are we able to set a new value for the hidden field?

    Wednesday, April 17, 2019 3:06 PM
  • User475983607 posted

    Are we able to set a new value for the hidden field?

    Yes of course.  Are you having trouble setting the hidden field value?

    Wednesday, April 17, 2019 3:13 PM
  • User-943250815 posted

    Yes like any other control like Label, Textbox.
    For HiddenField get or set Value property

    Wednesday, April 17, 2019 9:33 PM
  • User839733648 posted

    Hi Tom4IT,

    You could just modify your textbox as below.

    <asp:HiddenField id="txtRecordID" runat="server" />
    

    For more about HiddenField, you could refer to :https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.hiddenfield?view=netframework-4.7.2

    Best Regards,

    Jenifer

    Thursday, April 18, 2019 8:05 AM