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

Answer 1

You will need to return your model. You can keep your view and extract via javascript the model from the view, or you can have a JsonResult and return only the serialized string.

From javascript side, trigger this from a button or the event of your wish.

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

Answer 2

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