如何在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.

Answer 1

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

1. User clicks on link

2. 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);
        });
 });