如何使用 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

你可以尝试这样做：

Option #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”是您的 HomeContrller 的名称，“GetNames”是您控制器上的 Action 的名称。确保在 Views\Shared\EditorTemplates 目录下添加“NameAutoCompleteTemplate.cshtlm”

Option #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)
          })
)

希望这会有所帮助。