C# PartialView returns new page

Question

Got a problem here... When I submit my Ajax partial form (on the Index page), I am getting the _IndexPartial page returned as a new page (with no layout, of course).

Here's the code for the Index page:

@model List<s84.Domain.s84_CustomerProduct>

@{
    ViewBag.Title = "Customer/Product Order";
    Layout = "~/Views/Shared/_NewLayout.cshtml";
}

@using (Ajax.BeginForm("Index", "CustomerProduct", new AjaxOptions { UpdateTargetId = "data-tbl", HttpMethod = "Post" }))
{
    <div class="search">
        @Html.DropDownList("CustomerID",
            new SelectList(s84.Domain.s84_Customer.listItems(), "CustomerID", "CustomerName"))
        <input type="submit" value="Search" />
    </div><br/><br/>
    <div id="data-tbl">
        @Html.Partial("_IndexPartial")
    </div>
}

Here's the code for the _IndexPartial page:

@model List<s84.Domain.s84_CustomerProduct>

<table class="table">
    <thead>
        <tr>
            <td>&nbsp;</td>
            <td>Product</td>
            <td>Order</td>
            <td>Required Days</td>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                        @Html.ActionLink("Edit", "Edit", new { id = Model[i].CustomerProductID }, null)
                        <text>/</text>
                        @Html.ActionLink("Del", "Delete", new { id = Model[i].CustomerProductID }, null)
                </td>
                <td>@Model[i].s84_Product.ProductName</td>
                <td>@Model[i].ProductOrder</td>
                <td>@Model[i].RequiredDays</td>
            </tr>
        }
    </tbody>
</table>

Here's the Controller code:

    [HttpGet]
    public ActionResult Index()
    {
        List<s84_CustomerProduct> lst = s84_CustomerProduct.listItemsByCustomer();

        return View(lst);
    }

    [HttpPost]
    public ActionResult Index(int CustomerID)
    {
        List<s84_CustomerProduct> prod = s84_CustomerProduct.listItemsByCustomer(CustomerID);

        return PartialView("_IndexPartial", prod);
    }

If I change the return PartialView line in the Controller Post method to this (below) instead, everything works:

return PartialView(prod);

My question: What changed? I used to be able to return PartialView(ViewName, Model) but now it only works when I return PartialView(Model) . Why is this happening?

EDIT: I just realized I am also getting a query string when the Post call returns the PartialView. Every time I post the form, I am redirected to localhost/CustomerProduct?Length=15 . The Length=15 is always there, no matter which customer I chose from the dropdown.

Answer 1

I just figured out what I had changed. I had stopped including the jQuery validation script files in my jQuery bundle. I added these JS files back into my bundle...

• jquery.validate.js
• jquery.unobtrusive-ajax.js
• jquery.validate.unobtrusive.js

Apparently Razor or some part of MVC requires those files. Here's the code which solved the problem:

bundles.Add(new ScriptBundle("~/Content/jquery").Include(
    "~/Scripts/jquery-2.0.3.js",
    "~/Scripts/jquery.validate.js",
    "~/Scripts/jquery.unobtrusive-ajax.js",
    "~/Scripts/jquery.validate.unobtrusive.js"));