我怎么能点击div里面的按钮来不刷新整个页面asp.net C#

时间:2013-10-15 07:42:41

标签: c# javascript jquery html asp.net

“我使用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 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();
    }
}

3 个答案:

答案 0 :(得分:0)

您是否尝试过使用带有脚本管理器的Ajax Update Panel。 将所有div内容放入更新面板并尝试。 它应该工作

答案 1 :(得分:0)

为了将网页的某些部分提交给服务器,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

答案 2 :(得分:0)

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

“updatepanel”将确保提交数据时不会刷新整个页面。