We Keep Coding

Dealing with multiple "chained" postbacks from dynamically-created controls in a single page

I'm trying to build a very specific search page for a project and I'm having lot of trouble dealing with multiple postbacks invoked by dynamically-generated controls on a single page.
The page has to work like this:
There is a single checkbox, "Detailed search", that causes a postback on checking/unchecking.
When detailed search is not active, a simple grid with contents and buttons is displayed. Nothing special.
When detailed search is active, N checkboxes must be generated from some dynamic data, that represent the sections where you want the search to happen. Below the checkboxes, an AJAX-enabled tab control will appear, initially with no tab pages.
When checking one of the section checkboxes, a postback will occur. After the postback, data will be searched in the section selected by the user, then a new tab page containing a grid view of results and the name of the section will be added to the tab control. If the checkbox is unchecked, the tab page will disappear from the control, again, after a postback.
Now, the issue is that pretty much everything has to be generated dynamically, and that pretty much everything is connected to something else.
First issue: dealing with the "Detailed search" checkbox. Sounds easy, doesn't it? My initial idea was to set Page.Viewstate["DetailedSearchEnabled"] to true or false during the check/uncheck event handler, then create controls dynamically checking the value of DetailedSearchEnabled during Page_Load.
Nope. The postback event-handling happens between Page_Load and Page_LoadComplete. It would take an additional refresh for things to work as intended.
<< Then I'll just generate the controls on Page_LoadComplete! >>
Nope. Those controls need event handling as well, and if they're generated after Page_Load they will not be wired up correctly.
A possible solution would be generating everything in advance, on Page_Load, and only hiding/showing controls on Page_LoadComplete. But that is inefficient, and one important point of this search page is that only the minimum amount of controls should be generated.
The difficulty of this task seems to come from the way event wiring and the page life cycle work.
Surely there must be a better way of approaching this problem.

First issue: dealing with the "Detailed search" check box.
The correct approach (if you want to use page post-backs) is as follows:
In the CheckChanged event handler, save the value of the Checked property to ViewState["DetailedSearchEnabled"]. If the value is true, add the dynamic check boxes to the page. If the value is false, find and remove them.
Override LoadViewState. After calling base.LoadViewState, re-create the dynamic check boxes and wire up their events if ViewState["DetailedSearchEnabled"] is true. Note that neither Page_Load nor Page_LoadComplete is the appropriate place to do this.
Yes, you should create the dynamic check boxes at two points in the page life cycle. I recommend a helper method.
In general, your event handlers should add or remove just the dynamic controls (if any) affected by those particular events, but LoadViewState should re-create all dynamic controls that existed from the previous page request. You must store enough information in view state for LoadViewState to do so.
My answer to this other question demonstrates how to add and remove dynamic controls. You may want to use it as a reference.

Sounds to me like you should be using a CheckBoxList control to handle your dynamic checkboxes. You can add an remove items to the CheckBoxList during your post back and not have to worry about dynamically adding/removing actual controls/events to the form.
Here is a link to the msdn:
https://msdn.microsoft.com/en-us/library/14atsyf5(v=vs.85).aspx
Here is some sample code:
Protected void Button1_Click (object sender, System.EventArgs e)
{
CheckBoxList.Items.Add(new ListItem("TextValue1", "Value1"));
CheckBoxList.Items.Add(new ListItem("TextValue2", "Value2"));
}

If all else fails, you could still fall back on the quick-and-dirty old-fashioned ASP way.
Use Response.Write or <%...%> to generate your dynamic controls as plain old HTML (simple form fields, e.g. <input type="checkbox" name="foo" value="1" />).
Make sure you have a form field for every piece of information you may need after the postback(s). If necessary, use hidden form fields to 're-post' values across subsequent postbacks.
After postback, retrieve the values of the controls with the Request object.
Use those values to adjust the generation of controls as you see fit.
You should be able to do all of this in Page_Load. The advantage is total freedom. The disadvantage is total freedom to make a big mess of your aspx. So you may want to migrate all this dirty code out of your aspx, and into a custom-made control, which you can then add to your aspx.
When generating your own HTML, be careful not to introduce XSS vulnerabilities. Use HtmlEncode where necessary.

As you suggested yourself, there is a better way to tackle it.
If I was in the same situation, I would create web methods for interacting with the page, and use client side to do the UI. I'm currently working mostly with angular JS, although it does come with a learning curve. You could use ng-hide/ng-show to bind to the checkbox event to display the detailed search. When the n number of checkboxes needs to be displayed, you can then just fill them in with ng-repeat, for each of the items you need to display, after a check/uncheck you can dynamically populate new controls etc. through web method calls if extra data is needed.
Pure ASP postbacks are quite clunky from my experience, and not really suited for building a maintainable dynamic UI.

Instead of making so many postbacks, it would be better to use jquery and ajax calls to load the controls as needed and then attach events to it or you can even use UpdatePnael for that. Help Links:
https://www.simple-talk.com/dotnet/asp.net/ajax-basics-with-jquery-in-asp.net/
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

How to sort dynamically created GridViews in code-behind

I have a dynamic number of Gridviews created based on user-entered data. Each of the Gridviews has its own header row, and I want the user to be able to sort individual GridViews by clicking on a particular column's header. I've been having trouble writing an OnClick_sort method to reference the particular GridView and that data. Also, I want this to be done on Client-side instead of being passed back to the server, so I need to write the Sort method in a JavaScript, correct? Each GridView has a unique ID, generated when adding the GridView to the control.

You can do that by sing Jquery. Refer This...
http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx
http://www.aspsnippets.com/Articles/Filter-GridView-Records-using-DropDownList-in-HeaderTemplate-Header-Row-in-ASPNet.aspx

