Currently, I am in the process of developing relatively straightforward post and reply/forum pages using asp.net with C#. While everything seems to be functioning properly, the addition of update panels has left me feeling incredibly frustrated.
To display the posts, I utilize a DataList. The form for inserting a new post consists of two textboxes and a button - one for the name and the other for the message.
The first nested update panel I implemented is intended to provide a character count for each post. There is a label in the content triggered by the textchanged event of the textboxes. Additionally, the textbox 'txtMessage' features a JavaScript function that runs 'onkeyup' to maintain focus on the box while typing, limited to 1000 characters.
The next update panel surrounds the DataList to prevent it from posting back unnecessarily (as hitting the back button would visually remove each post, which is not ideal). Initially, wrapping the panel around the DataList failed to clear the insert form boxes after submission. Therefore, I wrapped everything with this updatepanel, causing the character count update panel to become nested within this one. Although functionality improved, the focus was redirected from the txtMessage box every time the textchanged event fired, resulting in the JavaScript failing to execute.
I have attempted various adjustments regarding the opening and closing of the update panel without success. Any further suggestions or solutions would be greatly appreciated. Below is the code snippet:
ForumT.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ForumT.aspx.cs" Inherits="UPE_Site_v1.ForumT" %>
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headPlaceHolder" runat="server">
<script type="text/javascript">
function reFocus(id) {
__doPostBack(id, '');
document.getElementById(id).blur();
document.getElementById(id).focus();
}
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetPosts" TypeName="TimeTrackerRepository" DataObjectTypeName="System.Guid" DeleteMethod="DeletePost"> </asp:ObjectDataSource>
...
ForumT.aspx.cs
Including only the textchanged event:
protected void txtMessage_TextChanged(object sender, EventArgs e)
{
lblCharacterCount.Text = txtMessage.Text.Count().ToString() + "/1000";
if (txtMessage.Text.Count() >= 1000)
{
lblCharacterCount.ForeColor = System.Drawing.Color.Red;
}
else
{
lblCharacterCount.ForeColor = System.Drawing.Color.Black;
}
}
Please excuse any code inconsistencies. It's also worth mentioning that Bootstrap is being utilized, hence the abundance of div elements.