title: Use Javascript object from C# model to allow conditional display of MVC Razor elements?
body: <p>In my ASP.net MVC App (using Razor views) I have a "ProductDetails" view.<br>
  This retrieves a "Product" model from the database.</p>
  
  <p>The Product object, has a collection of "ProductVariation" (size, price, inStock etc...)</p>
  
  <p>Something like this:</p>
  
  <pre><code>public class Product()
  {
    public int ID { get; set; }
    public str Name { get; set; }
  
    public ICollection&lt;ProductVariation&gt; Variations { get; set; }
  }
  
  public class ProductVariation
  {
    public int VariationID {get;set;}
    public bool ProductID {get;set;}
    public bool InStock {get;set;}
    public double Price {get;set;}
  }
  </code></pre>
  
  <p>(Obviously this is a very cut down model)</p>
  
  <p>On my ProductDetails view, I have a dropdown to be able to select a variation.</p>
  
  <p>What I want to be able to do is show / hide elements based on the selection.</p>
  
  <p>Currently, I've got the price updating etc.. using jQuery.
  I do this by creating a series of  tags with an id such as "1234-price"
  (1234 representing the VariationID)</p>
  
  <p>The value of my select element is the VariationID
  So, i basically use a jQuery selector to get the value of the ID i want to show, and hide all the others.
  This is working fine.</p>
  
  <p>However, if a product is not available (ie InStock is false) I want to hide the "buy" button, and display some out of stock text.</p>
  
  <p>How can I go about doing something like this?</p>
  
  <p>Should I create an array of Javascript "product" objects on the page, from the model returned by my controller?</p>
  
  <p>Is there a better way?</p>