ASP.NET Core项目中Kendo UI编辑弹窗控件选型咨询

完全可以用Kendo UI的Dialog控件实现你要的需求，下面是针对你的.NET 8 ASP.NET Core项目（Kendo UI v2024.2.514）的具体实现方案：

1. 父页面结构 #

先在父表单中定义需要被同步的字段，以及触发弹窗的按钮：

<!-- 父表单字段 -->
<div class="parent-form">
    <label>姓名：</label>
    <input id="parentName" type="text" class="k-textbox" />
    
    <label>邮箱：</label>
    <input id="parentEmail" type="email" class="k-textbox" />
    
    <!-- 触发弹窗的按钮 -->
    <button id="openDialogBtn" class="k-button k-primary">打开输入弹窗</button>
</div>

2. 定义Dialog弹窗isms #

constructH politician 禁施加提供费加载这条返去除a>
在页面中添加Dialog的容器，里面包含需要用户填写的输入框：

<!-- Dialog容器 -->
<div id="inputDialog" style="display:none;">
    <div class="k-form">
        <div class="k-form-field">
            <label>输入姓名：</label>
            <input id="dialogName" type="text" class="k-textbox" />
        </div>
        <div class="k-form-field">
            <label>输入邮箱：</label>
            <input id="dialogEmail" type="email" class="k-textbox" />
        </div>
    </div>
</div>

3. 初始化Dialog并处理值同步逻辑 #

通过JavaScript初始化Dialog，绑定【应用】按钮的点击事件，将弹窗输入框的值同步到父表单：

$(document).ready(function() {
    // 初始化Dialog
    $("#inputDialog").kendoDialog({
        title: "填写信息",
        width: "400px",
        actions: [
            { text: "取消", action: function(e) { e.sender.close(); } },
            { text: "应用", primary: true, action: function(e) {
                // 获取弹窗输入框的值
                const dialogName = $("#dialogName").val();
                const dialogEmail = $("#dialogEmail").val();
                
                // 同步到父表单字段
                $("#parentName").val(dialogName);
                $("#parentEmail").val(dialogEmail);
                
                // 关闭弹窗
                e.sender.close();
                return false;
            }}
        ]
    });

    // 绑定按钮点击事件打开Dialog
    $("#openDialogBtn").click(function() {
        $("#inputDialog").data("kendoDialog").open();
    });
});

额外优化建议 #

• 如果需要弹窗打开时自动填充父表单的现有值，可以在按钮点击事件中预先赋值：

  $("#openDialogBtn").click(function() {
      const parentName = $("#parentName").val();
      const parentEmail = $("#parentEmail").val();
      
      $("#dialogName").val(parentName);
      $("#dialogEmail").val(parentEmail);
      
      $("#inputDialog").data("kendoDialog").open();
  });
  

• 可以使用Kendo原生TextBox控件替代原生input，保持组件风格一致，比如：

  @(Html.Kendo().TextBox().Name("dialogName"))
  

  对应的取值方式为$("#dialogName").data("kendoTextBox").value()

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