在单选按钮上选中/取消选中，加载/隐藏局部视图

Question

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

@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助手会生成两个ID为Isattending_0和Isattending_1单选按钮，每当选中Isattending_1时，应显示部分视图，而取消选中时，该部分视图应被隐藏，并且默认情况下将其选中。

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

[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

Answer 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>

Answer 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):
       }