jQuery 在 kendo 内联模板中

Question

是否可以在内联模板中包含 jQuery 运行？

这就是我想要完成的。我有一个内联模板，其中包含用户填写后提交回我的控制器的表单。我在表单上有一组单选按钮。如果他们点击最后一个单选按钮，我需要我的文本区域出现并且需要提交表单。

这是调用使用模板的 window 的代码：

function onRejectClick(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Reject").data("kendoWindow");

    wnd.content(rejectTemplate(dataItem));
    wnd.center().open();
}

这是我的模板：

<script type="text/x-kendo-template" id="rejectTemplate">
<div id="reject-container">
    @using (Html.BeginForm("RejectConcern", "Filter", FormMethod.Post, new { @id = "rejectConcern", @style = "width:100%", @class = "k-content" }))
    {
        @Html.AntiForgeryToken()
        <input type="hidden" id="id" name="id" value="#= data.id #" />
        <table>
            <tr>
                <td valign="top">
                    <label>Reason</label>
                </td>
                <td>
                    <label>
                        @Html.RadioButton("reasonForRejection", "NotQuestion", false, new { @id = "reasonForRejection" })Concern is not a question and will not be answered
                    </label>
                    <label>
                        @Html.RadioButton("reasonForRejection", "Inappropriate", false, new { @id = "reasonForRejection" })Concern contains inappropriate language and will not be answered
                    </label>
                    <label>
                        @Html.RadioButton("reasonForRejection", "Irrelevant", false, new { @id = "reasonForRejection" })Concern is not relevant to our business/operation and will not be answered
                    </label>
                    <label>
                        @Html.RadioButton("reasonForRejection", "Personal", false, new { @id = "reasonForRejection" })Concern is about an individual, a specific group, or area and will not be answered
                    </label>
                    <label>
                        @Html.RadioButton("reasonForRejection", "Other", false, new { @id = "reasonForRejection" })Other
                    </label>
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                @Html.TextArea("answer",
                    new
                    {
                        @id = "answer",
                        @name = "answer",
                        @class = "k-textbox",
                        @placeholder = "Enter the reason for rejection here.",
                        @validationmessage = "The reason for rejection is required.",
                        @style = "width: 600px; min-width:600px; max-width:69%; height:200px",
                        @maxlength = "1000"
                    }
                )
                 </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <div class="actions">
                        <button type="submit" id="rejectConcernButton" class="k-button">Submit</button>
                    </div>
                </td>
            </tr>
        </table>
    }
</div>
</script>

如何使用 jQuery 到 show/hide 答案文本区域并根据是否选中最后一个单选按钮使其成为必填项？如果 jQuery 不可能，可以通过常规 JavaScript 完成吗？

Answer 1

如果可以在javascript中完成，在这种情况下可以在jQuery中完成。我的意思是，如果您可以使用 javascript 代码，那么您也可以使用 jQuery 代码。我建议您在小部件的主要元素中设置一个事件。每个小部件都有一个名为 element 的属性，它为您提供了小部件的主要 html 元素。因此，如果您在小部件内的所有单选框中设置一个事件，您将能够操作模板生成的内容，例如：

$($("#listView").data("kendoListView").element).on('change', 'input[type="radio"]', function() { });

Demo

我不确定你使用的是什么小部件，但我在这个演示中使用了 ListView。

jQuery 在 kendo 内联模板中

jQuery inside a kendo inline template

javascript

jquery

kendo-ui

kendo-asp.net-mvc