About repeater in asp.net (javascript)

Question

How to load data in repeater using javascript ??

Sachin Singh · Answer

Follow below example , we mark the method as WebMethod to be called by javascript and loop through the result to bind result. "dvCustomers" > "rptCustomers" runat= "server" > "tblCustomer" cellpadding= "2" cellspacing= "0" border= "1" > "name" > "ContactName" ) %> City: "city" > "City" ) %> Postal Code: "postal" > "PostalCode" ) %> Country: "country" > "Country" )%> Phone: "phone" > "Phone" )%> Fax: "fax" > "Fax" )%> public class Customer { public string CustomerId { get; set; } public string ContactName { get; set; } public string City { get; set; } public string Country { get; set; } public string PostalCode { get; set; } public string Phone { get; set; } public string Fax { get; set; } } protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { List customers = new List (); customers.Add(new Customer()); rptCustomers.DataSource = customers; rptCustomers.DataBind(); } } [WebMethod] public static List GetCustomers() { string constr = ConfigurationManager.ConnectionStrings[ "constr" ].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand( "SELECT TOP 10 * FROM Customers" )) { cmd.Connection = con; List customers = new List (); con.Open(); using (SqlDataReader sdr = cmd.ExecuteReader()) { while (sdr.Read()) { customers.Add(new Customer { CustomerId = sdr[ "CustomerId" ].ToString(), ContactName = sdr[ "ContactName" ].ToString(), City = sdr[ "City" ].ToString(), Country = sdr[ "Country" ].ToString(), PostalCode = sdr[ "PostalCode" ].ToString(), Phone = sdr[ "Phone" ].ToString(), Fax = sdr[ "Fax" ].ToString(), }); } } con.Close(); return customers; } } } "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > "text/javascript" > $(function () { $.ajax({ type: "POST" , url: "Default.aspx/GetCustomers" , data: '{}' , contentType: "application/json; charset=utf-8" , dataType: "json" , success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); }); function OnSuccess(response) { var table = $( "#dvCustomers table" ).eq( 0 ).clone(true); var customers = response.d; $( "#dvCustomers table" ).eq( 0 ).remove(); $(customers).each(function () { $( ".name" , table).html(this.ContactName); $( ".city" , table).html(this.City); $( ".postal" , table).html(this.PostalCode); $( ".country" , table).html(this.Country); $( ".phone" , table).html(this.Phone); $( ".fax" , table).html(this.Fax); $( "#dvCustomers" ).append(table).append( " " ); table = $( "#dvCustomers table" ).eq( 0 ).clone(true); }); }

Shantanu Pandey · Answer

you can refer following article: https://www.aspsnippets.com/Articles/Populate-ASPNet-Repeater-by-binding-DataSet-Client-Side-using-jQuery-AJAX.aspx https://www.c-sharpcorner.com/article/iteration-of-repeater-using-javascript/

About repeater in asp.net (javascript)

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)