c# - 如何使用 asp.net mvc 包装器在 kendoUI 网格中有一个自动完成字段

Question

我想在我的 kendoUI 网格中创建一个自动完成字段。但我在网上找不到任何合适的方法。

这是我的观点:

@(Html.Kendo().Grid<SamuraiListing.Data.Company>()
        // Grid Name
    .Name("CompanyGrid")

    // Declare grid column


    .Columns(columns =>
                 {
                     // Cretae all the columns base on Model
                     columns.Bound(r => r.Name);
                     columns.Bound(r => r.Telephone);
                     columns.Bound(r => r.Email);
                     columns.Bound(r => r.GPS);

                     // Edit and Delete button column
                     columns.Command(command =>
                                         {
                                             command.Edit();
                                             command.Destroy();
                                         }).Width(200);
                 })

    // Declare ajax datasource.
        // CRUD operation are wired back to ASP MVC Controller/Action e.g. HomeController, GetAll
        // Set the model Id
    .DataSource(datasoure => datasoure.Ajax()
                                .Model(model => model.Id(record => record.Id))
                                .Read(read => read.Action("GetAll", "Home"))
                                .Create(create => create.Action("Add", "Home"))
                                .Update(update => update.Action("Update", "Home"))
                                .Destroy(delete => delete.Action("Delete", "Home"))
                                .PageSize(10)
    )

    // Add tool bar with Create button
    .ToolBar(toolbar => toolbar.Create())

    // Set grid editable.
    .Editable(editable => editable.Mode(GridEditMode.InLine))

    // Set grid sortable.
    .Sortable()

    // Set grid selectable.
    .Selectable()
    .Navigatable()

    // Set grid pagable.
    .Pageable(pageable =>
                  {
                      pageable.Refresh(true);
                      pageable.PageSizes(true);
                  })
)

假设我想以自动完成的方式显示姓名列表，我可以在哪里添加我的代码？我在网上阅读了大量主题和帖子，但没有一个指向 asp.net 包装器。

Answer 1

你可以尝试这样做:

选项 #1: 如果您希望从 Web 服务器自动完成控件加载数据

columns.Bound(r => r.Name)
       .EditorTemplateName("NamesAutoCompleteTemplate");

然后您将不得不创建与模板名称具有相同文件名的模板。在此示例中，它是 NameAutoCompleteTemplate.cshtml 并向其添加以下代码:

@model string

@(Html.Kendo().AutoCompleteFor(m => m)       
          .DataTextField("Name")
          .Filter(FilterType.StartsWith)
          .Suggest(true)
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetNames", "Home");
              })
              .ServerFiltering(false);
          })
)

其中“Home”是您的 HomeController 的名称，“GetNames”是您 Controller 上的 Action 的名称。确保在 Views\Shared\EditorTemplates 目录下添加“NameAutoCompleteTemplate.cshtlm”

选项 #2: 如果您希望通过 razor 引擎加载自动完成的数据源，那么您不必使用单独的服务来加载自动完成的数据。在这种情况下，您可以将 Name 设置为您的 ViewModel，或者在我的示例中，我将其设置为 ViewBag 并将其传递给模板。

columns.Bound(r => r.Name)
       .EditorViewData(new {ViewBag.Names})
       .EditorTemplateName("NamesAutoCompleteTemplate");

在您的 NameAutoCompleteTemplate.cshtml 文件中，您必须以这种方式编写代码:

@model string

@(Html.Kendo().AutoCompleteFor(m => m)       
          .DataTextField("Name")
          .Filter(FilterType.StartsWith)
          .Suggest(true)
          .BindTo(ViewBag.Names)
          })
)

希望这对您有所帮助。