title: dynamic form building with knockoutjs
body: <p>I need to build a dynamic form from database. I have following Entity to define form fields on the fly:</p>
  
  <pre><code>    public class FormField {
          public int ID { get; set; }
          public string Name { get; set; }
          public string Type { get; set; }    // Possible values are: 'Radio','Combo','Text'. A dropdown will be created for a Combo type of element, a radio set for Radio type of element and a text input for Text type of element.
          public string Options { get; set; } // Only relevant in case of Radio/Combo type
          public string Default { get; set; } // Default value in case of Type 'Text' and selected value in case of Type 'Radio/Combo'
          public string Blankout { get; set; }// An expression to define when this field should be hidden 
      }
  
      /* A sample JSON array (from the DB) to build the form would be:
         [
          { Name:"Gender", Type:"radio", Options:["Male","Female","Unknown"], Default:"Male", Blankout:"Never" },
          { Name:"Age", Type:"text", Options:"None", Default:15, Blankout:"Never" },
          { Name:"Neighbourhood", Type:"Combo", Options:["Eastern","Western","Northern","Southern","Central"], Default:"Central", Blankout:"if (Age &lt; 40 or Voted='Obama')" },
          { Name:"Voted", Type:"Combo", Options:["Obama","Romney","Harry Potter"], Default:"Harry Potter", Blankout:"if ((Gender='Female' and Age &lt; 15) or Neighbourhood='Eastern'" }
         ]
      */
  </code></pre>
  
  <p>I can build a dynamic form from the 'FormField' records in DB, BUT the problem is i need to track the changes in values of any form field, and when a change in value happens i need to send all the form data to server (asynchronously) in order to evaluate the 'Blankout' formula on Server. If i do this change tracking thing without KnockoutJS its not responsive and becomes very very complex.
  I have gone through several tutorials of KnockoutJS, but could not figure out how to organize my ViewModel for this particular problem.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I have tried to post this form data to controller by using following code:</p>
  
  <pre><code>    $.ajax({
              type: "POST",
              url: "/MyController/GetBlankoutElements",
              contentType: 'application/json',
              dataType: 'json',
              data: JSON.stringify(ko.toJSON(self)),
              success: function(result) {
                  alert(result);
                  //self.HiddenElements(result.split(','));
              }
      });
  </code></pre>
  
  <p>In my controller i have tried following code:</p>
  
  <pre><code>    [HttpPost]
      public ActionResult GetBlankoutElements(List&lt;MyFieldViewModel&gt; Fields)
      {
          return Json(Fields); // List, Fields is null here
      }
  </code></pre>
  
  <p>Her is the what the MyFieldViewModel class looks like:</p>
  
  <pre><code>    public class MyFieldViewModel 
      {
          public string Title { get; set; }
          public string Name { get; set; }
          public string Type { get; set; }
          public string Default { get; set; }
          public string[] Options { get; set; }
      }
  </code></pre>
  
  <p>I have tried tips described at <a href="https://stackoverflow.com/questions/4789481/post-an-array-of-objects-via-json-to-asp-net-mvc3">Post an Array of Objects via JSON to ASP.Net MVC3</a></p>
  
  <p>Following is the Json data that prints out when i execute <em>alert(ko.toJSON(self))</em></p>
  
  <pre><code>    {"Fields":
          [{"Title":"CCType","Name":"CCType","Type":"Radio","Default":"Enterprise","Options":["Enterprise","Express","CVP","PCCE"]},{"Title":"Industry","Name":"Industry","Type":"Combo","Default":"Banks","Options":["Banks","ServiceProvider","Outsourcer","Airlines","Utilities","Government","Retail"]},{"Title":"Customer Lab","Name":"CustomerLab","Type":"Combo","Default":"0","Options":["0","1"]},{"Title":"No of Agents","Name":"Agents","Type":"Text","Default":"if(c.CCType==\"CVP\") then 10 else 25","Options":[]},{"Title":"ExpLicType","Name":"ExpLicType","Type":"Radio","Default":"if(c.CCType==\"Express\") then \"Enhanced\" else \"None\"","Options":["None","Premium","Standard","Enhanced"]},{"Title":"Multimedia","Name":"Multimedia","Type":"Combo","Default":"WIM","Options":["None","EIM","WIM","EIM&amp;WIM","BSMediaRouting","MCAL"]}],
       "HiddenElements":[]
      }
  </code></pre>
  
  <p>What i need is just the field name and its selected value by the user, and i am confused even if i get this json data mapped to my <em>MyFieldViewModel</em> class, still how would i get the selected VALUES ?</p>
  
  <p><strong>Update 2</strong> <em>(JSON data Mapping worked)</em></p>
  
  <p>When i changed </p>
  
  <pre><code>    data: JSON.stringify(ko.toJSON(self))
  </code></pre>
  
  <p>with
          data: ko.toJSON(self)</p>
  
  <p>Mapping worked perfectly on my controller, as you can see in the following screenshot:
  <img src="https://i.stack.imgur.com/8uHVq.png" alt="Debug screenshot of Mapped list object from post json data"></p>
  
  <p>Now, the problem remains, the whole point of posting form was to update server with user's input on the form i.e. values against every form field element. 
  <strong>How do i post the current selected/typed values of form fields ?</strong>
  For example, in above screenshot, i can see the Default but not the current selected value. </p>