ASP.NET Core MVC中基于单选按钮切换分部视图的实现方法

首先修正你的单选按钮代码——同一组单选按钮只能有一个默认选中，把第二个的Checked(true)改成Checked(false)，同时给每个按钮加上value属性用于标识类型：

@Html.Kendo().RadioButton().Name("manual").Checked(true).HtmlAttributes(new { @name = "group1", @value = "manual" }).Label("Manuale");
@Html.Kendo().RadioButton().Name("guidata").Checked(false).HtmlAttributes(new { @name = "group1", @value = "guidata" }).Label("Guidata");

<div id="dyn_container"></div>

步骤1：后端准备分部视图与接口 #

1. 创建两个对应类型的分部视图，比如_ManualPartial.cshtml和_GuidataPartial.cshtml，绑定各自的模型：

   • 示例_ManualPartial.cshtml：

     @model YourProject.Models.ManualModel
     <div class="partial-content">
         <h3>手动模式</h3>
         <p>模型数据：@Model.Description</p>
     </div>
     

   • 示例_GuidataPartial.cshtml：

     @model YourProject.Models.GuidataModel
     <div class="partial-content">
         <h3>引导模式</h3>
         <p>模型数据：@Model.Detail</p>
     </div>
     

2. 在控制器中添加返回分部视图的Action，根据传入的类型返回对应视图并注入模型：

   public IActionResult LoadPartial(string type)
   {
       if (type == "manual")
       {
           var model = new ManualModel { Description = "手动模式初始化数据" };
           return PartialView("_ManualPartial", model);
       }
       else if (type == "guidata")
       {
           var model = new GuidataModel { Detail = "引导模式初始化数据" };
           return PartialView("_GuidataPartial", model);
       }
       return Content("无效的视图类型");
   }
   

步骤2：前端JS切换逻辑 #

用jQuery（ASP.NET Core MVC默认集成，若未引入需自行添加）监听单选按钮的切换事件，通过AJAX请求加载分部视图：

$(function() {
    // 页面加载时自动加载默认选中的视图
    renderPartial($("input[name='group1']:checked").val());

    // 监听单选按钮切换事件
    $("input[name='group1']").on("change", function() {
        renderPartial($(this).val());
    });

    // 封装加载视图的函数
    function renderPartial(viewType) {
        $.ajax({
            url: '@Url.Action("LoadPartial", "YourController")',
            type: "GET",
            data: { type: viewType },
            success: function(html) {
                $("#dyn_container").html(html);
            },
            error: function() {
                $("#dyn_container").html("视图加载失败");
            }
        });
    }
});

注意事项 #

• 替换代码中的YourProject.Models、YourController为你项目实际的命名空间和控制器名称
• 若需要传递复杂参数，可在AJAX的data中添加更多键值对，后端Action对应添加参数接收
• 确保已正确引入Kendo UI的JS和CSS资源，避免单选按钮的事件绑定失效

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