从局部视图更新ajax调用上的父模型

时间:2019-10-29 15:00:40

标签: ajax asp.net-core partial-views

我有一个.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);
        }
    }
}

当前,尽管模型对于父代始终保持不变。因此,当更新设置时,只有更改的版本才可以更改下一个设置。我需要一种无需刷新页面即可更新父模型的方法。

0 个答案:

没有答案