我怎么能点击div里面的按钮来不刷新整个页面asp.net C＃ [英] how can I click on button inside div to not to refresh whole page asp.net C#

问题描述

I have 3 buttons on click of the button using java script the div will appear each div have different button to save some data in asp.net
page but it refresh whole page i would like to refresh particular div only and save data to my db

Button Code
    <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
<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>
in this div there are button which performs server operation

How can I refresh only this div not whole page

推荐答案

当你使用时asp.net服务器端按钮它会将您的页面发回服务器。因此，整个页面都会刷新。但是，当您单击asp.net按钮时，您希望更新/刷新特定div。如果你想这样你只需使用ajax来更新/刷新你的div。在ajax方法中，您只需要服务器获取数据，在客户端，您可以使用该数据呈现客户端控制。您可以使用jquery进行ajax操作。以下我将展示示例代码。你可以更google搜索更真实的代码。



服务器端代码示例将类似于

When you use asp.net server side button it will post back your page to the server. For that reason the whole page is refreshed. But you want to update/refresh particular div when a asp.net button is clicked. If you want so you just use ajax for update/refresh your div. In ajax method you just go server for data and in client side you render your client side control with that data. You can use jquery for ajax operation. The following i am showing sample code. You can more googling to findout more realistic code.

The server side code sample will be like

public partial class Index : Page
{
[WebMethod]
public static GetData(){
  return "hello world";
} 
}

在客户端jquery javascript代码看起来像

in client side jquery javascript code looks like

.ajax（{
url： / GetData，
data： {}，
dataType： json，
类型： POST，
contentType： application / json; charset = utf-8，
成功： function （data）{
response（

.ajax({ url: "/GetData", data: "{}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: function (data) { response(

.map（data.d， function （item）{
返回 {
label：item.split（' - '）[ 0 ]，
val：item.split（' - '）[< span class =code-digit> 1 ]
}
}））
}，
错误： function （回复）{
alert（response.responseText）;
}，
失败： function （响应）{
alert（response.responseText）;
}，
}）;
}，
minLength： 0 ，
焦点：功能（ ）{
// 防止在焦点上插入值
return false ;
}，
}）;

.map(data.d, function (item) { return { label: item.split('-')[0], val: item.split('-')[1] } })) }, error: function (response) { alert(response.responseText); }, failure: function (response) { alert(response.responseText); }, }); }, minLength: 0, focus: function () { // prevent value inserted on focus return false; }, });

这篇关于我怎么能点击div里面的按钮来不刷新整个页面asp.net C＃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！