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帮助程序生成两个标识为Isattending_0和Isattending_1的单选按钮，每当选中Isattending_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总是出现，即使radiobutton被选中或未选中

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

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

    })

    </script>

在浏览器中为单选按钮呈现Html enter image description here

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

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

2 个答案: