在单选按钮选中/取消选中，加载/隐藏部分视图答案

【问题标题】：On radio button check/uncheck, load/hide partial view在单选按钮选中/取消选中，加载/隐藏部分视图
【发布时间】：2014-02-13 12:15:44
【问题描述】：

我想在选中或取消选中单选按钮时加载或隐藏部分视图。我目前对我应该做什么有点空白。我目前正在考虑这个

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")
@using (Html.BeginForm("Index", "Response", FormMethod.Post))
{     
            <div class="form-group">
                <div class="input-group">
                    @Html.EditorFor(m => m.Isattending, "RadioButtonQuestion")
                </div>

            </div>

}
<div id="provideDateTime">
   //load partial view here
</div>

<script>
    $(document).ready(function () {
        $('input:radio[name=Isattending_0]').change(function () {

            if ($("#Isattending_0").is(':checked')) {
                //show partial view. 
                //should call a method in controller that renders partial view
                //don't know what to do
            }
            else {
                //hide partial view
            }
        })

    })

    </script>

EditFor Helper生成两个带ID Isattending_0和Isattending_1，只要检查ISatting_0，应显示部分视图，并且在取消选中，应隐藏部分视图，默认情况下，请检查。

这是控制器中的方法，应该从上面的脚本中调用

[HttpGet]
public ActionResult AttendeeAvailability(Guid appointmentId, Guid attendeeId)
{
    var attendeeAvailability = new AttendeeAvailableDateTime
    {
        AppointmentId = appointmentId,
        AttendeeId = attendeeAvailability
    };
    return View(attendeeAvailability);
}

PS：我尝试在 div provideDateTime 中显示/隐藏一个文本（Hello world），以使用以下 javascript 代码开始，但它不起作用，文本 hello world 总是出现，即使单选按钮是选中或未选中

<script>
    $(document).ready(function () {
        $('input:radio[name=Isattending_0]').change(function () {

            if ($("#Isattending_0").is(':checked')) {
                $("#provideDateTime").show();
            }
            else {
                $("#provideDateTime").hide();
            }
        })

    })

    </script>

在浏览器中为单选按钮渲染 Html

【问题讨论】：

是的，我什至检查了浏览器渲染的html中的id，将在浏览器中发布生成的html图片，只需一分钟。
根据您的屏幕截图，按钮的名称是“Isattending”，但您的代码 $('input:radio[name=Isattending_0]') 正在寻找名称为 Isattending_0 的按钮...尝试将其更改为仅“Isattending” :)
但是我也可以通过 id 来做吗？因为两者都具有相同的名称但不同的 ID，我想加载基于 ID 为 Isattending_0 的单选按钮
I just made a test, and for some reason it doesn't fire a "change" event when the 2nd button is selected, so I would suggest you go with listening for the name.请看jsfiddle.net/Fizk/TmHvC/1
改成 $('#Isattending_0').on('change', function() {});反而。如果您的代码实际上被调用，还要检查 firebug

标签： javascript jquery asp.net-mvc partial-views

【解决方案1】：

<script>
    $(document).ready(function () {
 $.get('/Controller/Action',function(data){
                     $('#provideDateTime').html(data);
              });
        $('#Isattending_0').change(function () {

            if ($("#Isattending_0").is(':checked')) {
              $.get('/Controller/Action',function(data){
                     $('#provideDateTime').html(data);
              });
            }

        })
   $('#Isattending_1').change(function () {

            if ($("#Isattending_1").is(':checked')) {

                     $('#provideDateTime').html('');

            }

        })
    })

    </script>

【讨论】：

根据对我的问题的评论，我意识到两个单选按钮具有相同的名称，但它们具有不同的 ID。所以Isattending_0 是 id 不是名字，这还能用吗？
我也必须为控制器方法提供参数
其实为什么不能写两个事件呢？
那么这两个事件会是什么样子呢？
但我不应该将参数传递给控制器的方法吗？我想我应该

【解决方案2】：

只需对控制器中提供局部视图的操作进行 jQuery Post 调用。确保 Action 的返回类型是 ActionResult - 这将返回结果。

$.ajax(type: "POST", 
       url: "{route to your action}", 
       data: {data}, 
       success: function (response) // This response will actually be HTML of your partial View
       {
           $("whatever-div-you-want-your-partial-view-to-appear").html(response):
       }

【讨论】：

我认为您的意思是 ajax get 调用，但无论如何，在单选按钮更改上通过 ajax get call 调用控制器方法？
@Biplov - ajax 调用应该在您的 if 语句中，用于检查单选按钮是否被选中。
默认情况下，当页面第一次加载时，单选按钮被选中，我怎样才能让部分视图出现？现在它只适用于更改事件
@Biplov13 为此，您需要将 ajax 调用放入它自己的函数中。然后确保在加载时以及在单选按钮的事件处理程序中调用它。