c# - javascript ポストバック後にクリアされた変更

Question

ここにコードを投稿しています。

ASP:

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <script type="text/javascript">

        function ShowHideBox() {
            boxdl.style.display = 'none';
        }
    </script>
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        First Value:<asp:TextBox ID="first" runat="server" ></asp:TextBox><br />
        Second Value:<asp:TextBox ID="second" runat="server" ></asp:TextBox><br />
        Calculation:<asp:TextBox ID="calc" runat="server" ></asp:TextBox><br />
        <asp:Button ID="Calculate" runat="server" Text="Calculate" 
            onclick="Calculate_Click" />
         <div onclick="ShowHideBox();" style="display:block;height:10px;width:100px;background-color:#258000;"></div>
        <div style="background-color:#852000;width:100px;height:100px;display:block;border:black 1px solid;" id="boxdl">

        </div>
    </asp:Content>

C# コード:

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

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

    }
    protected void Calculate_Click(object sender, EventArgs e)
    {
        calc.Text = (int.Parse(first.Text) + int.Parse(second.Text)).ToString();
    }
}

緑のボックスをクリックすると赤ボックスが消えますが、計算ボタンをクリックすると、2 つのテキスト ボックスの結果が計算され、3 番目のテキスト ボックスに結果が表示されますが、問題は、ポストバック イベントの発生後に赤ボックスが表示されることです。この問題を防ぐ解決策はありますか??? これは単なるデモです。これは私のプロジェクトで何度も使用されています...