如何在不导航的情况下使用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
});

Answer 2

您需要退回模型。 您可以保持视图并通过javascript从视图中提取模型，或者您可以拥有JsonResult并仅返回序列化字符串。

从javascript方面，从按钮或您的愿望事件触发。

var params = ["data","data", "data"];

$.ajax({
  type: "POST",
  url: /ProcessLogEntries,
  data: params,
  success: function(data, statusRespoonse, xhr){
   //extract your model from data or return your model via jsonresult by changing the Controller's return type.

    yourModel = data;
   },
  dataType: "json"
});