C# 网页ASP.NET核心单选按钮的部分更新

界面的网页图像 上图显示了界面的外观。红色突出显示需要是动态的。 取决于API选择（这是动态的，取决于配置文件）

这是我正在使用的配置示例

"APIS": [
{
  "APIID": 0,
  "APIName": "First",
  "Enabled": true,
  "APIPort": 1234,
  "Endpoints": [
    {
      "ID": 1,
      "Enabled": true,
      "FriendlyName": "First Second Option",
      "Mapping": "[MAPPING HIDDEN]"
    }
  ]
 }
]

当我选择OtherAPI单选按钮时，它需要更新端点选项（如图所示）。 端点选项的长度可以不同（一个API可能有一个，另一个可能有两个）

几天来我一直在寻找解决方案，但一直找不到

我相信我需要使用AJAX来完成这个部分更新

---

是否有人可以帮助您解决此问题？

根据您的描述，您似乎希望显示基于所选API的相关端点选项，如果是这种情况，您可以参考以下代码（我假设您已创建Asp.net Core Razor页面应用程序）：

基于配置json文件，创建以下类：

public class APIS
{
    public int APIID { get; set; }
    public string APIName { get; set; }
    public bool Enabled { get; set; }
    public int APIPort { get; set; }
    public List<Endpoints> Endpoints { get; set; }
}

public class Endpoints
{
    public int ID { get; set; }
    public bool Enabled { get; set; }
    public string FriendlyName { get; set; }
    public string Mapping { get; set; }
}

JavaScript代码：

    @section Scripts{ 
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script type="text/javascript">
            $(function () { 
                $(".radio_api").each(function (index, item) {
                    $(item).click(function () {
                        var apiname = $(this).attr("data-apiname");
                        //using getJson method:
                        $.getJSON(`?handler=GetEndPoints&apiname=${apiname}`, (data) => {
                            $("#endpoints").html(""); //clear the container.
                            $.each(data[0], function (key, value) {
                                $("#endpoints").append(`<input type="radio" name="endpoint"/>${value.friendlyName}`);
                            });
                        }); 
                    });
                });
            });
        </script>
    }

@节脚本{
$（函数（）{
$（“.radio_api”）。每个（函数（索引，项）{
$（项目）。单击（功能（）{
var apiname=$（this.attr（“数据apiname”）；
//使用getJson方法：
$.getJSON（`？handler=GetEndPoints&apiname=${apiname}`，（数据）=>{
$（“#端点”）.html（“”；//清除容器。
$。每个（数据[0]，函数（键，值）{
$（“#端点”）.append（`value.friendlyName}`）；
});
}); 
});
});
});
}

此外，您还可以创建API并使用JQuery Ajax调用API方法并加载端点：

                  $.ajax({
                            url: "api/values?apiname=" + apiname,
                            type: 'Get', 
                            contentType: "application/json; charset=utf-8",
                            dataType: "json", 
                            error: function (exception) {
                                console.log(exception);
                            },
                            success: function (result) { 
                                //console.log("Success");
                                $("#endpoints").html("");

                                $.each(result[0], function (key, value) {
                                    $("#endpoints").append(`<input type="radio" name="endpoint"/>${value.friendlyName}`);
                                });
                            }
                        });

$.ajax({
url:“api/values？apiname=“+apiname，
键入：“Get”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
错误：函数（异常）{
console.log（异常）；
},
成功：函数（结果）{
//控制台日志（“成功”）；
$（“#端点”）.html（“”）；
$.each（结果[0]，函数（键，值）{
$（“#端点”）.append（`value.friendlyName}`）；
});
}
});

屏幕截图如下：

参考：

    @section Scripts{ 
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script type="text/javascript">
            $(function () { 
                $(".radio_api").each(function (index, item) {
                    $(item).click(function () {
                        var apiname = $(this).attr("data-apiname");
                        //using getJson method:
                        $.getJSON(`?handler=GetEndPoints&apiname=${apiname}`, (data) => {
                            $("#endpoints").html(""); //clear the container.
                            $.each(data[0], function (key, value) {
                                $("#endpoints").append(`<input type="radio" name="endpoint"/>${value.friendlyName}`);
                            });
                        }); 
                    });
                });
            });
        </script>
    }

                  $.ajax({
                            url: "api/values?apiname=" + apiname,
                            type: 'Get', 
                            contentType: "application/json; charset=utf-8",
                            dataType: "json", 
                            error: function (exception) {
                                console.log(exception);
                            },
                            success: function (result) { 
                                //console.log("Success");
                                $("#endpoints").html("");

                                $.each(result[0], function (key, value) {
                                    $("#endpoints").append(`<input type="radio" name="endpoint"/>${value.friendlyName}`);
                                });
                            }
                        });