如何为单选按钮选择指定一个 url答案

【问题标题】：How to designate a url to a radio button selection如何为单选按钮选择指定一个 url
【发布时间】：2019-12-15 05:44:50
【问题描述】：

我有一个带有内容区域的视图。我想要做的是将部分视图加载到该 div 区域中，具体取决于选择了哪个单选按钮。我对这一切都很陌生，但我花了一些时间研究类似的例子。我已经让它与按钮一起使用，但单选按钮看起来更专业一些

索引视图（将加载哪些部分视图）

<fieldset id="partials">
    @Html.RadioButton("partials", false, new { id = "Supplies" }) Add Supplies
    @Html.RadioButton("partials", false, new { id = "Forms" }) Add Forms
</fieldset>

<div id="divContent" data-listen="start_date end_date" data-contentrequest="_Summary" data-requestonload="true">

</div>

我从网上找到了一些 Ajax 代码，可以正常工作。 .但我有点卡住了：

<script type="text/javascript"> 
$(function () {
    $('#partials input[type=radio]').on('change', function () {                  
        $.ajax({
                     type: "get",
                     cache: false,
                     url: $(this).data('url'),
                     success: function (data, xhr, settings) {
                         $("#divContent").html(data);
                     }

                 });
             });
            });

按原样 - 无论选择哪个单选按钮，索引视图都会在 divContent 区域内自行加载。

如果选择了“供应”单选选项，我想要加载 ICSNewOrders/AddSupplies（部分视图），如果选择了“表单”单选选项，则加载 ICSNewOrders/AddForms（部分视图）

我知道我需要以某种方式将每个单选选项的 url 发送到 Ajax - 我只是不知道如何。

我可以在单选按钮的哪个位置使用 url 对其进行重载？我尝试了许多不同的方法，但都没有成功。
那会自动将特定的url发送到Ajax，还是有其他步骤？

我已经让它与按钮一起使用，很简单

<div>
<button data-url='@Url.Action("AddForms","ICSNewOrders")'>Add Forms To Order</button>
<button data-url='@Url.Action("AddSupplies","ICSNewOrders")'>Add Supplies To Order</button>

我没有为 Radio Button 做同样的事情。

更新：根据要求，我正在添加单选按钮的最终 html 呈现版本

<fieldset id="partials">
    <input id="Supplies" name="partials" type="radio" value="False" /> Add Supplies
    <input id="Forms" name="partials" type="radio" value="False" /> Add Forms

</fieldset>

【问题讨论】：

你能分享一下单选按钮的最终浏览器渲染版本吗？
嗨@RonitMukherjee。我已将单选按钮的浏览器呈现版本添加到我的原始帖子中。
您渲染的收音机版本不包含“data-url”
这是我的基本问题。我知道如何将“data-url”添加到常规按钮（显示在我的帖子中）。但是我在网上找不到任何东西来告诉我如何将 data-url 添加到我的单选按钮选项中？我尝试了很多方法，但我得到的都是错误。
@Html.RadioButton("partials", false, new { id = "Supplies",data-url="example.com" }) 添加耗材 - 试试这个

标签： javascript html ajax asp.net-mvc-5

【解决方案1】：

最终，我在网上找到了一个很好的示例，并对其进行了修改以满足我的需要。与我正在研究的内容略有不同。这是我所做的，以防其他人需要做类似的事情：

我有一个带有数据容器的索引视图和两个隐藏的局部视图。这个概念是我将使用单选按钮将两个部分视图交换到数据容器中。

索引视图

<div>
    Add Forms to Order :@Html.RadioButton("orders", "Forms", new { onclick = "showResult(this)" })
    Add Supplies to Order :@Html.RadioButton("orders", "Supplies", new { onclick = "showResult(this)" })
</div>

<div id="divContent" data-listen="start_date end_date" data-contentrequest="_Summary" data-requestonload="true">
</div>

<div id="AddSuppliesPart" style="display: none">     
    @Html.Action("AddSupplies")
</div>    
<div id="AddFormsPart" style="display: none">
   @Html.Action("AddForms")
</div>

脚本

<script type="text/javascript">
function showResult(radio) {
    //alert("yes");
    var selected = radio.value;
    if (selected == "Forms")
        document.getElementById("divContent").innerHTML
            = document.getElementById("AddFormsPart").innerHTML;


    else if (selected == "Supplies")
        document.getElementById("divContent").innerHTML
            = document.getElementById("AddSuppliesPart").innerHTML;
}
</script>

【讨论】：