当我点击 kendo 按钮时，如何在 div 中添加一个新的文本框？

Question

我是 kendo UI 的新手。我在 HTML 中有一个 div:

<div id="newlabel"></div>

在这个 div 中，我想使用 kendo UI button?

添加一个数字递增的新 label

@(Html.Kendo().Button()
    .Name("button name")
    .HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})
    .Content(NEW BUTTON")
    .Events(ev => ev.Click("Addlabel")))

Answer 1

如果你想在运行时在div中放置一个label，你可以使用jQuery，像这样：

$("<label id='testLabel'>Test</label>").appendTo("#newlabel");

您可以使用 jQuery 再次更改 label 的内容，如下所示：

$("#testLabel").text(number);

Answer 2

我在这里准备了一个简单的demo供大家测试：http://dojo.telerik.com/orOKI/3

这使用与 MVC 包装器基本相同的设置。

您需要做的就是将 @Data_target="{YourDivIDHere}" 添加到 html 属性中，如下所示：

.HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          @Data_target="MyDivHere", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})

这会将 data-target 属性加载到按钮上，这样您就可以定位包含 div 的正确内容。（这也意味着您可以在以后更改 div。

然后使用我创建的函数 addItems 我们有以下内容：

function addItems(e)
              {

                var target = $(e.sender.element[0]).data("target");
                $('#' + target).append('<div class="form-group">
                 <label class="col-md-2 form-label">I\'m a label</label>
                 <div class="col-md-10">
                 <input type="textbox" class="form-control" />
                 </div></div>'); 


              }

所有这一切都是从按钮获取 data-target 属性，如果这是页面上唯一使用此特定数据属性的项目，您可以直接调用它，而不是导航按钮结构来获取 id它。

然后我所做的就是在 div 上附加一个标签和文本框。

如果您需要更多信息或您的要求比这更复杂，请告诉我。

注意您可以随时使用 kendo template，这样以后编辑起来会更容易。

当我点击 kendo 按钮时，如何在 div 中添加一个新的文本框？

How to add a new textbox in the div when I click kendo button?

html

css

jquery

kendo-ui

kendo-asp.net-mvc