How to render partial Page in ASP.Net mvc3 Razor

Question

In my ASP.net MVC3 Razor project .I have to implement partial Page inside a normal view page ,but enable only after the action calls.But both files are referencing a single view model. How to use partial page inside a View page.

Controller Code for Partial Page

//View Customer Data Detailed
public ActionResult DetailedData(int CusId)
{
    var data = from c in cus.CusModelData
                where c.CusId == CusId
                select c;
    return View(data.ToList());

}

View Code

<td>
    @* @Html.ActionLink("Edi", "Edit", new { id = item.CusId }) |*@
    @Html.ActionLink("Details", "DetailedData", new { CusId = item.CusId }) |
    @Html.ActionLink("Delete", "DeleteCustomer", new { CusId = item.CusId })
</td>

Controller Code for View Page

[HttpPost]
public ActionResult ViewCutomerData(string Name)
{
    var data = from c in cus.CusModelData
                where c.Name.Contains(Name)
                select c;

    return View(data.ToList());
}

Right now i am using like this inside view page

View Customer Data Details

@(Html.Partial("DetailedData")

But again it displaying the table data in the View page .But i want to display it only after the "Details" Link is clicked.

Screenshot explain waht i am expecting to do

Piotr Czarnecki · Accepted Answer · 2014-01-22 09:24:17Z

1

I would go with ajax call after link click something like:

User clicks on link

The ajax call is executed:

.get("/Details/DetailedData",{"CusId" : requestedId}, function (data) {
    $("#your-detail-container").html(data);
});

This line:

$("#your-detail-container").html(data);

will fill your details container with the view (html).

Would be better if DetailedData action would return PartialView, not the View something like:

public ActionResult DetailedData(int CusId)
{
    var data = from c in cus.CusModelData
            where c.CusId == CusId
            select c;

    return PartialView(data.ToList());
}

In answer to your comments:

I suggest to use

@Ajax.ActionLink

instead

@Html.ActionLink

Or just use anchor tag . Replace

@(Html.Partial("DetailedData")) with <div id="detailed-data-container"></div>

and fill this container with get response like this:

$(document).on("click",".detailsLink", function () {
        .get("/Details/DetailedData",{"CusId" : requestedId}, function (data) {
            $("#detailed-data-container").html(data);
        });
 });

edited Jan 22, 2014 at 9:24

answered Jan 22, 2014 at 8:42

Piotr Czarnecki

1,6983 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nidheesh Over a year ago

hello is this correct @Html.ActionLink("Details", "DetailedData", null, new { CusId = item.CusId }, new { @class = "detailsLink" }) <div id="detailsLink"> <h1>View Customer Data Details</h1> @(Html.Partial("DetailedData")) </div>

Nidheesh Over a year ago

Collectives™ on Stack Overflow

How to render partial Page in ASP.Net mvc3 Razor

View Customer Data Details

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

View Customer Data Details

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related