【问题标题】:how do i do a jquery/ajax refresh of sqldatareader data without page refresh in ASP.NET?如何在 ASP.NET 中不刷新页面的情况下对 sqldatareader 数据进行 jquery/ajax 刷新?
【发布时间】:2012-02-07 14:24:40
【问题描述】:

我有一个 sqldatareader 在页面加载时在页面上吐出 SQL 数据,但我想添加功能以单击 jquery 按钮从一组新结果中向用户刷新数据,而不刷新整个页面.

虽然我是一个初学者,但不知道从哪里开始。

我的 ASPX 中有以下 DIV 内容

<div id="blockOver">
<% while (Reader.Read()) {
   string filename = Reader.GetString(1);
   string date = Reader.GetSqlDateTime(3).ToString();
   string filetype = Reader.GetString(4);
   Int32 height = (Int32)Reader.GetSqlInt32(5);
   Int32 width = (Int32)Reader.GetSqlInt32(6);
   string uploadGroup = Reader.GetString(7);
   string title = Reader.GetString(8);
   string uniqueID = Reader.GetString(9);
   string uploader = Reader.GetString(10);
   string uniqueIDnoExt = Reader.GetString(12);
%>
<div class="block">
    <a href="#t=<%= uniqueID %>" onmouseover="defaultJs.displayInfo ('<%= title %>', '<%= date %>', '<%= filetype %>', '<%= uniqueIDnoExt %>')" onclick="defaultJs.showFile('<%= title %>', '<%= date %>', '<%= filetype %>', '<%= uniqueIDnoExt %>', '<%= uniqueID %>')" onmouseout="defaultJs.hideInfo()">
    <img title="<%= title %>" src="thumbs/<%= uniqueIDnoExt %>.jpg" />
    </a>
</div>
<% } %>

在我的 ASPX.CS 中,我有:

public partial class _Default : System.Web.UI.Page
{
private SqlDataReader reader = null;
public SqlDataReader Reader { get { return reader; } set { reader = value; } }

    protected void Page_Load(object sender, EventArgs e)
    {
    string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
    SqlConnection connection = new SqlConnection(connectionString);
    connection.Open();

    SqlCommand command = new SqlCommand("SELECT * FROM uploads ORDER BY id DESC", connection);
    command.Parameters.Add(new SqlParameter("uploader", "anonymous"));

    Reader = command.ExecuteReader();
    }
}

这适用于在页面加载时加载数据,但我现在想做的是合并 jquery/ajax 以便能够在 jquery 调用时刷新此数据,而无需刷新整个页面。

我不确定从哪里开始,我确定这是你们的第二天性,谁能指出一些简单的资源或提供一些示例代码?非常感谢。

【问题讨论】:

  • 首先,您不应该混合代码和内容 (HTML),因为这会使您的页面更难阅读和维护。此外,您使用的嵌入式 SQL 也不好 - 使用带有 CommandType.StoredProcedure 类型命令对象的存储过程要好得多。
  • 来自一位程序员的提示:不要使用数字索引来检索阅读器值;使用命名检索。

标签: c# jquery asp.net ajax visual-studio


【解决方案1】:

您需要稍微了解一下 jquery,这完全是客户端。它是在 Internet 浏览器中执行的一些 javascript 代码。

Jquery 是一个 Greet 库,用于执行 DOM 操作(查找、修改、添加 HTML 元素)和 ajax 调用。

您需要将 ajax 调用连接到某些东西:在 HTML 控件(按钮、选项卡等)或 javascript 计时器上。

此外,如果您实现 ajax 调用,这意味着您必须在服务器端公开一个 REST Web 服务(响应 HTTP GET 或 POST 调用的东西)。

【讨论】:

    【解决方案2】:

    如果您使用的是 Asp.net Web 表单,您可能会发现嵌入到框架中的部分页面更新更容易。 jQuery 很棒,但很难集成到 Asp.net Web Forms 回发模型中。

    http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-partial-page-updates-with-asp-net-ajax

    【讨论】:

    • Zach 说的很对,虽然我个人非常不喜欢 ASP.NET 回发模型,而且我一直使用 jQuery ajax 调用 :)
    【解决方案3】:

    使用 ASP UpdatePannel 它可以在不回发的情况下部分呈现页面部分。如果您使用的是 ASP.net,它真的很容易使用

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <div id="blockOver">
           ...Your code...
        </div>
       </ContentTemplate>
    </asp:UpdatePanel>
    

    【讨论】:

    • +1 UpdatePanel 非常简单,尤其是当您不做非常复杂的事情时。由于您可能已经有一个按钮可以在服务器端代码中执行您需要的操作,您只需将它和显示区域包装在更新面板中就可以了。瞧。
    猜你喜欢
    • 1970-01-01
    • 2017-12-21
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    • 2017-05-11
    • 1970-01-01
    • 2020-06-08
    • 2019-11-25
    相关资源
    最近更新 更多