创建单选按钮数组并传递给 Net Core 控制器
P粉590428357
P粉590428357 2024-02-26 09:49:09
[JavaScript讨论组]

我正在尝试将单选按钮列表(数组)从 JavaScript 传递到 C# Net Core 6 控制器。

HTML 是这样的:

<input class="js-filter-item" type="radio" name="Performance_Type" value="Standard" id="filter-group-Performance_Type--item-Standard"  />
<input class="js-filter-item" type="radio" name="Performance_Type" value="VIP" id="filter-group-Performance_Type--item-VIP"  />

<input class="js-filter-item" type="radio" name="Price" value="Up_to_&#xA3;55" id="filter-group-Price--item-Up_to_&#xA3;55"  />
<input class="js-filter-item" type="radio" name="Price" value="Up_to_&#xA3;70" id="filter-group-Price--item-Up_to_&#xA3;70"  />

因此,有许多组(比我在这里显示的更多),每个组都有许多选项。我想获得带有“名称”、“值”和“选中”的选项的完整列表。或者,如果更简单,只需一些“选中”选项(使用“id”即可)

到目前为止我得到的最接近的是:

var options = document.querySelectorAll('.js-filter-item');
var optionsArray = JSON.stringify((Array.from(options).map(el => ([el.name, el.value, el.checked]))));

控制器上的参数定义为“字符串”

但是,我得到了这个,它不是有效的 JSON:

[["Performance_Type","Standard",true],["Performance_Type","VIP",false]]

我觉得我没有以正确的方式处理这件事!基本上,在 C# 控制器中,我需要知道检查了哪些选项。

P粉590428357
P粉590428357

全部回复(1)
P粉627427202

实际上,这个场景可以通过多种方式实现,为了对选中的单选按钮进行排序,首先我们应该根据其 Id 设置条件。此外,我们需要将这些 id 绑定到类中,最后将请求发送到控制器。

让我们看看实践:假设我们有以下课程。

型号:

public class RadioButtonModel
    {
     
        public string Name { get; set; }
        public string Value { get; set; }
        public string Id { get; set; }
        public bool IsChecked { get; set; }
    }

控制器:

[HttpPost]
    public ActionResult PostRadioBUtton(List radioButtonModels)
    {
        return Ok(radioButtonModels);
    }

查看:

HTML:

注意:我在第一个和最后一个单选按钮中设置了选中属性来测试场景。您必须根据 Id 或 name 属性在 if 条件中执行此操作。网上有大量关于如何做到这一点的示例。

脚本:

@section scripts {
    
    }

输出:

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号