Solved

How to apply JQuery to an ASP.NET Repeater

Posted on 2015-02-21
8
55 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
  • 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now