Load a Partial View inside the Parent View on ActionLink Click

   In Parent view i.e Index.cshtml

@* @{Html.RenderAction("FirstTenCustomers", "Category");}*@ 

    @*this also works and is preferred coz faster than Action method*@ 

    @Html.Action("FirstTenCustomers", "Category")

   <div id="divCustomerDetail">
   </div>

  public ActionResult FirstTenCustomers()
        {
            IList<Customer> list = (from c in db.Customers
                       .Take(10).Distinct()
                       select c).ToList();
 
            return PartialView("_FirstTenCustomer", list);
        }

//  _FirstTenCustomer.cshtml

@model  IList<MvcApplication1.Models.Customer>
 
@if (Model.Count() > 0)
{ 
    <ul>
        @foreach (var item in Model)
        {
          <li>@Ajax.ActionLink(item.ContactName, "CustomerDetail", new {@custid= item.CustomerID},  

               new AjaxOptions { InsertionMode= InsertionMode.Replace, UpdateTargetId="divCustomerDetail"})</li>
        }
    </ul>
} 

 public ActionResult CustomerDetail(string custid )
        {
            Customer customer = db.Customers.Single(a => a.CustomerID == custid); 
            return PartialView("_CustomerDetail", customer);
        }

// _CustomerDetail.cshtml

@model MvcApplication1.Models.Customer
<table>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Coutry</th>
    </tr>
    @if (Model != null)
    { 
        <tr>
            <td>@Model.ContactName</td>
            <td>@Model.Address</td>
            <td>@Model.Country</td>
        </tr>
    }
    else
    {
       <tr><td colspan="3">No Record found!</td></tr>
    }
</table>

Posted in: MVC,MVC Scrap