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

时间:2015-09-02 10:02:44

标签: asp.net asp.net-mvc telerik telerik-mvc

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

我尝试将this添加到我的项目中,然后我获得了带有无限加载图标的Select customers框。

这样的事情:

enter image description here

我想知道我是如何绑定"数据到控件,所以我在他们的网站示例中显示用户列表。

到目前为止,我尝试在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);
}

我有这个课程:

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>

1 个答案:

答案 0 :(得分:1)

首先,您不需要dataSourceRequest作为参数。您需要使用dataTextField和DataValueField返回Json。

我不知道返回到您的obj变量的内容,因此最后一行(使用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);
}