asp.net mvc - How to refresh only part of the Index page in MVC 5?

Question

The Index page contains two partial views. One is for the user to enter the search criteria, the other to show the results. How to update the data in the Results view only ?

I'm using MVC 5 and Razor. I've seen some examples on this, mostly using ajax and jquery. I'm asking what would be the best (prefer easier) solution for this

// INDEX VIEW:

<div id="div_Search"> 
@{Html.RenderPartial("~/Views/Shared/Search.cshtml", ViewBag.Model_Search );}
</div>

<div id="div_Results">
@{Html.RenderPartial("~/Views/Shared/Results.cshtml", ViewBag.Model_Results );}
</div>


// HOME CONTROLLER

public class HomeController: Controller { MainContextDB db = new MainContextDB();

public ActionResult Index()
{
    // Code to initialize ViewBag.Model_Search, etc...
    .... 

    // Code to initialize  ViewBag.Model_Results, etc... (Values empty at startup) 
    ....

    return View();
}


[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GetResults([Bind(Include = "DropOffLoc,DropOffDate,PickUpDate")] Search search)
{

   // Retrieve results using the search parameters, etc...
   ....

   // THIS RETURNS THE VIEW WITH THE DATA, BUT IN A SEPARATE PAGE (AS EXPECTED) 
   return View("~/Views/Shared/Results.cshtml", results);            

   // THIS RETURNS THE VIEW IN THE MAIN PAGE BUT WITH EMPTY DATA (AS EXPECTED) 
   return  RedirectToAction("Index");

   // HOW TO RETURN THE VIEW WITH THE DATA IN THE MAIN PAGE ?
   ??????? 

}

}

// THIS IS THE SEARCH PARTIAL VIEW

@model Models.Results

@using (Html.BeginForm("GetResults", "Home", FormMethod.Post, new { @class = "my-form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="form-group input-group-sm">
        @Html.LabelFor(model => model.DropOffLoc)
        @Html.DropDownListFor(model => model.DropOffLoc, ViewBag.LocationList as SelectList, new { @class = "form-control"  })
        @Html.ValidationMessageFor(model => model.DropOffLoc)
    </div>

    <div class="form-group input-group-sm">
        @Html.LabelFor(model => model.DropOffDate)
        @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
        @Html.ValidationMessageFor(model => model.DropOffDate)
    </div>

        <div class="form-group input-group-sm">
        @Html.LabelFor(model => model.PickUpDate)
        @Html.TextBoxFor(model => model.PickUpDate, new { @class = "form-control datepicker", placeholder = "Enter Pick-up date here..." })
        @Html.ValidationMessageFor(model => model.PickUpDate)
    </div>

    <div style="text-align: center; margin-top: 10px; margin-bottom: 10px;">
        <input type="submit" id="getResults" value="GET RESULTS" class="btn btn-default btn-success" />
    </div>
}

Answer 1

I would put a form in your search partial. Then have some action post that, via JQuery, to your GetResults Action, which should return:

return PartialView("~/Views/Shared/Results.cshtml", results); 

Then, in the success callback of your JQuery post, spit the returned results to your $("#div_Results") like so:

$.ajax({
    url: '/Home/GetResults',
    type: "POST",
    dataType: "html",
    data: $("#FormId").serialize(),
    success: function (data) {
        //Fill div with results
        $("#div_Results").html(data);
    },
    error: function () { alert('error'); }
});

Unless I have a typo or something, that should work. You'll need to replace the form selector with the Id of your form tag.