如何使用Kendo UI进行下拉列表

时间:2016-07-15 03:38:51

标签: c# jquery razor telerik

我正在使用Telerik MVC 4.我想制作一个组合框和下拉列表。但它总是显示文本框。

这是控制器

[Authorize]
        public JsonResult GetProvinsiByJSON()
        {
            var propinsi = db.Tbl_Propinsi.Where(b => b.flag == "Y").Select(b => new { Value = b.id_propinsi, Text = b.propinsi }).AsEnumerable();
            return Json(propinsi, JsonRequestBehavior.AllowGet);
        }

这是我的观点

@{
    ViewBag.Title = "Kota";
    Layout = "~/Views/Shared/_adminLayout.cshtml";
}

<div class="tables">
    <div class="table-responsive bs-example widget-shadow">
        <h4>Data Kota:</h4>
        <div>
            <form> 
                <div class="form-group"> 
                    <label for="kategori">Tambah Kota</label>
                    <br/>
                    @(Html.Kendo().ComboBox()
                      .Name("provId")
                      .Placeholder("Pilih Provinsi")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .HtmlAttributes(new { style = "width:100%;" })
                      .Filter("contains")
                              .DataSource(source => { source.Read(read => read.Action("GetProvinsiByJSON", "Lokasi")); })
                    )
                     @(Html.Kendo().DropDownList()
                        .Name("provID")
                        .OptionLabel("Please select Provinsi ...")
                        .HtmlAttributes(new { style = "width:40%" })
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Filter("contains")
                        .DataSource(source => { source.Read(read => read.Action("GetProvinsiByJSON", "Lokasi")); })
                    )
                    <input type="text" class="form-control" id="kota" name="kota" placeholder="Nama Kota">
                    <button type="submit" class="btn btn-default">Simpan</button> 
                </div>
            </form>
        </div>
        <table class="table table-bordered"> 
            <thead>
                <tr> 
                <th>No</th> 
                <th>Kota</th>
                <th>Provinsi</th> 
                </thead> 
                <tbody> 

                </tbody> 
        </table> 
    </div>
</div>

这就是我得到的,只是一个空的文本框

enter image description here

请帮帮我。先谢谢

1 个答案:

答案 0 :(得分:2)

最有可能是由JavaScript错误或缺少Kendo UI所需的必需资源引起的。

  

为了让Kendo UI脚本按预期工作,请确保您   在之前的文档中包含对jQuery库的引用   脚本。

请查看以下链接:

http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#javascript-prerequisites http://docs.telerik.com/kendo-ui/intro/installation/getting-started#host-kendo-ui-in-your-project

希望这有帮助。