如何在不导航的情况下使用Controller Action刷新模型？

Question

我有一个MVC 5网站,它在网格中显示日志文件条目并提供搜索功能.我在索引页面上有搜索条件和grid.mvc网格.当用户输入搜索条件并单击提交按钮时,我希望ProcessLogEntries方法(如下所示)更新模型并刷新Index.cshtml页面 - 而不是导航到不存在的ProcessLogEntries页面!

基本上,我希望这个应用程序的行为类似于单页面应用程序......

如何设置HomeController.ProcessLogEntries()方法来完成此任务？

public class HomeController : Controller
{
    public LogsResearchViewModel ViewModel  { get; set; }

    public HomeController()
    {
        ViewModel = new LogsResearchViewModel();
    }

    public ActionResult Index()
    {
        ViewBag.Message = "";
        return View(ViewModel);
    }

    [HttpPost]
    public ActionResult ProcessLogEntries(string txtSearchFor, string txtDateStart, string txtDateStop, string txtSource)
    {
        ViewBag.Message = "";

        string searchFor = txtSearchFor.ToString();
        DateTime start = DateTime.Parse(txtDateStart.ToString());
        DateTime stop = DateTime.Parse(txtDateStop.ToString());
        string source = txtSource.ToString();

        ViewModel.GetProcessLogEntries(searchFor, start, stop);
        ViewModel.GetErrorLogEntries(source, searchFor, start, stop);

        return View(ViewModel);
    }
}

Answer 1

如果您想在不重新加载的情况下更新页面,则需要使用AJAX.这是一个入门大纲.

局部视图

创建一个充当"框架"的主视图.空div将作为网格的占位符.

<h2>Main View</h2>
<div id="grid"><!-- grid paceholder --></div>

<script>
    // ajax script here
</script>

现在创建一个部分视图来保存网格

_GridPartial

@model LogsResearchViewModel

@Html.Grid(Model)
<button id="btnTrigger">Process</button>

如果你想要你可以嵌入这个,所以第一次加载主视图你将有一个填充网格.

<h2>Main View</h2>
<div id="grid">@{Html.RenderAction("LoadGrid")}</div>

随着支持行动

public ActionResult LoadGrid()
{
    var model = new LogsResearchViewModel() { ... };
    return PartialView("_GridPartial", model);
}

现在设置AJAX以插入占位符.

<script>
    $("#grid").on("click", "#btnTrigger", function(e) {
        $.ajax({
            url: "/ProcessLogEntries",
            type: "post",
            data: {
                txtSearchFor: "// txtSearch.val()",
                txtDateStart: "",
                txtDateStop: "",
                txtSource: ""
            }
        })
        .done(function(result) {
            $("#grid").html(result);
        });
     });
</script>

并且该操作返回局部视图

[HttpPost]
public ActionResult ProcessLogEntries(
    string txtSearchFor, string txtDateStart,
    string txtDateStop, string txtSource)
{
    var model = new LogsResearchViewModel();
    // ...
    return PartialView("_GridPartial", model);
}

触发帖子后,部分结果将替换网格div内容.

JSON

如果您的网格支持JSON,则返回模型

 [HttpPost]
 public ActionResult ProcessLogEntries(...)
 {
     var model = new LogsResearchViewModel();
     // ...
     return Json(model);
 }

然后在javascript中处理

...
.done(function(jsonResult) {
    console.log(jsonResult);  // should match LogsResearchViewModel
    loadGrid(jsonResult);     // pass off to grid's javascript
});