Refresh model after post-request in ASP.MVC

Question

I'm developping a webApp with MVC. I have a view with cirkles displaying a value and a slider, when you slide the cirkles need to display the new value. I send the new value with a POST from my AJAX call to the controller, which does a minor calculation with the value and give it back to the view so the cirkles can display the updated value. However my view still keeps using the startvalue.

   @model UGT.UI.Web.MVC.Models.BelastingViewModel 
<script language="JavaScript">
var config1 = liquidFillGaugeDefaultSettings();

@{
        teller = 1;
        string naam_var = null;

        foreach (KeyValuePair<UGT.BL.Domain.BegrotingPackage.Categorie, double> cat in Model.Belasting)
        {
            naam = "fillgauge" + teller;
            naam_var = "gauge" + teller;
            @: var @naam_var = loadLiquidFillGauge("@naam", "@Html.DisplayFor(modelItem => cat.Value)", config1);

                teller++;
        }
    }

function toonCirkels() {

    @{

        teller = 1;
        naam = "fillgauge" + teller;
        string naam_var2 = null;
        foreach (KeyValuePair<UGT.BL.Domain.BegrotingPackage.Categorie, double> cat in Model.Belasting)
        {
            naam_var2 = "gauge" + teller;
            // @: gauge1.update("@Html.DisplayFor(modelItem => cat.Value)");
                 // @: var @naam_var = loadLiquidFillGauge("@naam", "@Html.DisplayFor(modelItem => cat.Value)", config1);
                   // @: @naam_var2.update("@Html.DisplayFor(modelItem => cat.Value)");
             teller++;
         }

        //@:gauge1.update("500");

     }
}

---

public class BelastingsController : Controller
  {
    private BegrotingsManager begrotingsManager = new BegrotingsManager();
    private int gemeenteId = 54;
    private double loon = 200;
    private BelastingViewModel belastingen = new BelastingViewModel();

    // GET: Belastings
    public ActionResult Index()
    {
            var belasting = begrotingsManager.GetBelastingGebruiker(this.loon, gemeenteId);
      belastingen.Belasting = belasting;
      UpdateModel(belastingen);
      return View(belastingen);

    }

    [HttpPost]
    public ActionResult Index(String loon)
    {
      this.loon = Double.Parse(loon);
      var belasting = begrotingsManager.GetBelastingGebruiker(this.loon, gemeenteId);
            belastingen.Belasting = belasting;
            UpdateModel(belastingen);
            return new HttpStatusCodeResult(HttpStatusCode.OK);
           // return RedirectToAction("Index");
    }

---

namespace UGT.UI.Web.MVC.Models
{
  public class BelastingViewModel
  {
    public IDictionary<Categorie, double> Belasting { get; set; }
  }


}

---

     d3.selectAll('.range').on('change', function () {
        this.value = parseInt(this.value);
        if (this.value < 0) this.value = 0;
        else if (this.value > 5000) this.value = 5000;


        var loon = this.value;
        var loonString = "€" + loon;
        d3.select('.range_value').html(loonString);

        sendLoon(loon, loonString);
    });
}

function sendLoon(loon, loonString) {
    $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "/Belastings",
        type: "POST",
        data: JSON.stringify({ "loon": loon }),
        success: function () {
          // window.location.reload();
            toonCirkels();
        },
        error: function () { }

    });
}

Answer 1

The success of your Ajax call calls 'toonCirkels' which only contains razor generated code which is filled on page load. The content of this method never changes as it contains ONLY razor generated code and thus will always have the same logic with the same values.