title: How do we set the value of an HTML element using Jquery and ASP.NET MVC 4 complex model data
body: <p>In one of my ASP.NET MVC 4 view, I am using a Model's data to set the values of different HTML elements. I can use this model in the view to display the values such as:</p>
  
  <pre><code>&lt;div&gt;@Model.Category.Name&lt;/div&gt; etc...
  </code></pre>
  
  <p>But one of the div tag <code>&lt;div id="DivTotalCost"&gt;&lt;/div&gt;</code> needs to display the total cost of all the products in all the categories. So at the end of the view I have the following script code to set the value of this DivTotalCost tag. But the following code does not set this value. I have put an alert statement to test the value and the alert displays: </p>
  
  <pre><code>function(){
    return total;
  }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>@model MyMVC_app.Models.ProductDetails
  
  &lt;div&gt;@Model.Category.Name&lt;/div&gt; etc...
  &lt;div id="DivTotalCost"&gt;&lt;/div&gt;
  
  @section scripts{
      @Scripts.Render("~/bundles/jqueryval")
      @Scripts.Render("~/bundles/jqueryui")
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              var TotalCost = function () {
                  @if(Model.ProductCategoryList != null)
                  {
                      var total = "";
  
                      foreach(var item in Model.ProductCategoryList)
                      {
                          foreach(var product in @item.products)
                          {
                              total += product.price;
                          }
                      }
                  }
                  return total;
              }
              alert(TotalCost);
              $('#DivTotalCost').text(TotalCost);
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>Please help.</p>
  
  <p>Thanks..Nam</p>