Problem when trying to render a PartialView in ASP MVC 3

Question

I have a problem now with ASP MVC 3 when trying to rend a that is stored in a PartialView after an AJAX Request is done. Here is the code of my two views:

@model ICollection<Foo.ViewModels.OrderSearchViewModel>
@using Foo.Helpers

@{
    ViewBag.Title = "Sales Order Lookup";
}

@using (Ajax.BeginForm(new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "results",
    InsertionMode = InsertionMode.Replace
}))
{   
    @*"Search","OrderSearch",FormMethod.Get*@
    <div id="Criteria" style="width: 800px;margin-left:10%">
        <table id="tblSearchCriteria" class="FunnyRedLine" width="100%">

                <!-- Many boring search fields here -->

                <td style="width: 40%">
                    <input type="submit" value="Search" class="Text" />
                </td> 
            </tr>

        </table>
    </div>

}

@Html.Partial("SearchResults",Model)

This is the partial view

@model ICollection<Foo.ViewModels.OrderSearchViewModel>
@using Foo.Helpers


@if (Model.Count > 0)
{
    <div id="results" style="width: 800px; margin-left:10%">
        <table id="tbl">
            <tr>
                <th>Sod Id</th>
                <th>Sales Ref</th>
                <th>SOP Ref</th>
                <th>Order Date</th>
                <th>Value</th>
                <th>Status</th>
                <th>Del Date</th>
            </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td width="30" align="center">@Html.DisplayFor(modelItem => item.Id)</td>
                <td width="30" align="center">@Html.DisplayFor(modelItem => item.SalesPersonRef)</td>
                <td width="200" align="center">@Html.DisplayFor(modelItem => item.SOPRef)</td>
                <td width="100" align="left">@Html.FormatDate(item.OrderDate)</td>
                <td width="100" align="right">@Html.FormatNumber(item.Value,"C2")</td>
                <td width="300" align="left">@Html.DisplayFor(modelItem => item.Status)</td>
                <td width="100" align="left">@Html.FormatDate(item.DelDate)</td>
            </tr>
        }
        </table>
    </div>
}

And this is my controller

public class OrderSearchController : Controller
    {
        //
        // GET: /OrderSearch/

    [Ajax(false)]
    public ActionResult Index()
    {
        var viewModel = new List<OrderSearchViewModel>();

        ViewBag.SalesPeople = GetAllSalesPeople()
        ViewBag.OrderTypes = GetAllOrderTypes()

        return View(viewModel);
    }

    [Ajax(true)]
    public ActionResult Index(string id, string startDate, string endDate, string postCode, string salesPersonId, string salesPersonRef,
        string orderTypeId, string serialNo, string customerPO)
    {
            var service = new eSodSrv();
            var viewModel = service.GetHeaders(id.ToInt32(), salesPersonId.ToInt32(), orderTypeId.ToInt32(), startDate.ToDate(), endDate.ToDate(), postCode, customerPO, serialNo, salesPersonRef);
            return PartialView("SearchResults",viewModel);
    }
}

The AJAX request is working, it is entering the correct method (Ajax is a custom attribute that checks Request.IsAjaxRequest()) and it is returning data, so why is the view not rendered?

Answer 1

The partial view is not appearing, because your target div is not being rendered. Instead of using @Html.Partial() in your main view, insert the following:

<div id="results" />

This will create the target, where your partial will be inserted.