Tuesday, January 20, 2015

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>

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More