How to render partial view with in Main view on link clicking in MVC..?

Question

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..?

Answer 1

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:

• Render Partial View Using jQuery in ASP.NET MVC
• http://forums.asp.net/t/2019844.aspx?How+to+load+PartialView+using+Ajax+on+button+click+ASP+NET+MVC

Answer 2

Supposing that you will show you partial view in the following div:

<div class="js-bus-details">
</div>

You could make an ajax call and update the html inside this div. This can be done like below:

@Html.ActionLink("Details", "Details", new { id = item.BusSrlNo, @class="js-bus-details-link" })

and then place the following script at the bottom of your page.

<script>
$(function(){
    $(".js-bus-datails-link").click(function(){
        var busId = $(this).data("id");
        $.ajax({
            method: "GET"
            url: "", // Here you have to place the relative url to your action
            data: { id: busId }
            cache: false
            success: function(e){
                $(".js-bus-details").html(e);
            }
        });
    })
})
</script>

Answer 3

by click event in javascript:

$("#myCodes").load('@Url.Action("PartialViewResult", "Controller_Name")');

N.B.: PartialViewResult must return PartialView(model); and .cshtml page a partial page