title: Updating Razor LabelFor() from Javascript
body: <p>I'm using ASP.NET MVC with Razor. I have an AJAX function that obtains the city and state when you type in the zip code. I then update a list box with city/cities and update a LabelFor with the State as shown in image:</p>
  
  <p><img src="https://i.postimg.cc/x1qxYF7C/stack1.png" alt="image1"></p>
  
  <p>The JSON function:</p>
  
  <p><img src="https://i.postimg.cc/HnXJQHVx/stack2.png" alt="image2"></p>
  
  <p>Razor Code:</p>
  
  <pre><code>@Html.DropDownListFor(model =&gt; model.City, new SelectList(Enumerable.Empty&lt;SelectListItem&gt;()), "Select City", new { @class = "drop-down-list", id = "city_drop_down_id", style = "font-size:100%;" })
  @Html.LabelFor(model =&gt; model.State, new { id="state_label_id", style = "font-size:100%; font-weight:normal; color:black;" }) 
  </code></pre>
  
  <p>The controls are successfully updated by the Javascript once the Ajax function retrieves the data. 
  Now if I click Next button, a form post is made and I should be getting the values in the controls into my Controller. The issue is, that I'm getting the City from the drop down but not the State:</p>
  
  <p><img src="https://i.postimg.cc/X7NyMmJy/stack3.png" alt="image3"></p>
  
  <p>The full image is not clear, so here is a close up:</p>
  
  <p><img src="https://i.postimg.cc/x8ZQ4X85/stack3.png" alt="image4"></p>
  
  <p>I used DisplayFor instead of LabelFor and it still won't work. I even used .html() in the javascript, instead of .text() but still no luck:</p>
  
  <pre><code>$("#state_label_id").html(this.State);
  </code></pre>
  
  <p>(Please ignore user name, password, email address as I'm not passing any values to those, so the null is expected)</p>