Обновление родительской модели при вызове ajax с частичным представлением - PullRequest
0 голосов
/ 29 октября 2019

У меня есть ядро ​​приложения .net, на котором есть страница для изменения настроек. Здесь есть визуальное представление страницы:

https://i.imgur.com/R6MyDlo.png

Этот вид (синий) содержит ряд кнопок (черного цвета) для смены вкладок для отображения страниц с различными настройками. Существует также частичный (красный), который содержит ряд других частичных для настроек. Это частичное обновление при переключении между вкладками или обновлении настроек. Настройки не сохраняются на аппаратном обеспечении или в базе данных до тех пор, пока пользователь не нажмет кнопку «Сохранить» на боковой панели (зеленый).

Настройки получены из файла json, который может составлять несколько 100 килобайт и хранятся в виде объекта в модели представления. ,Эта модель представления является общей для всех частичных представлений. Когда пользователь что-то обновляет, он вызывает функцию 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 для обновления пользовательского интерфейса:

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);
        }
    }
}

В настоящее время модель остается неизменной на протяжении всего периода. для родителя. Таким образом, когда параметр обновляется, это только измененная версия до следующего изменения параметра. Мне также нужен способ обновить родительскую модель без обновления страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...