My goal is to implement a feature in a web application that allows users to remove a div by clicking on an "x" button placed over the div. The web app is built using ASP.NET and I also need to update a value in an SQL table to indicate that the user has closed the div, so it doesn't display next time they visit the page. The challenge here is to achieve this without reloading the page (postback), enabling me to animate the div sliding or fading away using jQuery while ensuring that the app remembers the action. Below is the code I have implemented so far.
ASP.NET
<asp:Button ID="ConCloseButton" class="CloseBut" runat="server" OnClientClick="closeConPanel();return false;;" OnClick="ConClose_Click" Text="✖" />
Here is my JavaScript
function closeConPanel() {
document.getElementById('con-feed').style.display = 'none';
}
And here is the C# server-side code
protected void ConClose_Click(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection("Data Source=xxxx;Initial Catalog=xxxxxx;User ID=xxxxxx_user;Password=xxxxxxxx_user");
conn.Open();
SqlCommand cmdUpdate = new SqlCommand("Update CookieInfo Set ConstNewsData='0' where UserEmailId='" + (Label1.Text).ToString() + "'", conn);
cmdUpdate.ExecuteNonQuery();
conn.Close();
HttpCookie cookie = Request.Cookies["Dashboard"];
cookie["ConstNews"] = "0";
cookie.Expires = DateTime.Now.AddYears(1);
Response.Cookies.Add(cookie);
}
In summary, when a user clicks on the ASP Button, the "con-feed" div should be hidden and the app should remember this preference based on their email address stored in the SQL table. If the user closes the div, its state will be set to '0' and it won't be displayed upon subsequent visits. However, if the state is '1', the div will remain visible. Everything is functioning as intended, but I am aiming to accomplish this without triggering a postback.