ASP SqlDataSource 更新 - 用于部分页面回发的 AJAX？答案

【问题标题】：ASP SqlDataSource UPDATE - AJAX for partial page post back?ASP SqlDataSource 更新 - 用于部分页面回发的 AJAX？
【发布时间】：2018-06-18 16:36:27
【问题描述】：

我正在处理带有jquery的div点击事件-在div点击上，通过ID调用asp.net按钮。

$('#myDiv').on('click', (function(clickEvent) {
  document.getElementById("Button1").click();
}))

这是ASP 按钮标记：

<asp:Button ID="Button1" runat="server" OnClick="my_ClickEvent" Text="Button" CssClass="hide" />

下面是代码：

protected void my_ClickEvent(object sender, EventArgs e)
{
  SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "Some Name";
  SqlDataSource1.Update();
  Response.Redirect(Request.Url.AbsoluteUri);
}

这是div 标记：

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
  <asp:Timer ID="Timer1" runat="server" Interval="200000" OnTick="Timer1_Tick" Enabled="True" />
  <div class="square" id="myDiv" runat="server">
    <div class="content">
      <div>
        <p id="ImUnavailable">Unavailable for Dispatch</p>
        <div class="table">
          <div class="table-cell">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
              <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
              </Triggers>
              <ContentTemplate>
                <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" CssClass="Grid" RowStyle-HorizontalAlign="Center" DataKeyNames="PhysicalAddress">
                  <Fields>
                    <asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName">
                      <ControlStyle BorderStyle="None" />
                      <ItemStyle BorderStyle="None" />
                    </asp:BoundField>
                    <asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="Building" ItemStyle-CssClass="building">
                      <ControlStyle BorderStyle="None" />
                      <ItemStyle BorderStyle="None" />
                    </asp:BoundField>
                    <asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="TimeOn">
                      <ControlStyle BorderStyle="None" />
                      <ItemStyle BorderStyle="None" />
                    </asp:BoundField>
                    <asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="IPAddress" ItemStyle-CssClass="hide">
                      <ControlStyle BorderStyle="None" />
                      <ItemStyle BorderStyle="None" />
                    </asp:BoundField>
                    <asp:BoundField DataField="PhysicalAddress" HeaderText="PhysicalAddress" ShowHeader="False" ReadOnly="True" SortExpression="PhysicalAddress" ItemStyle-CssClass="hide">
                      <ItemStyle CssClass="hide" />
                    </asp:BoundField>
                    <asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="Available" ItemStyle-CssClass="hide">
                      <ItemStyle CssClass="hide" />
                    </asp:BoundField>
                  </Fields>
                  <RowStyle HorizontalAlign="Center" />
                </asp:DetailsView>
              </ContentTemplate>
            </asp:UpdatePanel>
          </div>
        </div>
      </div>
    </div>
  </div>

如您所见，我将DetailsView 包裹在updatepanel 中，它会在Timer 间隔触发器上更新。当计时器达到它的时间间隔时，updatepanel 将回发到数据库，DetailsView 保持最新。这发生在ajax updatepanel，所以页面本身没有刷新。

我不确定如何通过我的div 点击来实现这一点。我正在尝试单击div，调用ASP 按钮，更新SqlDataSource，所有这些都没有刷新整个页面。 div click 事件现在有效，但它没有使用ajax。在研究解决方案时，我变得有点困惑，就像我遗漏了一些简单的东西一样。

任何建议表示赞赏。谢谢！

编辑

所以，我创建了一个单独的UpdatePanel 并将其构造成这样...当我单击Button1 时它仍然会刷新整个页面...

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/> 
<asp:UpdatePanel ID="UpdatePanel7" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
        <ContentTemplate>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ...
            </asp:SqlDataSource>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="my_Click" />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="you_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

我要做的就是在单击 Button1 时更新 SQL 表中的列。它可以工作，但会刷新页面。

再次感谢

【问题讨论】：

将您的asp:button 放入updatepanel 或将trigger 添加到更新面板`。
我把按钮放在UpdatePanel里面，在更新面板上设置ChildrenAsTriggers="true"，还是刷新了整个页面。我还尝试为 click 事件添加一个 asyncpostbacktrigger，仍然刷新整个页面...
尝试使用LinkButton而不是Button
好的。出于什么目的？只是好奇。该按钮有效，LinkButton 或 Button 在 AJAX 方面有区别吗？
对此有任何可见性吗？除了 div 点击刷新页面之外，我在网站上的所有内容都正常工作。 div 单击调用一个更新 SqlDataSource 列的 asp 按钮。再次感谢

标签： jquery asp.net updatepanel updatepanel ajax updatepanel ajax javascript jquery asp.net ajax updatepanel

【解决方案1】：

我查看了上面发布的事件输出并回答了我自己的问题。

我将代码隐藏更改为：

protected void my_Click(object sender, EventArgs e) {SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";SqlDataSource1.Update();}

...当然我不再被称为 Response.Redirect。它现在按预期工作。

谢谢！

【讨论】：