CCollect various dynamic webcontrols upon user selection

[duftstenen]

Hi everyone,
I’m struggling with a website that gives me a lot of headache at the moment. The thing is that I can’t figure out the right way of doing this, and need a good advice in doing this the proper way.
When the user click a category in a dropdown list the page will post back and then load different dynamic webcontrols. When clicking on a webcontrol (e.g. TextBox), the control will then be created below in a summary list, with exactly the same properties/value etc.
If the user then picks another category, the page should reload with the webcontrols for that category, but the previous selected controls should still be there in some sort of summary list.
So basically it is some kind of “pick a webcontrol and put in the basket/summary list” which will be the issue.
I have been doing some more or less creative solutions, but get into a lot of problem. One solution I was to generate two sets of controls, where the second one will be visible if clicked. A solution where I stored the control which I clicked into a session etc. But it doesn’t seem the right way of doing it.

How would you do it?

Thank you in advanced

Duftstenen

 

[jmeckley]

dynamic controls with webforms is a PITA at best. If was required to use webforms and needed "dynamic" user screens i would approach it like this.

1. create a user control for each scenario with all the proper controls.
2. place an instance of each user control on the webpage, all hidden.
3. when the user selects a scenario display the corresponding user control and keep the rest hidden.

in essesnce the main page is really just a thin shell with a collection of user controls. all the real work is encapsulated within the user control. here is a high level view

<asp:dropdown id="scenario_selector />
<uc:scenario_a />
<uc:scenario_b />
<uc:scenario_c />
<asp:button id="execute"/>

private IScenario[] scenarios;

page_init()
{
   scenarios = new []{
           scenario_a,
           scenario_b,
           scenario_c,
         };
}


page_load()
{
   foreach(var scenario in scenarios)
        scenario.Hide();
}

protected scenario_selector_changed()
{
      var value = scenario_selector.SelectedValue;
      scenarios.Single(s=>s.ShouldDisplay(value)).Display();
}
protected execute_click()
{
      var value = scenario_selector.SelectedValue;
      scenarios.Single(s=>s.ShouldDisplay(value)).DoWork();
}

interace IScenario
{
    bool ShouldDisplay(string option);
    void Display();
    void DoWork();
    void Hide();
}
class scenario_a : UserControl, IScenario
{
}
class scenario_b : UserControl, IScenario
{
}
class scenario_c : UserControl, IScenario
{
}

each scenario will implement IScenario. Hide() could be as simple as Visible = false; and Display() Visible = true; Should Display is the logic required to determine if you should show the control. DoWork is where the bulk of the processing is done. this is what should happen. depending on the scenario.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[duftstenen]

Hi jmeckley,

Thank you for your reply. Im glad im not the only one pulling my hair out of dynamic controls . Thats a good approach loading all the webcontrols from the begining, then the viewstate will be correct etc. This might be the solution.

The only thing im wondering; lets say we have this category dropdown with e.g. 15 categories, and for each category 200 items is generated. Then we need to load all 3000 items into the mainpage, and have a major viewstate maintained by the webserver.

What are your thoughts on that, is it the price to pay when using dynamic controls?

Thank you.

 

[jmeckley]

that's changes things. I wouldn't load that much data into one page. rather than have everything on one page with user controls you could make each workflow it's own page. and have the dropdown list redirect them to another page. after all, whether you're posting back to the same page or redirecting to another, it's still a full request.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[jmeckley]

depending on how far you are into coding you could replace webforms with an MVC framework. then postback/viewstate are a non issue and you get full control over the html and request processing.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[duftstenen]

I actually think I would go for some MVC solution for doing this correct in long terms. Do you have any good tips or idea to approach the above scenario in MVC style? Im harvesting the

http://www.asp.net/learn/mvc/

site at the moment

Let me just clarify, there is two aspect in this project I have.

1) Having the dynamic controls loaded based on which category is selected (We got this solved by loading all of them in the page_init/page_load.

2) It should be possible to click on the control and add it to a summarylist of controls that can be showned. The way I see this can be solved, is to created 2 sets of identical dynamic controls and then enable them one by one when clicking on the dynamic controls in opt. 1. Would this also be the solution a MVC approach?

 

[jmeckley]

with webforms you are dealing with controls, postback and viewstate. these are basically tools to hack together a stateful model in a stateless environment.

with MVC this all goes away. no postback, no viewstate, no webcontrols. you have a view engine to produce html. controllers to load data into the view. a Model which defines how the data looks.

view engines available to mvc frameworks actually harness the power of html and let you control it directly, rather than abstracting it to oblivion.

