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

【问题标题】：Controlling a Checkbox group input type with a Radio button input type in ASP.NET Core在 ASP.NET Core 中使用单选按钮输入类型控制复选框组输入类型
【发布时间】：2021-02-04 08:09:21
【问题描述】：

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

案例 1： 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

案例 2： 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; }
    }

最后，在实现了问题描述中的目标之后，我如何使用选中的单选按钮 (Any) 或 (Custom) 单选按钮的值及其选中的复选框组，例如 Programming 和 Misc，以便请求的结果字符串如下所示： Request URL

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

【问题讨论】：

标签： c# asp.net-mvc api asp.net-core webapi

【解决方案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>

测试结果：

【讨论】：

我稍微编辑了我的问题，询问它如何使用控制器操作方法中的检查值。
将参数发布到您的控制器操作方法。
嗨@Michael Wang 感谢您的解决方案。您能告诉我在这种情况下将参数发布到控制器操作方法的最佳方式吗？
@krchome 我贴出动作方法的代码。
感谢您的解决方案。我还能够通过在 BuildURL 函数中调用 Ajax 然后创建另一个 HTTPPost 方法 GetRequestURL 来解决它，该方法接受从 ajax 调用传递给它的字符串 URL。然后我可以使用这个 URL 字符串与 Joke API 进行通信。