如何在Kendo Dialog中嵌入Kendo DateTimePicker？（ASP.NET MVC版Kendo UI）

你的问题出在Dialog的.Content()方法无法直接嵌套Razor控件代码块，它需要接收HTML字符串或MvcHtmlString类型的内容。直接写@(Html.Kendo().DateTimePicker())会导致Razor解析器混乱，引发语法错误。

以下是修复后的完整代码，包含你需要的DateTimePicker、TextBox，以及「取消」「确认」按钮：

@(Html.Kendo().Dialog()
    .Name("MyModal")
    .Title("弹窗标题")
    .Content(@<text>
        <div class="k-form">
            <div class="k-form-field">
                <label class="k-label">选择日期时间</label>
                @(Html.Kendo().DateTimePicker()
                    .Name("dateTimePicker")
                    .Format("yyyy-MM-dd HH:mm")
                )
            </div>
            <div class="k-form-field">
                <label class="k-label">输入内容</label>
                @(Html.Kendo().TextBox()
                    .Name("inputTextBox")
                    .Placeholder("请输入文本")
                )
            </div>
        </div>
    </text>)
    .Width(400)
    .Modal(true) // 通常模态窗口建议设为true，避免背景误操作
    .Actions(actions =>
    {
        actions.Add().Text("取消").Action("function(){this.close();}");
        actions.Add().Text("确认").Primary(true).Action("function(){alert('确认操作触发'); this.close();}");
    })
)

关键修改说明： #

• 使用@<text>...</text>代码块包裹Content内的HTML和控件代码，Razor会自动将其解析为MvcHtmlString，避免语法错误
• 新增Kendo TextBox控件，并用官方表单布局类（k-form、k-form-field）优化界面排版
• 调整Actions为「取消」和「确认」按钮，分别绑定弹窗关闭和确认逻辑的JS函数
• 可选：将.Modal(false)改为.Modal(true)，符合常规模态窗口的交互逻辑

内容的提问来源于stack exchange，提问作者emrebener