I have a wizard style interface where I need to collect data from users. I've been asked by my managers that the information is to be collected in a step by step type process.
I've decided to have a page.aspx with each step of the process as a separate user control. step1.ascx step2.ascx etc...
The way it works now, is that when the initial GET request comes in, I render the entire page (which sits inside of a master page) and step1.ascx. When then next POST request comes in for step 2 (using query string step=2), I render only step2.ascx to the browser by overriding the Render(HtmlTextWriter) method and use jQuery html() method to replace the contents of a div.
The problem with this whole approach, besides being hacky (in my opinion) is that it's impossible to update viewstate as this is usually handled server side.
My workaround is to store the contents of step1.ascx into temporary session storage so if the user decides to click the Back button to go back one step, I can spit out the values that were stored for it previously.
I feel I'm putting on my techy hat on here in wanting to try the latest Javascript craze as jQuery with .NET has taken a lot of hack like approaches and reverse engineering to get right. Would it be easier to simply use an updatepanel and be done with it or is there a site with a comprehensive resource of using jQuery to do everything in ASP.NET?
Thanks for taking the time to read this.
Another approach, that might be easier to work with, is to load the entire form with the initial GET request, and then hide all sections except the first one. You then use jQuery to hide and show different parts of the form, and when the final section is shown the entire form is posted in one POST to the server. That way you can handle the input on the server just as if the data entry was done in one step by the user, and still get the step-by-step expreience on the client side.
You could just place all your user controls one after another and turn on the visibility of the current step's control and turn on other controls when appropriate . No need to mess with overriding Render(). This way the user controls' viewstate will be managed by the server. and you can focus on any step validation logic.
Using an UpdatePanel to contain the steps would give the ajax experience and still be able to provide validation on each step. If you are OK with validating multiple steps at once, Tomas Lycken's suggestion (hide/show with JQuery), would give a fast step by step experience.
Did you look into using the ASP.NET Wizard control? It's a bit of a challenge to customize the UI, but otherwise it's worked well for me in similar scenarios.
Related
After data is entered on a web form and then comitted to a database or whatever, what is the best way to clear the contents of the various text box controls and return combo boxes to a non-selected state? I know this can be done from the code behind but is not the best way since it requires a round trip to the server. I know javascript is also an option but I am not very familiar with it at all so is there another option or is Javascript the best way?
Thanks
Note: I'm making an assumption that you are doing a post back to the server in your form to save the data to begin with.
After you've processed the form (i.e. saved the data to the DB) why don't you clear the controls from the page and call "CreateChildControls". This would be the quickest way to clear your input controls before rendering the page back to the user.
YMMV, this isn't necessarily the best or safest way to do this but it can/could work; however I've only used this in custom controls that did not have a corresponding ascx file.
I'm retro-fitting a .aspx page with AJAX functionality (using VB, not C#). The codebehind populates the page with data pulled from a web-service. The page has two panels that are populted (with different data, of course) in this way. On a full page refresh, one or both panels might need to be populated. But populating Panel 2 can take a long time, and I need to be able to update panel 1 without refreshing Panel 2. Hence the need for AJAX (right?)
The solution I've come up with still has the old .aspx page with .aspx.vb codebehind, but introduces a Generic Handler (.ashx) page into the mix. Those first two components do the work on the user's first visit or on a full page refresh, but when AJAX is invoked, the request is handled by the .ashx page.
First question: Is this sound architecture? I haven't found a situation online quite like mine. Originally, I wanted to make the .aspx page into the AJAX handler by having the codebehind implement IHttpRequest, and then providing "ProcessRequest" and "IsReusable" methods, but I found I couldn't separate a regular visit to the page from an AJAX request, so my AJAX handlers took over even on the first visit to the page. Second question: Am I right to think that this approach (making the .aspx page do double-duty as the AJAX handler) will never work? Is it impossible to tell whether we're getting a full-page request or a partial-page (AJAX) request?
If the architecture is good, then I need to dynamically generate a lot of HTML in the .ashx file, right? If that is right, should I send HTML back to the client, or should I encode it in some way? I've heard of JSON encryption, but haven't figured out how to use it yet. So, Third question: Is "context.Response.Write" the only pipeline for sending data back to the client? And, if so, should I send back HTML or some kind of JSON-encoded objects?
Thanks in advance.
It sounds as if the page requires some AJAX functionality added to the UI.
Suggest using an UpdatePanel for each web form element that needs to have AJAXy refresh
functionality. That'll save you from having to refactor a bunch of code, and introduce a whole lot of HTML creation on your .ashx.
It'll be more maintainable over the long run, and require a shorter development cycle.
As pointed out by others, UpdatePanel would be a easier way - but you need to use multiple update panels with UpdateMode property set as conditional. Then you can trigger the update-panel refresh using any button on the page (see AsyncPostBackTrigger) or even using java-script (see this & this). On the server side, you may decide what has triggered the partial post-back and act accordingly by bypassing certain code if not needed.
You can also go with your approach - trick here is to capture the page output using HttpServerUtility.Execute in your ashx and write it back into the response (see this article where this trick has been used to capture user control output). Only limitation with this approach is that you can only simulate GET requests to your page and so you may have to change your page to accept parameters via query string. Personally, I will suggest that you create a user control that accept parameters via method/properties and will generate necessary output and then use the control on your page and in ashx (by dynmaically loading it in a temperory page - see this article).
EDIT: I am using jquery to illustrate how to do it from grid-row-view.
$(document).ready(function() {
$("tr.ajax-grid-row").click(function() {
$("#hidden-field-id").val($(this).find(".row-id").val()); // fill hidden filed
$("#hidden-button-id").click(); // simulate button click
});
});
You can place above script in the head element in markup - it is assuming that you have decorated each grid-row-view with css class "ajax-grid-row" and each row will have hidden field decorated with css class "row-id" to store row identifier or the value that you want to pass to server for that row. You can also use cell (but then you need to use innerHTML to get the value per row). "hidden-field-id" and "hidden-button-id" are client ids for hidden field and submit button - you should use Control.ClientID to get actual control ids if those are server controls.
JSON is not for that purpose, it is to pass objects serialized with a nice light weight notation, is you need to stream dinamically generated html using ashx, response.Write is what you have. You may want to take a look at MVC
Or you could use jquery if it's just html, the simpliest would be the load function, or you can look into Ajax with jquery. Since the ashx can be served as any resource it can be used in the load function.
I agree with #p.campbell and #R0MANARMY here. UpdatePanel could be the easiest approach here.
But then like me, if you don't want to go the UpdatePanel route, I don't see anything wrong with your approach. However, generating the html dynamically (entirely) at the back end is not a route I'll personally prefer (for the maintainence reasons). I'd rather prefer implementing a solution that will keep the design separate from the data.
I am working on a page that has multiple sections and each section looks 'almost the same'. Having said that, I want to build the HTML on the server and render it for each section on the initial page load. On subsequent actions, I would do a ajax call and have the server return json data.
The other option is to 'hardcode' the HTML on the aspx page and have the JS do the necessary customizations for each section. The third option is to use an UpdatePanel and do everything server side.
Based on what should I be choosing what approach to use? What approach would you use for a page like this (think of it as a large page having sub sections on it)
Edit:
One section has HTML such as user's name, and a table where users can add dependents. Another section is almost the same except its for a 'contractor' so there's additional HTML such as previous work history, but this one has name (readonly) and a table to add dependents just like the first one. Other sections have more or less the same HTML.
A user can delete dependents as well, when that happens, I need to update the database and update the section to reflect one less dependent. I was hoping to make any subsequent actions as ajax calls that interact with the server and the database
In this situation I would make a control that used ajax calls to do its work. You could then have a few properties to set that would determine the minor differences between them. I'm also looking forward to another opinions/answers to this.
I would avoid the update panel at all costs it introduces a number of problems you won't have to deal with if you already understand JavaScript and ajax calls. You will also have much better performance without all the overhead included in the update panel.
Based on your update, it sounds like what you want is a custom control that would contain a bit of conditional logic to tweak the appearance based on its intended use. From there, use some ajax calls to communicate with the server when events such as adding/deleting dependents occur. So basically, what Mike said...
One option would be to create user controls for the "repeated" input fields, such as name and the grid for dependents.
Another option would be to use jQuery templates: http://plugins.jquery.com/project/jquerytemplate
I vote for not using an UpdatePanel for this :)
I want to create something similiar to a facebook wall on my social site. I want to store the posts in an sql database and that should be rather simple. What I am looking for is a good way to display the posts? I guess I don't even really know where to start, as I can only think of using a loop to display asp:textboxes. Which obviously is not correct.
I want there to be multiple posts displayed on the page, which should include:
the user who posted,
the text posted,
the date posted,
and if I want to get crazy...a means of deleting/editing the post.
I really have no idea of how to implement this concept, so any ideas would help greatly.
To get started, view this article from asp.net on the Repeater control, or this great article.
The Repeater control lets you databind to a list of objects, and then define one template for how that object should be displayed. Then, ASP.NET will handle showing it as many times as necessary. You can write the code-behind for dealing with delete and edit as if there were only one instance on the page.
go ahead with jquery, use a lot of ajax. for the mark up, use a repeater control with all clean html mark up (instead of server side controls which would generate a lot of unnecessary mark up quickly creating performance issues)
only populate x number of items on initial load, and then using jquery pull data as required based on user action. you can serve this data via json, decode json on client side using jquery and perform a loop which converts this json into appropriate html and injects it into the correct html element
should be simple ;-)
ASP.NET gives you lots of ways to do this. A Repeater, DataGrid, GridView are the first that come to mind. If you'd rather use ASP.NET MVC, there's always the good old foreach loop.
Additionally, check out ListView too.
I've got a web application that I'm trying to optimize. Some of the controls are hidden in dialog-style DIVs. So, I'd like to have them load in via AJAX only when the user wants to see them. This is fine for controls that are mostly literal-based (various menus and widgets), but when I have what I call "dirty" controls - ones that write extensive information to the ViewState, put tons of CSS or script on the page, require lots of references, etc - these are seemingly impossible to move "out of page", especially considering how ASP.NET will react on postback.
I was considering some kind of step where I override Render, find markers for the bits I want to move out and put AJAX placeholders in there, but not only does the server overhead seem extreme, it also feels like a complete hack. Besides, the key element here is the dialog boxes that contain forms with validation controls on them, and I can't imagine how I would move the controls and their required scripts.
In my fevered imagination, I want to do this:
AJAXifier.AJAXify(ctlEditForm);
Sadly, I know this is a dream.
How close can I really get to a quick-and-easy AJAXification without causing too much load on the server?
Check out the RadAjax control from Telerik - it allows you to avoid using UpdatePanels, and limit the amount of info passed back and forth between server and client by declaring direct relationships between calling controls, and controls that should be "Ajaxified" when the calling controls submit postbacks.
I recommend that you walk over to your local book store this weekend, get a cup of coffee and find jQuery in Action by Manning Press. Go ahead and read the first chapter of this 300 page book in the store, then buy it if it resonates with you.
I think you'll be surprized by how easy jQuery lets you perform what your describing here. From ajax calls to the server in the background, to showing and hiding div tags based on the visitor's actions. The amount of code you have to write is super small.
There are a bunch of good JavaScript libraries, this is just one of them that I like, and it really is easy to get started. Start by including a reference to the current jQuery file with a tag and then write a few lines of code to interact with your page.
Step one is to make your "dirty" pieces self contained user controls
Step two is to embed those controls on your consuming page
Step three is to wrap each user control tag in their own Asp:UpdatePanel
Step four is to ensure your control gets the data it needs by having it read from properties which check against the viewstate for pre-existing values. I know this makes your code rely on ugly global variables but it's a fast way to get this done.
Your mileage may vary.