C# – How to render partial view with in Main view on link clicking in MVC..

asp.net-mvcc

I have controller Action Method like below wil return all details from DB.

 public ActionResult Index()
    {
        BusDataContext db = new BusDataContext();
        List<BusDetails> buses = db.Bus.ToList();
        return View(buses);
    }

Which will return list of details to Main view which is Strongly typed view like below.

@model IEnumerable<MVC_DAL.BusDetails>
   <p>
     @Html.ActionLink("Create New", "AddBus")
   </p>
 <table class="table">
 <tr>
    <th>
        @Html.DisplayNameFor(model => model.BusSrlNo)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.BusName)
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelIte => item.BusSrlNo)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.BusName)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.BusSrlNo }) |
        @*@Html.ActionLink("Details", "Details", new { id = item.BusSrlNo }) |*@
        @Ajax.ActionLink("Details", "Details", new { id = item.BusSrlNo }, new AjaxOptions{UpdateTargetId="update" })
        @Html.ActionLink("Delete", "Delete", new { id = item.BusSrlNo })

      </td>
  </tr>
 }

</table>

    <div id="update">

    </div>

With Model Class as

public class BusDetails
{
    public int BusSrlNo { get; set; }
    public string BusName { get; set; }
}

And Details ActionMethod consists 

public PartialViewResult Details(int id)
    {
        BusDataContext detail = new BusDataContext();       
        BusDetails bsdtledit = detail.Get_Edit(id);
        return PartialView("Details",bsdtledit);

    }

Corresponding partial view with above model class is below:

   @model MVC_DAL.BusDetails

 <div>
   <h4>BusDetails</h4>
   <hr />
   <dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.BusSrlNo)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.BusSrlNo)
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.BusName)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.BusName)
    </dd>

  </dl>
 </div>
 <p>
    @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
 </p>

So overall i need to display above partial view in Main view only after i click Details link action which is there in Main view.Above code will Display details in seperatetly without main view rather than updating in same page at div (id="update")section.
So how do i update in same Main View..?

Best Answer

That's where Microsoft came out with the Ajax.ActionLink. That's one option; I personally like jQuery better, so I do something like:

$.ajax({

   type: "get",
   url: "@Url.Action("Partial", "Controller"),
   success: function(d) { 
     /* d is the HTML of the returned response */
     $("#SomeParentIDForSection").html(d); //replaces previous HTML with action
   }
});

Just make sure your controller returns a partial view:

public ActionResult Partial()
{
    var model = ..
    //init work

    return PartialView(model);
}

See these references for more information and some other approaches:

Related Topic