why my <div> wont update?

Question

the application was originally intended to update "div-list" block in search and when passed valid product codes to search the LINQ returned a valid product but it did not load the partial page _ProductCategoryList. To test i have added <p>updated</p> in to js function loadtodiv() but it did not display that message either.Why this partial page or this html message wont get displayed on that div?

in my MVC4 razor app i have the an index page with the following razor syntax:

@using(Ajax.BeginForm("GetCategory", "Home",
new AjaxOptions { 
    HttpMethod="GET", 
    UpdateTargetId="div-list",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "loadtodiv"
}))
{
    <input type="text" class="form-control" name="Code" value="" style="width:500px;" />
    <input type="Submit" class="btn btn-default" value="Search" id="search-btn"/>
}

<br />

<script type="text/javascript">
    function loadtodiv() {
        $('#div-list').html('<p>updated</p>');
    }
</script>


<div class="jumbotron">
    <h2>Index</h2>        


</div>
<div id="div-list">

<p>this is empty</p>    
</div>

the controller to the index page is :

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace eComm1.Controllers
    {
        public class HomeController : Controller
        {
            TUDBEntities _db = new TUDBEntities();

            //
            // GET: /Home/

            public ActionResult Index()
            {
                return View();
            }

            public ActionResult GetCategory(string Code)
            {
                var categories = _db.mt_ProductCategories.Where(pc => pc.CatCode == Code).FirstOrDefault();
                return PartialView("_ProductCategoryList", categories);
            }
    }
}

and my partial view _ProductCategoryList.cshtml is :

@model IEnumerable<eComm1.Models.ProductCategory>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CategoryCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Url)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Url)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

Answer 1

Your query in the GetCategory() method returns a single ProductCategory (the use of .FirstOrDefault() which you then pass to a partial view which expects IEnumerable<ProductCategory> resulting in an exception. And the OnSuccess function is never run because there is no success.

Change you query to return a collection

public ActionResult GetCategory(string Code)
{
    var categories = _db.mt_ProductCategories.Where(pc => pc.CatCode == Code);
    return PartialView("_ProductCategoryList", categories);
}