2013-04-09 231 views
0

例如:綁定使用JQuery返回數據表到的GridView的方法

public DataTable GetCountries() 
{ 
//all sql connection 
//fetching data into a datatable 


return objDataTable // returns a datatable 
} 


public void BindGridView() 
{ 
GridView1.DataSource = GetCountries(); 
GridView1.DataBind(); 
} 

,我可以上面的代碼實現的事情是結合一個GridView, 但我想GridView1使用JQuery和數據表來綁定由GetCountries()方法返回...

請任何人都可以給我一個最簡單的例子...?

回答

0

aspx頁面(Default.aspx的)

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Asp.net Bind Data to Datatable using JQuery or JSON</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
url: "Default.aspx/BindDatatable", 
data: "{}", 
dataType: "json", 
success: function(data) { 
for (var i = 0; i < data.d.length; i++) { 
$("#gvDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Location + "</td></tr>"); 
} 
}, 
error: function(result) { 
alert("Error"); 
} 
}); 
}); 
</script> 
<style type="text/css"> 
table,th,td 
{ 
border:1px solid black; 
border-collapse:collapse; 
} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<asp:GridView ID="gvDetails" runat="server"> 
<HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" /> 
</asp:GridView> 
</form> 
</body> 
</html> 

cs文件(Default.aspx.cs)

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.SqlClient; 
using System.Web.Services; 

public partial class _Default : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
BindColumnToGridview(); 
} 
} 
/// <summary> 
/// This method is used to bind dummy row to gridview to bind data using JQuery 
/// </summary> 
private void BindColumnToGridview() 
{ 
DataTable dt = new DataTable(); 
dt.Columns.Add("UserId"); 
dt.Columns.Add("UserName"); 
dt.Columns.Add("Location"); 
dt.Rows.Add(); 
gvDetails.DataSource = dt; 
gvDetails.DataBind(); 
gvDetails.Rows[0].Visible = false; 
} 

[WebMethod] 
public static UserDetails[] BindDatatable() 
{ 
DataTable dt = new DataTable(); 
List<UserDetails> details = new List<UserDetails>(); 

using (SqlConnection con=new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=true")) 
{ 
using (SqlCommand cmd=new SqlCommand("select TOP 10 UserId,UserName,Location from UserInformation",con)) 
{ 
con.Open(); 
SqlDataAdapter da= new SqlDataAdapter(cmd); 
da.Fill(dt); 
foreach (DataRow dtrow in dt.Rows) 
{ 
UserDetails user=new UserDetails(); 
user.UserId = dtrow["UserId"].ToString(); 
user.UserName = dtrow["UserName"].ToString(); 
user.Location = dtrow["Location"].ToString(); 
details.Add(user); 
} 
} 
} 
return details.ToArray(); 
} 
public class UserDetails 
{ 
public string UserId { get; set; } 
public string UserName { get; set; } 
public string Location { get; set; } 
} 
} 
相關問題