how do i do a jquery/ajax refresh of sqldatareader

Question

I have a sqldatareader spitting out SQL data on a page on page load but I'd like to add functionality to have a jquery button click that refreshes the data to the user from a fresh set of results, without refreshing the entire page.

I'm a beginner though and having trouble figuring out where to begin with this.

I have the following DIV content in my ASPX

<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>
<% } %>

and in my ASPX.CS I have:

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();
    }
}

this works for loading the data on page load, but what i'd like to do now is incorporate jquery/ajax to be able to refresh this data on jquery call, without it refreshing the entire page.

I'm not really sure where to begin with this, I'm sure it's second nature for you guys, could anyone point me at some simple minded sources or provide some sample code? Really appreciate it thanks.

Answer 1

If you are using Asp.net Web Forms, you may find the partial page updating that is baked into the framework easier. jQuery is great, but it can be tough to integrate into the Asp.net Web Forms postback model.

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

Answer 2

You need to read about jquery a bit which is completely client side. It's some javascript code executing in the Internet browser.

Jquery is a greet library to do DOM manipulation (find, modify, add HTML elements) and ajax calls.

You need to wire the ajax calls to something: either on HTML controls (button, tab, etc.) or to javascript timers.

Also if you implement ajax calls, that means you have to expose a REST web service on server side (something that responds to an HTTP GET or POST call).

Answer 3

Use the ASP UpdatePannel it enables sections of a page to be partially rendered without a postback. And it is realy easy ut use if you are using ASP.net

<asp:ScriptManager ID="ScriptManager1" runat="server" />

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