Solved

How to apply JQuery to an ASP.NET Repeater

Posted on 2015-02-21
8
84 Views
Last Modified: 2016-06-01
I am trying to apply JQuery to an asp.net repeater control.  Basically, I have a class object list that I would like to be used as each record to be added to each iteration of the repeater.  I'd also like the repeater to update on the fly in the case that another user would like to apply an update to your repeater list.  How can this be done?  I have code already that I can show but I need guidance when it comes to JQuery and I am not fully sure how to go about it.  Anybody that can help will be helping me a big deal.  Thanks!
0
Comment
Question by:VBBRett
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
ID: 40624585
Honestly I wouldn't use a repeater.
Although it's completely possible, mixing server side and client side code usually leads to a lot of nasty hacky techniques.

What I usually do is feed the client with a json array and generate the list client side.
Refreshing it would be as simple as performing another Ajax call... No need for updatepanel control.

Like this you have full control over your client-side generated HTML and will be much easier to maintain.

Now, what exactly do you want that jquery code to do?
0
 

Author Comment

by:VBBRett
ID: 40624600
I'm making something very similar to the Facebook Wall and although there are some differences, the basic concept is pretty much the same.  Instead of me sending data tables, I was going to send a list of a class.  The data part is all set, the store procedure pulls 10 records per page and as you continue to scroll down, another page of 10 records gets added to the page and so on.  Do you want to see my code?
0
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
ID: 40625173
So that case justifies even more to drop any kind of server-side rendering and more everything client-side.

Instead of using a repeater server-side you "must" get the data with an ajax call and render it client-side with your template of choice. Probably a good one for you here would actually be ReactJS. It will make it easier and super fast to render a list like that.

Re-engineer the app towards the Single-Page (SPA) design
Facebook, GMail and many others use this SPA design to make the web application responsive to the user.
If you're trying to mimic the same user experience then probably you want to have a look at AngularJS and drop all the server-side rendering.

PluralSight and EggHead.io will give you a very good help rumping up in these technologies.
0
Stressed Out?

Watch some penguins on the livecam!

 

Author Comment

by:VBBRett
ID: 40656886
AngularJS is becoming quite popular.  Is there any place I can find more information about Angular as far as tutorials are concerned?
0
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
ID: 40658014
Egghead.io
PluralSight.Com

Are my main source of training material.
I also give AngularJS training if you're passing through Switzerland :-)
0
 

Author Comment

by:VBBRett
ID: 40756444
Thank you gentlemen, I will attempt your strategies and training material and will report back.
0
 
LVL 4

Assisted Solution

by:Srinivasulu Muppala
Srinivasulu Muppala earned 250 total points
ID: 41593097
Hi VBBRett,

You can use angularJS to generate your json as result it can be table or un-order list.

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_object
0
 

Author Closing Comment

by:VBBRett
ID: 41629823
Thank you for your help.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question