如何在弹出窗口中将对象从视图传递到局部视图?

时间:2012-06-05 09:22:18

标签: asp.net-mvc-3 partial-views telerik-grid telerik-mvc telerik-window

我有一个包含Telerik网格的视图:

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

我想使用弹出窗口向此网格添加/编辑记录。我使用了Telerik窗口,我在其中打开了另一个视图作为部分视图来添加/编辑记录。这是窗口的代码以及我如何打开它作为&#34; ADD功能&#34;的弹出窗口。

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

我尝试使用相同的窗口进行编辑。但是我在将客户对象传递给窗口中的局部视图时遇到了问题。

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>   

我如何通过这个&#34;客户&#34;对象到弹出窗口内的局部视图?

1 个答案:

答案 0 :(得分:1)

我处理这个工作的方式是在Telerik窗口中创建一个空div。 “编辑”链接是一个AJAX链接,它使用窗口的div作为其目标。该链接调用您选择的控制器方法,并从那里返回Json,只返回您想要显示的PartialView。这种方法的好处是您可以像使用普通视图/部分视图一样使用客户对象。

AJAX完成后,打开Telerik窗口,内容应该在那里。