如何单击div中的按钮以不刷新整个页面asp.net C＃

Question

“使用java脚本单击按钮时，我有3个按钮，div会出现，每个div具有不同的按钮以在asp.net页面中保存一些数据，但它会刷新整个页面，我只想刷新特定的div并将数据保存到我的数据库中”

按钮代码

<asp:Button ID="btnConse" runat="server" CssClass="Button" AlternateText="1" Text="Consequence" 
    OnClientClick="ToggleDiv('Consequence');return false;" />
<asp:Button ID="btnTask" runat="server" CssClass="Button" AlternateText="1" Text="Task" 
    OnClientClick="ToggleDiv('Task');return false;" />

<asp:Button ID="Button4" runat="server" CssClass="Button" AlternateText="1" Text="Incident" 
    OnClientClick="ToggleDiv('Incident');return false;" />

Java脚本

<script type="text/javascript">
    function ToggleDiv(Flag) {
        if (Flag == "Consequence") {
            document.getElementById('divConsequence').style.display = 'block';
            document.getElementById('divTask').style.display = 'none';
            document.getElementById('divIncident').style.display = 'none';
        }
        else {
            if (Flag == "Task") {
                document.getElementById('divConsequence').style.display = 'none';
                document.getElementById('divTask').style.display = 'block';
                document.getElementById('divIncident').style.display = 'none';
            }
            else {
                if (Flag == "Incident") {
                    document.getElementById('divConsequence').style.display = 'none';
                    document.getElementById('divTask').style.display = 'none';
                    document.getElementById('divIncident').style.display = 'block';
                }
            }
        }
    }
</script>

DIV

<div id="divConsequence" style="display: none;">
    <div class="TabTextHoriCenter">
        <asp:Label ID="Label28" runat="server" Text="div Consequence"></asp:Label>
        <asp:Button ID="btnSaveCon" runat="server" CssClass="Button" AlternateText="1" Text="Consequence" OnClick="btnSaveCon_Click"  />
    </div>
</div>
<div id="divTask" style="display: none;">
    <div class="TabTextHoriCenter">
        <asp:Label ID="Label33" runat="server" Text="div Task"></asp:Label>
        <asp:Button ID="btnSaveTask" runat="server" CssClass="Button" AlternateText="1" Text="Task" OnClick="btnSaveTask_Click"  />
    </div>
</div>
<div id="divIncident" style="display: none;">
    <div class="TabTextHoriCenter">
        <asp:Label ID="Label34" runat="server" Text="div incident"></asp:Label>
        <asp:Button ID="btnSaveInc" runat="server" CssClass="Button" AlternateText="1" Text="Incident" OnClick="btnSaveInc_Click"  />
    </div>
</div>

在这个div中有执行服务器操作的按钮

如何只刷新该div而不刷新整个页面？

.cs代码

   protected void btnAddFiles_Click(object sender, EventArgs e)
{
    if (fuFile.HasFile)
    {
        FileUpload Custom = new FileUpload();
        Custom = fuFile;
        if (Session["FileUpload"] != null)
        {
            FileUpload[] fuu = (FileUpload[])Session["FileUpload"];
            int cnt = 0;
            for (int k = 0; k < fuu.Length; k++)
            {
                if (fuu[k] != null)
                {
                    cnt++;
                }
                else
                {
                    break;
                }
            }
            fuu[cnt] = Custom;
            Session["FileUpload"] = fuu;
        }
        else
        {
            FileUpload[] fuu = new FileUpload[100];
            fuu[0] = Custom;
            Session["FileUpload"] = fuu;
        }
        if (flag == 1)
        {
            FilesAttached.Value = "";
            flag = 0;
        }

        FileInfo Finfo = new FileInfo(fuFile.PostedFile.FileName);

        string Ext = Finfo.Extension.ToLower();
        string f = fuFile.FileName.ToLower();
        string fname = Session["CompanyID"].ToString() + Session["MyRiskArea"].ToString();

        Session["time"] = String.Format(Global.yyyy_mmm_ddhh_mm_ss_tt.ToString(), DateTime.Now);
        int i = Convert.ToInt32(Ext.Length);
        String NewString = f.Remove(f.Length - i, i) + Session["time"].ToString();
        string str = NewString + Ext;
        fuFile.SaveAs(Server.MapPath(Global.AttachedFiles + "/" + str));
        ht.Add(Session["time"].ToString(), f);
        ht1.Add(Session["time"].ToString(), System.IO.Path.GetFullPath(fuFile.FileContent.ToString()));

        dlIncidents.DataSource = ht;
        dlIncidents.DataBind();
        fuFile.Focus();
        dlIncidents.Visible = true;
        //BindGrid();
    }
}

Answer 1

您是否尝试过将Ajax更新面板与脚本管理器一起使用。 将所有div目录放入“更新面板”，然后尝试。 它应该工作

Answer 2

为了将网页的某些部分提交到服务器，Ajax是最好的方法。

“ AJAX”避免了完整的页面提交。有关更多信息，请参见以下链接... http://www.indiabix.com/technical/dotnet/asp-dot-net-ajax/

http://www.w3schools.com/ajax/ajax_intro.asp

http://www.tutorialspoint.com/asp.net/asp.net_ajax_control.htm

Answer 3

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <div>
          <input type="submit" value="Continue" runat="server" />
      <div>
   </ContentTemplate>
</asp:UpdatePanel>

“ updatepanel”将确保在不刷新整个页面的情况下提交数据。