CODEWITHSUNDEEP
javascriptasp.net-mvcasp.net-mvc-3webforms
dferraro
dferraro

Reputation: 6437

how to generate a UI fully dynamic? either MVC or WebForms

I need to create a UI fully dynamically. The requirement is that there is about 100 controls on the page (possibly more), and as you fill the form out, the form itself changes. For example, when you fill out your age, if the age is over 30 but under 50, the next 3 questions will be different - if you are over 50, there will only be 2 questions and they will also be completely different. The page will continue to flow like this dynamically and the controls that are relevant to only you should should only appear with the questions as you answer them - obviously - as they might not be relevant to you and so we must keep them hidden until the last moment.

I can use either ASP.NET WebForms or MVC. I realize that MVC does not have the concept of a server control and this would need to be done using JS. I an open to using either technology I should note however, that this would be the first time developing an MVC application. I also have access to whichever 3rd party UI API that I'd like - Telerik, Component Art, Dev Express - I just need to get this working and have it be pretty.

What kind of approach would you do for generating this UI dynamically? Is there a design pattern / approach for this already that I may look at?

Upvotes: 0

Views: 247

Answers (2)

I29
I29

Reputation: 686

Your index.html can have the following structure,

<html>
  <head.......
  ............
  ............
  </head>
  <body>
    <form>
      <div id='staticFields1'>.....</div>
      <div id='staticFields2'>.....</div>
      <div id='dynamicFields21' display='none'>.....</div>
      <div id='dynamicFields22' display='none'>.....</div>
      <div id='staticFields3'>.....</div>
    </form>
  </body>
</html>

so based on your logic make display='block'

Upvotes: 1

I29
I29

Reputation: 686

what you can do is, create each of the set of dynamic elements and put them in divs. depending on the answer now you can inject these divs in, or have then already lined up but hidden and make them visible at the correct answer. All of this logic will go into your controller and you just have to have a starting view, with an element which has ID.

document.getElementById(elementID)

if ((correctAnswer)&&(element.style.display=='none'))
   element.style.display="block"

Upvotes: 1

Related Questions