.net 如何将Kendo UI ComboBoxFor控件替换为相关MVC控件

kzipqqlq  于 2022-12-14  发布在  .NET
关注(0)|答案(1)|浏览(130)

bounty将在2天后过期。回答此问题可获得+100声望奖励。R15希望引起更多人关注此问题。

由于某些原因,我需要用MVC控件替换其中一个Kendo UI控件,下面是我的Index.cshtml文件中的Kendo控件

@(Html.Kendo().ComboBoxFor(model => model.ProductId)
  .Name("GreenProduct")
  .DataTextField("Name")
  .DataValueField("ProductId")
  .AutoBind(false)
  .DataSource(datasource => datasource
  .Read(read => read
       .Action("GetProductForProject", "Product")
       .Data("hierarchy.filterProduct")
       .Type(HttpVerbs.Post)
        )
       .ServerFiltering(true)
        )
  .Filter(FilterType.Contains)
  .Suggest(false)
  .Delay(0)
  .HtmlAttributes(new { style = "width:100%" })
  )

我就是这么试的

@Html.DropDownListFor(here data,  new { @class = "form-control" } )

但是没有可用的数据源,需要在Index Action方法中调用API吗?怎么做?

xxls0lw8

xxls0lw81#

我认为它向端点发送请求,并使用js代码将选项与响应数据绑定
在我看来,我尝试了以下方法:

@{   
    var select = new List<SelectListItem>() { new SelectListItem() { Text = "SelectOne" } };
}

@Html.DropDownList("MyDropDown",select)

<script>
    var httpRequest = new XMLHttpRequest()
    httpRequest.open('GET', 'https://localhost:44309/Home/GetEntity', true);
    httpRequest.send();
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var json = httpRequest.responseText;
            var arr = JSON.parse(json);
            console.log(arr)
            for (var i = 0; i < arr.length; i++)
            {
                var drop = document.getElementById("MyDropDown")                
                var op = document.createElement("option");
                op.value = arr[i].id;
                op.innerHTML=arr[i].name
                drop.appendChild(op)
            } 
        }
    }
</script>

终点/实体:

public IActionResult GetEntity()
        {
            var someentity = new List<SomeEntity>() { new SomeEntity() { Id = 1, Name = "Name1" }, new SomeEntity() { Id = 2, Name = "Name2" } };
            return Ok(someentity);
        }


结果是:

相关问题