On radio button check/uncheck, load/hide partial view

Question

I want to load or hide partial view whenever a radio button is checked or unchecked. I currently am kind of blank on what should I do. I currently have this in view

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

The editfor helper generates two radio buttons with id Isattending_0 and Isattending_1, whenever the Isattending_0 is checked the partial view should be shown, and upon uncheck the partial view should be hidden, and by default it is checked.

This is method in controller that should be called from above script

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

PS: I tried to show/ hide a text(Hello world) inside the div provideDateTime for a start with following javascript code, but it didn't work, the text hello world always appeared, even if the radiobutton is checked or unchecked

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

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

    })

    </script>

Rendered Html in browser for radio buttons

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

Just do a jQuery Post call to the action in your controller that is serving up the Partial View. Make sure the return type on your Action is ActionResult - this will return the result.

$.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):
       }