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

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.

editfor帮助程序生成两个id为Isattending_0和Isattending_1的单选按钮,每当选中Isattending_0时,应显示部分视图,取消选中后应隐藏部分视图,默认情况下会进行检查。

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

PS:我试图显示/隐藏div提供的文本(Hello world)以及以下javascript代码的开头,但它不起作用,即使检查或取消选中radiobutton,也会出现文本hello world

<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

在浏览器中为单选按钮呈现Html

2 个解决方案

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

2 个解决方案

#1

更多相关文章

随机推荐