How to pass an object from a View to a Partial View within a popup window?

Question

I have a view containing a Telerik grid:

Index.cshtml

@(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.CustomerID))
.ToolBar(toolBar => toolBar.Template(
        @<text>
            <button id="feedback-open-button" title="Add Customer" class="t-button t-state-default">Add</button>
        </text>))
.Columns(columns =>
        {   
            columns.AutoGenerate(column =>
                {
                    //customize autogenereted column's settings
                    column.Width = "150px";                                                    
                    if (column.Member == "CustomerID")
                        column.Visible = false;
                });
            columns.Command(commands => commands
                .Custom("editCustomer")
                .Text("Edit")
                .DataRouteValues(route => route.Add(o => o.CustomerID).RouteKey("CustomerID"))
                .Ajax(true)
                .Action("EditCustomer", "Grid"))
            .HtmlAttributes(new { style = "text-align: center" })
            .Width(150);
        })    
)

I want to add/edit records to this grid using a popup. I have used a Telerik Window, in which I have opened another view as Partial View to add/edit records. This is the code for the window and how I am opening it as a popup for "ADD functionality".

Index.cshtml

@{  Html.Telerik().Window()
    .Name("Window")
    .Title("Add / Edit Customer")        
    .Content(@<text>                 
                        @Html.Partial("AddEditCustomer", new Customer());
             </text>)
    .Width(400)
    .Draggable(true)
    .Modal(true)
    .Visible(false)
    .Render();
} 

@{ Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(@<text>
        // open the initially hidden window when the button is clicked
        $('#feedback-open-button')
            .click(function(e) {
                e.preventDefault();
                $('#Window').data('tWindow').center().open();
            });           
                    </text>);
}

I have tried to use the same window for edit. But I am having problem in passing the customer object to the partial view within the window.

CustomerController.cs

public JsonResult EditCustomer(int CustomerID)
{
    var model = CustomerModel._CustomerCollection.FirstOrDefault(o => o.CustomerID == CustomerID);

    return Json(new { customer = model });
}

Index.cshtml

<script type="text/javascript">
function onComplete(e) {
    if (e.name == "editCustomer") {
       var detailWindow = $("#Window").data("tWindow");       
       var customer = e.response.customer;                        
       detailWindow.center().open();
    } 
}
</script>   

How can I pass this "customer" object to the partial view inside the popup window?

Answer 1

The way we deal with this where I work is by creating an empty div in the Telerik window. The "edit" link is an AJAX link which uses the window's div as its target. The link calls the controller method of your choice, and from there rather than returning Json, just return the PartialView you want displayed. The benefit of this approach is you use the customer object just like you would for any normal view/partial.

After the AJAX completes, open the Telerik window and the content should be there.