I ran into this problem multiple times in my career, and never was able to find a elegant solution for it. Imagine you have a simple page, that has a repeater. You populate that repeater on the server-side through the databinding. That's great, works fast and does what it's supposed to. But now you want to add paginator to that repeater, or otherwise change the output. Doing it through Ajax is a preferred way to enable rich client interaction.
So you create a web-service that serves you the data as JSON, but now you are stuck... Either you have to write complicated client-side code to find each field that you need to modify in each repeater-item, or you have to blow away the whole server-side output of the repeater and construct new HTML from the scratch, or, the method that I've been using lately, take the first repeated item, blow away everything else and clone the first item as many time as you need to and modify it's fields.
All of the described methods are not optimal, because no matter what, they require quite a bit of repeated logic on the server-side (i.e. template in repeater) and on the client-side (javascript to display JSON data). There's got to be a better, easier way to do this. First thing that comes to mind, is instead of returning JSON from the web-server, return HTML of the pre-populated repeater. But for something like that, I might as well use ASP.NET AJAX Update panel. The output isn't going to be any smaller with a stand-alone web-service.
Next thing that I thought of, is JavaScript templates. What if there would be some way to take unprocessed repeater template on the server-side, and convert it to JavaScript template that could be either embedded on the page at load, or served as part of the web-service response. However, I couldn't find any existing solutions for something like this. And I can't think of a simple way to do that myself. Any ideas?
P.S. Rendering JavaScript template to the client-side on page load, and using JavaScript to populate it without the initial view being rendered on the server (no repeater and databinding) is out of the question. I care too much about performance.
Firstly, I don't believe that using client template with JSON data even on first load will adversely affect the performance unless we are talking about devices with different form factors such as phones etc.
However, if you must use server side templating/rendering then why not make server return the html for the repeater. This can be done by putting repeater logic into a different user control/page and processing only that page on ajax request. And this is not at all equivalent to using UpdatePanel (as stated by you) - UpdatePanel posts entire page data (including view-state) having more request size. The response size is also larges because it must contain the view-state. On server side also, use of UpdatePanel results in loading complete control tree with state data and post-back event processing. Sending only the requisite html is much better approach and will fit your needs perfectly - only issue is the html would be larger in size as compared to JSON.
Lastly, there are some interesting projects such as Script# - Script# converts C# code into java-script. You may build something similar (using script# itself) to convert the server side templating code into eqivalent JS code. More viable approach on similar lines could be use T4 templating to convert a technology-agnostic template into both server side code (markup + code or pure code) and equivalent JS-code.
After thinking about all pros and cons of different approaches, I stopped on the following method. I created a custom ASP.NET databound control, that can render HTML, however, when the page is requested with query string parameters, instead of just doing standard rendering, it will use Response.Clear() and Response.End() and in between of those two commands output JSON version of data based on the query string parameters. Also on the first rendering of the page, it will also output JavaScript template using reflections to read names of the variables from the control's template area.
This method works great, all I have to do, is drop my control on the page, data bind it, and it works as a true AJAX grid that supports pagination, sorting and filtering. However it does have limitation. In the control's template you can only specify variables, not expressions. Otherwise reflections can't convert it to a JavaScript variable. But I can live with that.
Other possibilities that I considered is a separate web-service that takes a type of the page as parameter and uses reflection to get data bound object as well as create template for the grid. I also though about writting my own version of update panel, that would not use view state and only send in part of the page.
Related
I have repeater control in which i am binding data from sql server database, Now i have number of records showing on my page but i want that i can filter my records according to dropdown selected. I need 4-5 dropdowns control thats depend on my need and i don't want my page to refresh while filtering.
Below is the example, this website using checkboxes too but i need only dropdowns...
http://www.phonearena.com/phones/full#/phones/full/
Give me any idea how to start, i think ajax is the thing i need. Suggest some examples if you have.
Ajax is the right solution.
Personally i suggest you jquerytemplate and ajax call few row code to achive your goal you may find more info here Load JSON data using the dropdown menu and refresh the div area with the new results in a web site
It is a good point to start and you can make more stuff with this logic :) really simple and fluid code :)
I would suggest you to use a client-side framework (so in JavaScript) like AngularJS, BackboneJS or KnockoutJS. They all provide ways to work with collections in JavaScript (like filtering in this case). You won't need Ajax excepted for the first load or if you want to do some paging. And because it's all client-side it will be far more fluid than re-downloading at every criteria change.
I have an ASP.Net web page that displays various chunks of data based on a user's search string. In this web page I'm using a <Panel> tag because I need to have a vertical scrollbar that displays when needed to display all of the data.
I've thought about defining an HTML page (in code behind, with all the tags and data included), and displaying that inside a <div>, inside the <Panel>.
I've also explored the possibility of displaying an ASP.Net web page with the data/tags/etc. and placing each page in its own <Iframe> element. I'm afraid that this solution would be slow to load (as compaired to the HTML method described above) especially when there's 100's of individual pages to be loaded.
My question is what's the best way to display N number of individual pages of data and have a vertical scrollbar when there's a need?
Displaying various data pieces on ASP.NET pages is a big subject, I suppose, and many methods can be used, including the ones you've mentioned.
How about making use of Dynamic Data framework .NET v2,3,4. The most powerful is the latest one of course.
Then you don't need to create 100's of individual pages, just onthe fly redirect using metatable names used in your model/context. All you data will also be wonderfully linked where appropriate. Also need to carefully design you model based on however your data needs be presented. The controls for that could be GridView or other, but all done on server side.
I would like to know how the HTML source of ajax based sites can be read using HttpWebRequest / HttpWebResponse (That is reading the contents of a website at server side). The problem that I'm facing is that I'm unable to read parts of the webpage which uses Ajax or stuffs like UpdatePanel.
My application is in ASP.NET / C#, so can't think of using stuffs like Browser control or mshtml.dll since I would not be able to serve multiple requests.
Thanks in advance.
this is going to be difficult.
I know you said you don't want to use Browser control, but I'm going to say it anyway. You will most probably be better off using a Browser control. The reasons are as follow:
AJAX sites make multiple calls from the browser to the server to obtain the required view.
The multiple calls are being performed via JavaScript
The data returned from the server may be reformatted by JavaScript before being updated onto the view.
If you are going to do this using HttpWebXyz functions, you will have to do the following:
Make the relevant calls to get the initial page source.
Parse the page for JavaScript.
Evaluate/execute the JavaScript. This may include providing the relevant implementation for functions such as alert and making subsequent calls to the server.
Depending on the complexity of the AJAX site, you may want to reconsider using the browser control. Complex sites are easier process by the control. If the site is simple enough, you may survive parsing and executing the required JavaScript.
This example uses a deprecated class to parse JavaScript.
You may want to explore ICodeCompiler and its relevant classes for the new approach.
Good luck.
In my site, I'm using update panel in the master page. Half of my web page will retrieve the data from the database in dynamic. As, my update panel is in master page(with ajax loader), it is taking much time for every event. Is there any other advanced method to get the data from the database instead of using update panel.. Or any other idea instead of this?
I think you need to profile to see where the bottleneck is; I expect you have unnecessary code going on in your aspx that isn't really needed for the UpdatePanel.
Personally, I wouldn't use UpdatePanel now; I'd use a simple (but separate) page (or route, if using MVC) that just does the code needed for this work, and use jQuery to load it.
I think you want to load your web page from database table which contains html. If it is so then the best idea would be to create controls for headers/ footers or repeated sections and use caching which would reduce the load time of your web pages.
You could easily cache your controls. You can check here http://msdn.microsoft.com/en-us/library/aa478965.aspx
Happy coding
A similar question was asked here in storing information in a given html element.
I'm still green to jQuery, but I'm looking for the best way to store information on the page. I have a Repeater that holds one image per item. These images are clickable and can fire a given jQuery event. The issue I'm having is, the objects that the Repeater is bound to holds some specific information(such as "Subtext", "LargerImage", etc) which I would like to be accessible from the page.
Core/Data in jQuery accomplishes this just fine, however we would still need to build the jQuery statement from C#, as all the data is stored on the server. To clarify a bit, this is storing information on the page from a database, which is a bit different than arbitrary information being made available through jQuery.
I'm not restricting this question to "how to bind a custom attribute to an element", because I did come across an idea of generating a JS Struct from the C# codebehind to store information, but I'm avoiding any code generating code scenarios(or trying to).
Custom Attributes from HTML5(ie, "data-subtext") are also a possibility as I can easily add those from the itemdatabound event:
sampleImageElement.Attributes.Add("data-subtext", "And this what the image is about");
I'm a bit confused on browser support for this specific attribute though, or if it is even best practice so early in the game. If custom attributes are the way to go, that's an easy change to make happen. If jQuery can accomplish the same, I'd love to be pointed that way at least for my own understanding.
Any thoughts are greatly appreciated.
I'm answering this question only for the record keeping purposes of stackoverflow, as this is the solution I've moved forward with for this scenario. An AJAX call is completely warranted for any larger datasets and is a direction I would definitely go otherwise.
I went ahead with the "data-" field in the HTML5 spec, provided by the jQuery meta-data plugin.
I'm wrote a short extension method on the Web.UI.AttributeCollection class called "AddMetaData", which accepts an IList as well as a string "Key" to ease the attachment to a given page element.
I'm not marking this as the answer just yet, as there might be some community feedback on my own direction.
To clarify what happens in ASP.NET, once the page is served to the client, the objects that the Repeater is bound to on the server are destroyed and are then recreated upon each page postback.
It sounds like you want to achieve some kind of tooltip effect where the contents are retrieved from the server through AJAX? There are numerous different tooltip options available
jQuery Tooltip plugin
Random.Next()'s jQuery AJAX tooltip
dhtml goodies AJAX tooltip
clueTip
that can be used to do this. You could then set up a webservice or page method to retrieve the relevant data from your datasource.
Of course, you could have the content rendered in the HTML sent to the client when the request is processed and simply hide this markup. Then write your own plugin to display the markup in the form you require.