在ASP.NET Core中使用单选按钮输入类型控制复选框组输入类型 [英] Controlling a Checkbox group input type with a Radio button input type in ASP.NET Core
本文介绍了在ASP.NET Core中使用单选按钮输入类型控制复选框组输入类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的Visual Studio 2019 ASP.NET Core 5.0 MVC项目中，我希望使用一个公开可用的Joke API在
更新2/8/2021
已经从
您可以使用JavaScript进行控制.
<！DOCTYPE html>< html lang ="en">< head>< script>window.onload = function(){reRender();};函数reRender(){var isValid = false;document.getElementsByName("category").forEach(function(el){如果(！el.checked)返回;如果(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;});}别的 {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;如果(已检查)isChecked = true;});如果(已检查)isValid = true;}});}</script></head><身体>< form method ="post"；enctype ="multipart/form-data"asp-action ="GetRequestURL"asp-controller =笑话"< div asp-validation-summary =仅限模型"class ="text-danger"</div>< div class ="form-group">< label asp-for ="category"class ="control-label">选择类别.@ * ＜输入类型＝无线电".值=任何"/>任何<输入类型＝无线电".value ="Custom"name =自定义"/>风俗:*@< div><输入类型=收音机"名称=类别"值=任何"已检查=已检查"id ="Any"class ="control-label"已检查=已检查"onchange ="reRender()"；/>任何</div>< div><输入类型＝无线电".名称=类别"value ="Custom"class ="control-label"id =自定义"onchange ="reRender()"；/>风俗:<输入类型=复选框"；name ="customcategory"id ="cat-cb1"value =正在编程"class ="control-label"onchange ="reRender()"；/>程式设计<输入类型=复选框"；name ="customcategory"id ="cat-cb2"value =其他"class ="control-label"onchange ="reRender()"；/>杂项<输入类型=复选框"；name ="customcategory"id ="cat-cb3"value =暗"class ="control-label"onchange ="reRender()"；/>黑暗的<输入类型=复选框"；name ="customcategory"id ="cat-cb4"值=双关"class ="control-label"onchange ="reRender()"；/>双关语<输入类型=复选框"；name ="customcategory"id ="cat-cb5"value =怪异"class ="control-label"onchange ="reRender()"；/>幽灵般的<输入类型=复选框"；name ="customcategory"id ="cat-cb6"value =圣诞节"class ="control-label"onchange ="reRender()"；/>圣诞节</div></form></body></html> 测试结果:
In my Visual Studio 2019 ASP.NET Core 5.0 MVC project, I wish to consume a publicly available Joke API at information about a Joke API which is a try out form for a joke api. Now I am stuck at the implementation of catergory/categories at the top of this form where the functionalities I want to implement are as follows:
Case 1: In the image for category/categories the state of radio and checkboxes are shown
Here if you enable custom radio button and two of the checkboxes (corresponding to this radio, say Programming and Misc that are controlled by it as shown then the request URL becomes like the following image: (Ignoring all other filters in the UI) Custom radio enabled with Programming and Misc check boxes checked
Case 2: Here the Any radio button is clicked which unclicks the Custom radio button and disables all of its check boxes and the resultant request URL is as shown below Request URL
My View for the getrequestURL action method so far is:
@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; }
}
Finally, after having achieved the objective as in the problem description, how do I use the values of the checked radio button (Any) or (Custom) radio button along with its group of checked checkboxes say Programming and Misc so that the resulting string for the request looks like below: Request URL
I want this request URI passed as a string to the GetRequestURL() action method in Jokes Controller
解决方案
Update 2/9/2021
You could get Categories like below.
[Route("~/Jokes/GetRequestURl/{categories}")]
public IActionResult GetRequestURl(string Categories)
{
string[] CategoryList = Categories.Split(',');
return Json(CategoryList);
}
Test result:
Update 2/8/2021
Already updated with buildURL() from the Javascript file of JokeAPI.
<!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>
Test result:
You could use JavaScript to control.
<!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>
Test result:
这篇关于在ASP.NET Core中使用单选按钮输入类型控制复选框组输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
