在 ASP.NET Core 中使用单选按钮输入类型控制复选框组输入类型

Question

在我的 Visual Studio 2019 ASP.NET Core 5.0 MVC 项目中，我希望使用一个公开的 Joke API 在 information about a Joke API 这是一个 try out form for a joke api。现在我被困在这个表单顶部的 catergory/categories 的实现中，我想要实现的功能如下：

案例一： In the image for category/categories the state of radio and checkboxes are shown

这里如果启用自定义单选按钮和其中两个复选框（对应于此单选，例如由其控制的 Programming 和 Misc，如图所示然后请求 URL 变成如下图：（忽略 UI 中的所有其他过滤器） Custom radio enabled with Programming and Misc check boxes checked

案例二： Here the Any radio button is clicked 取消单击自定义单选按钮并禁用其所有复选框，结果请求 URL 如下所示 Request URL

到目前为止，我对 getrequestURL 操作方法的看法是：

@model WebAPIConsume.ViewModels.JokeRequestURLVM

<form method="post" enctype="multipart/form-data" asp-action="GetRequestURL" asp-controller="Jokes">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group">
        <label asp-for="category" class="control-label"> Select category/categories</label>
        @*<input type="radio" value="Any" /> Any
        <input type="radio" value="Custom" name="Custom" /> Custom:*@
    <div><input type="radio" name="category" value="Any" class="control-label" checked="checked" /> Any</div>
    <div>
        <input type="radio" name="category" value="Custom" class="control-label" /> Custom:
        <input type="checkbox" name="customcategory" value="Programming" class="control-label" /> Programming
        <input type="checkbox" name="customcategory" value="Misc" class="control-label" /> Misc
        <input type="checkbox" name="customcategory" value="Dark" class="control-label" /> Dark
        <input type="checkbox" name="customcategory" value="Pun" class="control-label" /> Pun
        <input type="checkbox" name="customcategory" value="Spooky" class="control-label" /> Spooky
        <input type="checkbox" name="customcategory" value="Christmas" class="control-label" /> Christmas
    </div>  
</form>

JokesController code:
[HttpGet]
        public  IActionResult  GetRequestURL()
        {

          return View();
        }

View Model:
public class JokeRequestURLVM
    {
        public string category { get; set; }
        public string language { get; set; }
        public string format { get; set; }
        public Joke joke { get; set; }
        public Flags flags  { get; set; }
        public int amount   { get; set; }
    }
Models:
Joke:
public class Joke
    {
        public string type { get; set; }
        public string joke { get; set; }
        public string setup { get; set; }
        public string delivery { get; set; }
        public int id { get; set; }
        public Flags flags { get; set; }
    }

public class Flags
    {
        public bool nsfw { get; set; }
        public bool religious { get; set; }
        public bool political { get; set; }
        public bool racist { get; set; }
        public bool sexist { get; set; }
    }

最后，在实现问题描述中的 objective 之后，如何使用选中的单选按钮（任意）或（自定义）单选按钮的值及其选中的复选框组说编程和杂项，以便请求的结果字符串如下所示： Request URL

我希望将此请求 URI 作为字符串传递给 Jokes Controller 中的 GetRequestURL() 操作方法

Answer 1

2021 年 2 月 9 日更新

您可以获得如下所示的 Categories。

    [Route("~/Jokes/GetRequestURl/{categories}")]
    public IActionResult GetRequestURl(string Categories)
    {
       string[] CategoryList = Categories.Split(',');
       return Json(CategoryList);
    }

测试结果：

2021 年 2 月 8 日更新

已从 JokeAPI 的 Javascript file 更新为 buildURL()。

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        var settings = {
            baseURL: "https://127.0.0.1",
            Endpoint: "Jokes/GetRequestURL",
            anyCategoryName: "Any",
        };

        window.onload = function () { reRender(); };

        function reRender() {

            var isValid = false;
            document.getElementsByName("category").forEach(function (el) {
                if (!el.checked)
                    return;

                if (el.value == "Any") {
                    isValid = true;
                    ["cat-cb1", "cat-cb2", "cat-cb3", "cat-cb4", "cat-cb5", "cat-cb6"].forEach(function (cat) {
                        document.getElementById(cat).disabled = true;
                    });
                }
                else {
                    var isChecked = false;
                    ["cat-cb1", "cat-cb2", "cat-cb3", "cat-cb4", "cat-cb5", "cat-cb6"].forEach(function (cat) {
                        var cel = document.getElementById(cat);
                        cel.disabled = false;

                        if (cel.checked)
                            isChecked = true;
                    });

                    if (isChecked)
                        isValid = true;
                }
            });


           buildURL();

        }

        //#MARKER build URL
        function buildURL()
        {
            var queryParams = [];

            //#SECTION categories
            var selectedCategories = [settings.anyCategoryName];
            if(document.getElementById("Custom").checked)
            {
                selectedCategories = [];
                if(document.getElementById("cat-cb1").checked)
                {
                    selectedCategories.push("Programming");
                }
                if(document.getElementById("cat-cb2").checked)
                {
                    selectedCategories.push("Miscellaneous");
                }
                if(document.getElementById("cat-cb3").checked)
                {
                    selectedCategories.push("Dark");
                }
                if(document.getElementById("cat-cb4").checked)
                {
                    selectedCategories.push("Pun");
                }
                if(document.getElementById("cat-cb5").checked)
                {
                    selectedCategories.push("Spooky");
                }
                if(document.getElementById("cat-cb6").checked)
                {
                    selectedCategories.push("Christmas");
                }

                if(selectedCategories.length == 0)
                {
                    selectedCategories.push(settings.anyCategoryName);
                }
            }

            tryItURL = settings.baseURL + "/" + settings.Endpoint + "/" + selectedCategories.join(",");

            if(queryParams.length > 0)
            {
                tryItURL += "?" + queryParams.join("&");
            }

            document.getElementById("urlBuilderUrl").innerText = tryItURL;
        }

    </script>
