0

MVC Core，NET 5，而不是剃刀页面。

在一个视图中，我有三个选择组件（引导选择）。我通过 ViewModel 填充它们。

“获取请求 -> 控制器 -> 返回视图（viewModel）；”

我想要什么......当我在任何选择组件中更改值时，我向同一个控制器（其他方法）发出一个发布请求（ajax）并返回带有重新填充数据的视图。

"'发布请求 -> 控制器 -> 返回视图(changedModel);"

据我了解，当我执行 ajax 请求时，我应该处理它导致成功和其他情况。

我应该怎么做才能用新数据重新加载页面？

是否有可能通过这种方法实现这一目标？

4

3 回答 3

1

基于cwalvoort和mj1313的建议

我做了：

  • 使用局部渲染主页。ViewModel 作为参数传递给局部
  • 在主页上，我使用 JS 将 eventListners 添加到控件中。
  • 当控制发生变化时 - 对后端的 ajax 请求发生 Controller/GetPartialView
  • ajax 的结果替换部分部分中的 html
  • 以编程方式显示需要的组件，重新添加 eventListners

PS 真的需要学习 Blazor 或者 UI Framework :)

代码示例：

// JS
document.addEventListener("DOMContentLoaded", function (event) {

BindSelectActions();
});

function BindSelectActions() {

$('#selectGroups').on('hidden.bs.select', DoPartialUpdate);
$('#selectCompanies').on('hidden.bs.select', DoPartialUpdate);
$('#selectPeriods').on('hidden.bs.select', DoPartialUpdate);
}

function DoPartialUpdate(e, clickedIndex, isSelected, previousValue) {

// ToDo: Implement common script with "CallBackend" function

$.ajax({
    type: "POST",
    url: 'https://localhost:44352/TestController/TestGetPartial',
    // no data its a stub at the moment
    // data: $('#form').serialize(),
    success: function (data, textStatus) {

        $("#testControls").html(data);
        $('#selectGroups').selectpicker('show');
        $('#selectCompanies').selectpicker('show');
        $('#selectPeriods').selectpicker('show');

        BindSelectActions();
    }
});
}


// Controllers
[HttpGet]
[ResponseCache(NoStore = true, Location = ResponseCacheLocation.None)]
public async Task<IActionResult> Main()
{
    // ViewModel = _helper -> _mediator -> query -> context
    return await Task.Run(() => View(new TestViewModel()));
}

[HttpPost]
[ResponseCache(NoStore = true, Location = ResponseCacheLocation.None)]
public IActionResult TestGetPartial(TestViewModel model)
{
    // ViewModel = _helper -> _mediator -> query -> context
    var result = new TestViewModel();
    result.IsPageReload = "yes";
    result.TestCollection = new string[] { "A", "B", "C" };
    result.Companies = new List<SelectListItem> { new SelectListItem { Value = "999", 
Text = "Test" } };

// ModelState.Clear();
return PartialView("_TestPartial", result);
}

// Main and partial views
@model TestViewModel

@{
    ViewData["Title"] = "Test";
}

<div id="testControls">

    @await Html.PartialAsync("_TestPartial", Model)

</div>

@section Scripts {

    <script type="text/javascript" src="~/js/test.js" asp-append-version="true"> 
</script>
}

@model TestViewModel

<form>
<div class="d-flex flex-row justify-content-between mt-4">

    <div><select id="selectGroups" asp-for="Groups" asp-items="Model.Groups" 
class="selectpicker" data-live-search="true" data-style="btn-outline-dark" 
title="Group"></select></div>
    <div><select id="selectCompanies" asp-for="Companies" asp-items="Model.Companies" 
class="selectpicker" data-live-search="true" data-style="btn-outline-dark" 
title="Company"></select></div>
    <div><select id="selectPeriods" asp-for="Periods" asp-items="Model.Periods" 
class="selectpicker" data-live-search="true" data-style="btn-outline-dark" 
title="Period"></select></div>

    <div><button type="button" class="btn btn-outline-dark">Import</button></div>
</div>
</form>

<div>
@{
    if (null != Model.TestCollection)
    {
        foreach (var item in Model.TestCollection)
        {
            <p>@item</p>
            <br>
        }
    }
}
</div>
于 2021-03-25T07:21:25.253 回答
1

我应该怎么做才能用新数据重新加载页面？

如果 post 动作返回与 get 动作相同的视图，并且您想重新加载整个页面，我认为没有必要使用 ajax。您可以通过表单提交重定向到发布操作。如果 post 操作返回的视图是您想要呈现到当前视图的局部视图，您可以像在 @cwalvoort 答案中那样使用它。

于 2021-03-25T06:14:48.767 回答
1

是的，这是可能的，您不需要重新加载页面，只需将返回的 html 附加到您想要的任何位置。

$.ajax({
    type: "POST",
    url: {your_url},
    dataType: "html",
    success: function (html) {
        $("#someDiv").html(html);
    }
});
于 2021-03-24T20:38:33.997 回答