You should keep in memory the elements of the grid and sort it using your code (handling events and etc). But, the magic is: you should put your grid in a updatePanel, so your code will be translated to a script that will execute on the cliente side. If your code is too complex to run on the cliente, it will comunicate with the server without your intervension.
Is that? ;)

Implementing paging in Sitecore content pages

I have a section on my website where I plan to add a lot of text-based content, and rather than display this all at once it would be nice if I could add paging on just these pages. If possible, I would like to put all of my content within one content item and have the paging work automatically, building a URL along the lines of http://example.org/articles/title?page=2 or similar.
I've stumbled across an article that mentions paging with Sitecore items and this seems rather close to what I require, although mine requires pagination on a single content item, rather than multiple items. Can someone help me adapt this article towards my needs (if it's on the right track of where I should be looking)?
Is it possible to do this with a Sitecore content item?
http://briancaos.wordpress.com/2010/09/10/create-a-google-style-paging-component-in-c/

I think you'd either want to create your own WebControl and define a custom Render() method that reads the query string to write out the correct information, or you could even do it all in a Sublayout (a user control ASCX file). I've done this before by adding in a custom tag in the Rich text editor via Sitecore (I think I used <hr class="page-break" />) then in my ASCX I'd look for that HTML tag and split the content into chunks from that. I think my solution also used jQuery for some of it but you could probably do it with C# too.
Edit:
You'd want to split the tasks up and have the "paged" content as well as a list of pages (like the article you referenced) so you can easily generate the page buttons. Both of these could be done in two separate repeaters.

You can split the text from a single field into the different pages using approach described here: Split html string to page. All you need to do after that - read the query string and display appropriate block.

If I understand you correctly you have an Item in Sitecore that has x number of text fields and you only want a subset of those displayed depending on input in the querystring ?
In it's simplest form you want a sublayout that handles that.
Basically I'd imagine you having fields called Text1, Text2, text3 etc.
This .ascx could then retrieve the data for fields the fields you'd want using the control and adding them.
Then you could use the code from the article to generate the paging links.
This should be simple enough, but I'd say it would be a better idea to have an item in sitecore and use it's children as the data you want viewed and paged.
It's nicer because if you start out with 5 "page" fields and suddenly want 10, your item will keep on growing, where children can be added without bloating the parent page. Plus the user could then order the children how he sees fit.
I hope this helps a bit.

Adding additional input fields dynamically (similar to SO careers)

Similar to the "add more experience" functionality in http://careers.stackoverflow.com/cv/edit, I want to provide a "Add another location" link which should display an additional row of a set of 4 dropdowns (country, state, city, region). I'm actually using the CascadingDropDown jQuery Plugin for ASP.NET MVC (http://weblogs.asp.net/rajbk/archive/2010/05/20/cascadingdropdown-jquery-plugin-for-asp-net-mvc.aspx) for my location dropdown functionality, but I need to give the user the ability to add multiple locations. What would be the easiest way to handle this in ASP.NET MVC and jQuery?

I ended up using this: http://charlie.griefer.com/blog/index.cfm/2009/9/17/jQuery--Dynamically-Adding-Form-Elements

When I do such things I usually render PartialView's (with parameters to distinguish them) in a loop.

I keep a hidden textarea with the HTML of the elements I'm adding in it, something like:
<textarea style="display:none" id="template">
<select id="{0}_state" name="{0}_state"><options....></select>
<select id="{0}_city" name="{0}_city"><options....></select>
</textarea>
Then on the event where you want to add those elements to the form, using jQuery I do something like:
var global_number_added = 0;
var template = jQuery.format($("#template").val());
var add_this = template(global_number_added++); //something unique
add_this.appendTo("selector_to_append_the_elements_to");
Hooking it up with the plugin you are using is something you'll have to look up, but you'll probably need to tie in some events to set up the cascading drop down lists.
Hope that helps.
M

There are a lot of ways you could do this, but a pretty easy way in all asp.net is:
Put the form for each "additional row" in a UserControl
Put that section in an UpdatePanel
"Add another location" would cause an async postback to the UpdatePanel
Dynamically add an instance of the UserControl using Page.LoadControl(..) when they click Add Another.
Track the number of locations in ViewState so you know how many to render on each update.
You could also use jQuery to just copy the input form when they click "Add another," but it would be hard to make that sync up with asp.net for the postback, though not impossible, or you could just look at Request.Form to process it.

Is there a way to asynchronously filter an IList?

Ok, so there has to be a way to do this... no? If not I'd love some ideas.
I have two repeaters and an image inside an update panel along with some AJAX dropdowns with link buttons to the left. I want to update the data inside the update panel as fast as possible as values are selected from the dropdowns.
What do you think would be the best way to update the data? The repeaters are populated by objects, so if I could just filter the objects by some properties I could end up with the correct data. No new data from the server is needed.
Anyone have some ideas?

As far as I know, it is not easy to get just Data and data-bind the repeater on the client side. But, you might want to check this out.

Wrap only the repeater you want to rebind with an update panel of its own. The only viewstate transferred when doing this is the portion inside the update panel. You may have to play around with the triggers and update mode of the panels to get everything to play nicely.
Another option is instead of using repeaters, serialize your objects into XML and then write a page method that returns an html string of your transformed data using xsl. Then client side call your path method and update the DOM as appropriate.
A third option is to use use a service reference/page method to return JSON objects and update the DOM manually.
http://www.asp.net/AJAX/Documentation/Live/tutorials/ASPNETAJAXWebServicesTutorials.aspx
Good luck! I have done all 3,

If your data is already rendered to the screen, you can access the dom and manipulate the dom and hide/remove the ones you want. I've done this with jquery, but the same should be possible with ASP.NET Ajax library.