</head>
<body>
    <form method="post" enctype="multipart/form-data" asp-action="GetRequestURL" asp-controller="Jokes">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-group">
            <label asp-for="category" class="control-label"> Select category/categories</label>
            @*<input type="radio" value="Any" /> Any
            <input type="radio" value="Custom" name="Custom" /> Custom:*@

            <div><input type="radio" name="category" value="Any" checked="checked" id="Any" class="control-label" checked="checked" onchange="reRender()" /> Any</div>
            <div>
                <input type="radio" name="category" value="Custom" class="control-label" id="Custom" onchange="reRender()" /> Custom:
                <input type="checkbox" name="customcategory" id="cat-cb1" value="Programming" class="control-label" onchange="reRender()" /> Programming
                <input type="checkbox" name="customcategory" id="cat-cb2" value="Misc" class="control-label" onchange="reRender()" /> Misc
                <input type="checkbox" name="customcategory" id="cat-cb3" value="Dark" class="control-label" onchange="reRender()" /> Dark
                <input type="checkbox" name="customcategory" id="cat-cb4" value="Pun" class="control-label" onchange="reRender()" /> Pun
                <input type="checkbox" name="customcategory" id="cat-cb5" value="Spooky" class="control-label" onchange="reRender()" /> Spooky
                <input type="checkbox" name="customcategory" id="cat-cb6" value="Christmas" class="control-label" onchange="reRender()" /> Christmas
            </div>
            <span id="urlBuilderUrl">/Jokes/GetRequestURL</span>
    </form>
</body>
</html>

测试结果：

你可以用JavaScript来控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        window.onload = function () { reRender(); };

        function reRender() {

            var isValid = false;
            document.getElementsByName("category").forEach(function (el) {
                if (!el.checked)
                    return;

                if (el.value == "Any") {
                    isValid = true;
                    ["cat-cb1", "cat-cb2", "cat-cb3", "cat-cb4", "cat-cb5", "cat-cb6"].forEach(function (cat) {
                        document.getElementById(cat).disabled = true;
                    });
                }
                else {
                    var isChecked = false;
                    ["cat-cb1", "cat-cb2", "cat-cb3", "cat-cb4", "cat-cb5", "cat-cb6"].forEach(function (cat) {
                        var cel = document.getElementById(cat);
                        cel.disabled = false;

                        if (cel.checked)
                            isChecked = true;
                    });

                    if (isChecked)
                        isValid = true;
                }
            });

        }

    </script>
</head>
<body>
    <form method="post" enctype="multipart/form-data" asp-action="GetRequestURL" asp-controller="Jokes">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-group">
            <label asp-for="category" class="control-label"> Select category/categories</label>
            @*<input type="radio" value="Any" /> Any
            <input type="radio" value="Custom" name="Custom" /> Custom:*@

            <div><input type="radio" name="category" value="Any" checked="checked" id="Any" class="control-label" checked="checked" onchange="reRender()" /> Any</div>
            <div>
                <input type="radio" name="category" value="Custom" class="control-label" id="Custom" onchange="reRender()" /> Custom:
                <input type="checkbox" name="customcategory" id="cat-cb1" value="Programming" class="control-label" onchange="reRender()" /> Programming
                <input type="checkbox" name="customcategory" id="cat-cb2" value="Misc" class="control-label" onchange="reRender()" /> Misc
                <input type="checkbox" name="customcategory" id="cat-cb3" value="Dark" class="control-label" onchange="reRender()" /> Dark
                <input type="checkbox" name="customcategory" id="cat-cb4" value="Pun" class="control-label" onchange="reRender()" /> Pun
                <input type="checkbox" name="customcategory" id="cat-cb5" value="Spooky" class="control-label" onchange="reRender()" /> Spooky
                <input type="checkbox" name="customcategory" id="cat-cb6" value="Christmas" class="control-label" onchange="reRender()" /> Christmas
            </div>
    </form>
</body>
</html>

测试结果：

在 ASP.NET Core 中使用单选按钮输入类型控制复选框组输入类型

Controlling a Checkbox group input type with a Radio button input type in ASP.NET Core

c#

api

asp.net-mvc

asp.net-core

webapi