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

本文关键字：有一个 网格 kendoUI 字段 asp 包装 mvc net | 更新日期: 2023-09-27 18:05:01

我想在我的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包装器。

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

您可以尝试这样做:

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"是你的Home控制器的名称，"GetNames"是你的控制器上的Action的名称。确保添加了"NameAutoCompleteTemplate"。cshtlm" under Views'Shared'EditorTemplates目录

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

相关文章：