运行时使用Kendo UI的文本框控件Asp.net核心

时间:2018-11-02 14:42:55

标签: kendo-ui kendo-grid

如何使用Kendo UI在运行时使用Asp.net核心以编程方式添加文本框控件?

(我不想使用剑道网格)

1 个答案:

答案 0 :(得分:0)

不确定您真正想要的是什么(您的帖子严重缺乏信息),但是我认为您可以尝试使用模板:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  <script id="textbox-template" type="text/x-kendo-template">
  	<input type="text" name="#= data.Name #" value="#= data.Value #">
  </script>
  <style type="text/css">
    #fields-container input {
      display: block
    }
  </style>
</head>
<body>
  <div id="fields-container"></div>
  <button>Add textbox</button>
  
  <script>
    let getValues = function getValues() {
      return {
        Name: "User[" + $('input').length + "]",
        Value: "John Doe"
      };
    };
    
    $('button').on('click', function() {
      let template = kendo.template($('#textbox-template').html()),
          dataValue = getValues(),
          templateValue = template(dataValue);
      
      $('#fields-container').append(templateValue);
    });
  </script>
</body>
</html>

Demo

正如您说的那样,您不想使用网格,我想您想像kendo在网格中所做的那样在后台使用模板。您可以单独使用模板,而无需任何小部件。通过上面的代码段,您可以请求带有ajax的数据表单服务器(精确地在getValues()函数中)或从其他来源获取数据。