How do I use a Controller Action to refresh the model without navigation?

Question

I have a MVC 5 website that displays log file entries in a grid and provides a search capability. I have both the search criteria and the grid.mvc grid on the Index page. When the user enters the search criteria and clicks the submit button I want the ProcessLogEntries method (below) to update the Model and refresh the Index.cshtml page - not navigate to a non-existent ProcessLogEntries page!

Basically, I want this application to behave like an Single Page Application...

How do I set up the HomeController.ProcessLogEntries() method to accomplish this?

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

If you want to update a page without reloading you'll need AJAX. Here's an outline to get started.

Partial View

Create a main view that will act as a "frame". An empty div will act as your placeholder for your grid.

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

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

Now create a partial view to hold your grid

_GridPartial

@model LogsResearchViewModel

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

If you want you can embed this so the first time Main view loads you will have a populated grid.

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

With the supporting action

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

Now setup the AJAX to insert into the placeholder.

<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>

And the action returns a partial view

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

After triggering the post the partial result replaces the grid div content.

JSON

If your grid supports JSON just return the model

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

Then handle in javascript

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