http is really just streams of text and key/value containers of string/string.

approaching this from an MVC PoV I would have the initial page show just the drop down of scenarios. Each scenario is a separate set of controller(s) and view(s). i could then wire up the UX (user experience) with some ajax via jquery.

depending on the complexity of any given scenario I may require more than 1 controller and/or view.


Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[duftstenen]

Hi jmeckley,

I gave the ASP.NET MVC a shot and found it very good, thanks for the suggestion?. However I got stucked in some scenarios that I hope you can give me some of your expert explanation on.
1.) To support some autopostback functionality I have implemented a “onChange” javascript this.form.submit() on a texbox. This post back to the ActionResult just fine. However I cannot figure out how I find out which textbox that have triggered the form submit?
2.) When I have found out which textbox that have been changed I want to add some text to it, and then load the view again. What is the best approach in this matter? My ActionResult takes a FormCollection as argument. Should I then make a method which split up the FormCollection into my own model and then build it up again with my changed textfield, or are there any easier way of doing this?

Thank you once more. You have been very helpful.
Best regards

 

[jmeckley]

To support some autopostback functionality

your thinking webforms, not http. this will be a difficult thing to break, but you cannot think about postbacks, or control events. just html and http requests.

When I have found out which textbox that have been changed

again a consequence of webforms. with plain ol' html you can have many forms within one page and each form can point to a different url.
I would have each scenario within it's own form and submitted to its own unique controller. that controller has specific logic for that workflow.

i would also incorporate jquery as your client library into the website, this will make javascript much easier to deal with.

Should I then make a method which split up the FormCollection into my own model and then build it up again with my changed textfield, or are there any easier way of doing this?

MS MVC has this feature built in, so you do not have to do the conversions yourself. I cannot remember the attribute to do so. I use Castle.Monorail for my MVC of choice. with monorail it looks like this

class MyController : SmartDisplatchController
{
    public virtual void DoThis(string s, int i)
    {
       //where s and i refer to the input names of querystrings/form elements ect.
    }


    public virtual void DoThat([DataBind("foo"] MyObject obj)
    {
       //where 'foo' is the prefix of input controls and the element'ssuffix maps to the properties of MyObject
    }
}

I'm pretty sure MS MVC has this as well. Also you will want to take a look at [link

http://mvccontrib.codeplex.com/

]MS MVC Contrib[/url]. it picks up with features where ms mvc stops. I wouldn't design a MS MVC project without it.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

 

[duftstenen]

Thanks for your reply. I might still be a little bit stocked in thinking in the old webform-way of doing it. I can see your point having it in different forms for each scenario. Then I’ll won’t be in double which textbox that triggered it. However it will be alot of forms, if we take the 3000 items example from before. But as far as I understand from you, it shouldn't be any concern in MVC, as we dont waste time on viewstating etc. But it wont look good in the client’s browser source?

Im aware of that there is nothing called "autopostback" in MVC, that lays in the webform terminology. However I would still like the functionality of do something with a textbox when the value changes.

Is it correct understood that to achieve some automatic trigger functionality when a textbox value changes, should be done by javascript, e.g. <input type=text name=’txtName1’ “OnChange=javascript: (some java func here)”>. In the old webform days this could be done by <asp:input runat=server autopost=back TextChanged=<asp.net method/>”?

Last example in this round ?. Lets say we have two dynamically made textboxes, called A and B. Whenever the text changes in A it should be copied down to B textbox. Would you do this by javascript, and call something like “form.elements[“B”].value = form.elements[“A”].value” or would you do this by calling the controller method and update the textbox and then return the view again? I think the last thing is the cleanest way of doing it but might be clumsier?

 

[duftstenen]

Just a minor thing to the above. Instead of all that javascript talk and "OnChange", should I then instead have a look at e.g. jquery's "change()" that can do this in a more smarter way? I believe this is also what you wrote regarding making the javascript easier to deal with?

 

[jmeckley]

However I would still like the functionality of do something with a textbox when the value changes. ... Instead of all that javascript talk and "OnChange", should I then instead have a look at e.g. jquery's "change()" that can do this in a more smarter way?

yes, jquery/javascript will give you this functionality.

Lets say we have two dynamically made textboxes, called A and B. Whenever the text changes in A it should be copied down to B textbox. Would you do this by javascript, and call something like "form.elements["B"].value = form.elements["A"].value" or would you do this by calling the controller method and update the textbox and then return the view again?

this ultimately depends on the complexity of operation. if you are simply concatenating & formatting values, I would do this purely using jquery.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190