Question

I am having difficulty rendering a partial view using the MVC3 razor engine.

When I select a ToDate, the jQuery UI datepicker will ajax POST by sending a JSON string as data.

ControllerView.cshtml:

to_date ({
    onSelect: function (selectedDate, inst) {
       // Some code here to construct JSON
       $.ajax ({
           // Appropriate attributes
           url: 'Controller',
           data: '{ FromDate: "' + data.FromDate + '", ToDate: "' + data.ToDate + '" }'
       });
    }
});

<div id="picker">
                <label for="FromDate">From: </label>
                <input type="text" id="FromDate" />
                <label for="ToDate">To: </label>
                <input type="text" id="ToDate" />
</div> <!-- END picker -->
<div id="Day">
    <!-- ****Where partial view should be rendered**** -->
</div>

This will be received by the controller(Controller.cs):

[HttpPost]
public ActionResult Controller (DatePicker Dates)
{
    if (ModelState.IsValid)
    {
        // Save IList returned from query
        IList<Obj> JsonObj = Model.query(Dates);

        return PartialView("_PartialView", JsonObj);
    }
    return View();
 }

What should be my next steps? I created a _PartialView.cshtml file, but I haven’t been able to render the view. Also, is my approach correct if I want the view to be rendered asynchronously?

Thanks for the help!

Answer 1

Simply add a function to run on success of the ajax call:

to_date ({
    onSelect: function (selectedDate, inst) {
       // Some code here to construct JSON
       $.ajax ({
           // Appropriate attributes
           url: 'Controller',
           data: '{ FromDate: "' + data.FromDate + '", 
                    ToDate: "' + data.ToDate + '" }'
           success: function (result) {
               // when the AJAX succeeds replace the Day tag with the new view
               $('#Day').html(result);
           }
       });
    }
});

You should probably also handle when the request errors by assigning a function to error:. See the jQuery.ajax() documentation for more details on both success and error.

A bit of advice – I would highly recommend calling your action result something other than Controller. I’m not sure if you will get the model state for this call since its an AJAX call so you might want to double check that part. I would also recommend you change your action result to take in both values by name. Something like this:

[HttpPost]
public ActionResult RenderDatePartial(Date fromDate, Date toDate)
{
    var dates = new List<Date> { fromDate, toDate };

    // Save IList returned from query
    var jsonObj = Model.query(dates);

    return PartialView("_DatePartial", jsonObj);
}