在 asp.net mvc 中使用 Telerik - 多选

Question

我是 asp.net mvc 的新手，我正在为客户的项目尝试 telerik。

我正在尝试将 this 添加到我的项目中，我得到 Select 客户框，其中有一个无限加载图标在旋转。

像这样：

我想知道我如何 "bind" 向控件发送数据，以便像在他们的网站示例中那样显示用户列表。

到目前为止，我尝试在 HomeController 中创建此方法

public ActionResult GetCustomers([DataSourceRequest] DataSourceRequest request)
{    
    string jstring = "[{\"CustomerID\": \"ALFKI\", \"ContactName\": \"Maria Anders\" ,\"CompanyName\": \"Alfreds Futterkiste\"}]";

    var obj = JsonConvert.DeserializeObject<List<userTest>>(jstring);
    return Json(obj);
}

我有这个 class:

public class userTest
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string CompanyName { get; set; }
}

这是我的 index.cshtml:

<div class="demo-section">
    <h3 class="title">Select customers</h3>
    @(Html.Kendo().MultiSelect()
          .Name("customers")
          .DataTextField("ContactName")
          .DataValueField("CustomerID")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetCustomers", "Home");
              });
          })
          .Height(300)
          .HtmlAttributes(new { style = "width: 400px" })
          ...
          .ItemTemplate("<span class=\"k-state-default\"><img src=\"" + Url.Content("http://yarris.design/images/userCentered.png") +" /> </span>" + "<span class=\"k-state-default\"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>")
          .TagTemplate("<img class=\"tag-image\" src=\"" +
          Url.Content("http://yarris.design/images/userCentered.png") +
          "\" alt=\"\" />" +
          "#: data.ContactName #")
    )
</div>

<script>
    $(document).ready(function() {
        var customers = $("#customers").data("kendoMultiSelect");
        customers.wrapper.attr("id", "customers-wrapper");
    });
</script>

Answer 1

嗯，首先，您不需要 dataSourceRequest 作为参数。您需要 return 一个带有 dataTextField 和 DataValueField 的 Json。

我不知道你的 obj 变量 return 是什么，所以最后一行（使用 linq）不能完全匹配其中的内容，但我想你会得到重点。

public ActionResult GetCustomers()
{
    string jstring = "[{\"CustomerID\": \"ALFKI\", \"ContactName\": \"Maria Anders\" ,\"CompanyName\": \"Alfreds Futterkiste\"}]";
    var obj = JsonConvert.DeserializeObject<List<userTest>>(jstring);
    return Json(obj.Select(s => new userTest { ContactName = s.ContactName, CustomerID = s.CustomerID }).Distinct(), JsonRequestBehavior.AllowGet);
}

在 asp.net mvc 中使用 Telerik - 多选

Using Telerik in asp.net mvc - Multiselect

asp.net

asp.net-mvc

telerik

telerik-mvc