我有一个.net核心应用程序,该应用程序具有用于更改设置的页面。这里有页面的直观表示:
https://i.imgur.com/R6MyDlo.png
此视图(蓝色)包含许多按钮(黑色),用于更改选项卡以显示不同的设置页面。还有一个局部(红色),其中包含许多其他局部设置。在选项卡之间切换或更新设置时,此部分更新。除非用户单击侧边栏中的保存(绿色),否则设置不会保存到硬件或数据库中。
这些设置来自一个json文件,该文件可能是几百个KB,并作为对象存储在视图模型中。此视图模型在所有部分视图之间共享。当用户更新某些内容时,它将调用ajax函数,将模型作为json发送。我在下面提供了一个更改设置的示例,但是所有示例都遵循类似的模式。
主视图(蓝色):
@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>
示例ajax调用以更新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)
});
}
控制器动作:
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)
};
}
临时视图模型类。这是因为[FromBody]仅接受一个参数,并且更新的模型值未发布到服务器:
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);
}
}
}
当前,尽管模型对于父代始终保持不变。因此,当更新设置时,只有更改的版本才可以更改下一个设置。我需要一种无需刷新页面即可更新父模型的方法。