Updating parent model on ajax call from partial view - ajax

Question

I have a .net core application that has a page for changing settings. There is a visual representation of the page here:
https://i.imgur.com/R6MyDlo.png
This view (blue) contains a number of buttons (black) for changing tabs to display different settings pages. There is also a partial (red) that contains a number of other partials for the settings. This partial updates when switching between tabs or updating settings. Settings are not saved to the hardware or database until the user clicks save in the sidebar (green).
The settings come from a json file that can be several 100 kilobytes and are stored as an object in the view model. This view model is shared between all the partial views. When the user updates something it calls an ajax function sending the model as json. I have included an example for changing settings below but all follow a similar pattern.
Main view (blue):
#model Project.ViewModels.TestViewModel
<div class="row" id="body-row">
#Html.Partial("_SidebarPartial") // green
<div class="col">
<div class="row top-margin">
<div class="col-sm-12 col-md-12 col-lg-9">
<button id="generalButton" class="btn btn-primary mr-2 mb-2" onclick="LoadGeneral()">General</button>
#for (int i = 0; i < Model.Config.Machines.Count; i++)
{
<button id="#("Machine" + (i + 1))" class="btn btn-primary mr-2 mb-2" onclick="LoadMachine(#i)">
#Model.Config.Machines[i].Name
</button>
}
</div>
<div id="TestConfig" class="col-sm-12 col-md-6 col-lg-9">
#Html.Partial("Test/_ConfigPartial", Model) // red
</div>
</div>
</div>
</div>
Sample ajax call to update UI:
function UpdateMode(i, j) {
var viewModel = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
data = JSON.stringify({ mode: i, selectedProgram: j, model: viewModel })
$.ajax({
type: "POST",
data: data,
url: "https://localhost:44365/Test/UpdateMode",
contentType: "application/json"
}).done(function (res) {
$("#TestConfig").html(res)
});
}
Controller actions:
public IActionResult Config()
{
Model = new TestViewModel();
HttpContext.Session.SetObjectAsJson("Model", Model);
return View(HttpContext.Session.GetObjectFromJson<MachineViewModel>("Model"));
}
[HttpPost]
public PartialViewResult UpdateMode([FromBody]DtoTestModel model)
{
model.Model.Config.Programs[model.SelectedProgram].Mode = (ModeType) model.Mode;
HttpContext.Session.SetObjectAsJson("Model", model.Model);
return new PartialViewResult
{
ViewName = "~/Views/Shared/_GeneralPartial.cshtml",
ViewData = new ViewDataDictionary<TestViewModel>(ViewData, model.Model)
};
}
Temporary view model class. This is because [FromBody] only accepts one parameter and the updated model values are not posted to the server:
public class DtoTestModel
{
public TestViewModel Model { get; set; }
public int SelectedProgram { get; set; }
}
ViewModel:
public class TestViewModel
{
public Config TestConfig { get; set; }
public int Mode { get; set; }
public TestViewModel()
{
using (var reader = File.OpenText(#"temp\Config.txt"))
{
string json = reader.ReadToEnd();
TestConfig = JsonConvert.DeserializeObject<Config>(json);
}
}
}
Currently though the model stays the same throughout for the parent. So when a setting is updated it is only the changed version until the next setting change. I need a way to also update the parent model without refreshing the page.