asp.net-mvc - 如何使用 Kendo UI 网格打开其中包含列表的模式

Question

我在我的 asp.net mvc 项目中使用 Kendo UI。

我在显示模式时遇到问题。在我的网格中，我想添加一个额外的列，其中有一个按钮。

当用户单击该按钮时，我需要显示另一个表中具有当前表 ID 的列表，并以模式显示它。

如果您能帮助我，我将非常感激。

@(Html.Kendo().Grid<ClinicManagement.Models.Reagent>().Name("PersonGrid")
                            .Name("PersonGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Width(90);
                                columns.Bound(p => p.Family).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Width(90);
                                columns.Bound(p => p.CardNumber).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Width(90);
                                columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(150);
                            })
                           .DataSource(dataSource => dataSource
                               .Ajax()
                               .PageSize(20)
                               .Events(events => events.Error("error_handler"))
                               .Sort(sort => sort.Add(p => p.Name).Ascending())
                               .Model(model => model.Id(p => p.Id))
                               .Create(update => update.Action("Create", "Reagents"))
                               .Read(read => read.Action("ReadReagent", "Reagents"))
                               .Update(update => update.Action("Edit", "Reagents"))
                               .Destroy(destroy => destroy.Action("Delete", "Reagents"))
                  ))

Answer 1

好的，您的代码看起来与演示类似 here 。您只需完成它即可:

首先，在页面上创建一个模态框:

@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)       
)

该示例使用剑道模板来显示详细信息，因此您可以在其中添加剑道列表(您需要使用 .ToHtmlString() 因为它是 nested control )。我更喜欢另一种方法，可以将部分 View 与 View 模型结合使用:

创建一个 View 模型，其中包含要显示的列表项和其他属性:

public class DetailsViewModel
{
    public int PersonId { get; set; }
    public string Name { get; set; }
    ... etc
    public List<string> MyListItems;
}

创建带有列表(或网格)的详细信息的部分 View :

@model DetailsViewModel
<div>
... // Show fields, etc.
@(Html.Kendo().ListBox()
    ... other list options
    .BindTo(Model.MyListItems)
    .Deferred()   // Need for nested control
</div>

创建一个 Controller 操作以返回部分:

public PartialViewResult GetDetailsView(int personId)
{
    // fetch data
    // Fill the viewmodel 
    var vm = new DetailsViewModel
    {
        PersonId = data.PersonId,
        Name = data.Name,
        MyListItems = context.Items.Where(i => i.PersonId == personId).ToList()
    }
    return PartialView("_Details", vm);
}

单击按钮的 JavaScript 代码将打开窗口并告诉它从 Controller 操作加载部分 View :

<script type="text/javascript">
    function showDetails(personId) {
        var wnd = $("#Details").data("kendoWindow");
        wnd.refresh({
            url: '@Url.Action("GetDetailsView","Person", new { personId = "__personid__" })'
                        .replace("__personid__", personId )
                });
        wnd.open();
    }
</script>

最后，更改自定义命令以传入Id:

.Click("showDetails(PersonId)")

编辑 - 或使用按钮模板:

columns.Template(t => { }).Width(150)
       .ClientTemplate(@"<a class='btn btn-info btn-xs' onclick="showDetails(PersonId)">Details</a>");