title: Update individual partial views on load
body: <p>I have an MVC view with several partial views. On load, I would like to change the background color for each partial view based on the value of a boolean property.  This boolean is part of the view model for the partial views.</p>
  
  <p>The problem I'm having is trying to get the jquery selector for the specific partial view's dom element. </p>
  
  <pre><code>&lt;div class="input-group-wrapper"&gt;
   &lt;div class="checkbox"&gt;
                  &lt;label&gt;
                      @Html.CheckBoxFor(m =&gt; m.IsActive, new {id = "activeChanged"} )
                      @Html.LabelFor(m =&gt; m.IsActive, "Active")
                  &lt;/label&gt;
  
              &lt;/div&gt;
    &lt;/div&gt;      
  </code></pre>
  
  <p>Code in the partial view : </p>
  
  <pre><code>&lt;script&gt;
  
   $(document).ready(function () {
  
      setAddressActiveInactive(@Json.Encode(Model.IsActive));
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Function that sets the background color: </p>
  
  <pre><code>function setAddressActiveInactive(isActive) {
  if (!isActive) {
      $("#activeChanged").closest(".input-group-wrapper").attr("style", "background-color: #D3D3D3 !important");
  
  }else {
      $("#activeChanged").closest(".input-group-wrapper").attr("style", "background-color: #f8f8f8 !important");
   }
  }
  </code></pre>
  
  <p>So basically when the root view loads initially, if a partial views "IsActive" property is true, to set it to another color, and visa versa. </p>
  
  <p>Answer was instead of using javascript to set this, to use razor syntax to set the style based on the value of IsActive</p>
  
  <pre><code>@{
  var style = !Model.IsActive ? "background-color:#D3D3D3 !Important" : "";
  }    
  </code></pre>