How to refresh only part of the Index page in MVC

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

though this question has an answer already, I thought I would post an alternative approach which would also work. This approach uses the same action method and only checks if the Request is an Ajax call which then only replaces part of the body. Here is the relevant code only.

//The search form

 @using (Ajax.BeginForm("Index", "Home", new AjaxOptions() 
                                                                { HttpMethod = "GET", UpdateTargetId = "my-posts", 
                                                                    InsertionMode = InsertionMode.Replace 
                                                                }))
                        {
                            <input type="text" name="term" placeholder="Search B.I & G" />
                            <input type="submit" value="" />
                        }

//Portion of the View

<section>
<div id="my-posts">
    @Html.Partial("_Posts", Model.Posts)
</div>

Now here is the Index action method, if the Request is an AjaxRequest, it returns a Partial View which replaces contents of div with id my-posts. If the Request isn't an Ajax request then it loads the whole View.

        public async Task<ActionResult> Index(string term)
    {

        var viewModel = new HomeFeedsViewModel();

        viewModel.Posts = await Task.Run(() =>
                                    db.Posts.Include("Comments")
                                    .Include("By").OrderByDescending(o => o.PostedOn)
                                    .ToList());
        //Return a Partial View which replaces content on the View
        //only if the Request is an Ajax Request
        if (Request.IsAjaxRequest())
        {
            viewModel.Posts = viewModel.Posts
                .Where(a => a.Title.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0
                || a.Message.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0
                );

            return PartialView("_Posts", viewModel.Posts);
        }

        return View(viewModel);
    }

Hope this helps someone.

Answer 2

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.

Answer 3

You will, in fact, need to use AJAX.

The best approach, as I see, is to have a partial view and issue a AJAX Load (jQuery.load in jQuery) to it.