Question

我在彼此之下有很多div，当我选择一个值并且为true时我想要显示另一个div。我知道我可以使用javascript制作这个但是如何用剃刀制作呢？

以下是我的一些代码，

 <div id="Attend">
                            @Html.DropDownListFor(model => model.AttendWedding, new[]
                            {
                                new SelectListItem() {Text = "Yes, I'll be there", Value = bool.TrueString },
                                new SelectListItem() {Text ="No, I can't come", Value = bool.FalseString  }
                            }, "Choose an option")

                        </div>
                            <div id="Hotel">
                                @Html.DropDownListFor(model => model.WillStayAtHotel, new[]
                            {
                                new SelectListItem() {Text = "Yes, I will stay at the hotel", Value = bool.TrueString},
                                new SelectListItem() {Text ="No, I won't stay at the hotel", Value = bool.FalseString  }
                            }, "Choose an option")

                            </div>
                        <div id="Nights">
                            @Html.LabelFor(model => model.HowManyNights, "How Many Nights?:", new { @class = "dob" })
                            1
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            2
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            3
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            4
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            <br />
                            5
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            6
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            7
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            8
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                        </div>
                        <div id="When">
                                @Html.TextBoxFor(model => model.StartDate, "{mm/dd/yyyy}",new {@class="datepicker"})
                               @Html.TextBoxFor(model => model.EndDate, "{mm/dd/yyyy}", new { @class = "datepicker" })
                        </div>

所以当人们点击时我会参加div＆＃34; Hotel＆＃34;应该显示等等。

感谢所有人的帮助。

Answer 1

您必须使用javascript来实现此功能，因为它位于客户端。并且razor由服务器解析...当然有可能在有人将表单发布到服务器之后发送表单并在页面重新加载后显示更多字段。但是这几天没有任何意义。 ;）

Answer 2

如果有兴趣的话，这是我的解决方案和代码，感谢您的早期帮助：

<script>
    hideAllDivs = function () {
        $("#Hotel, #Nights, #When").hide();
    };

    handleNewSelection = function () {

        hideAllDivs();

        switch ($(this).val()) {
        case 'True':
            $("#Hotel").show();
            break;
        case 'False':
            $("#Hotel").hide();
            break;
        }
    };
    $(document).ready(function () {

        $("#AttendWedding").change(handleNewSelection);

        // Run the event handler once now to ensure everything is as it should be
        handleNewSelection.apply($("#AttendWedding"));

    });
</script>
<script>
    hideAllDivs1 = function () {
        $("#Nights, #When").hide();
    };

    handleNewSelection1 = function () {

        hideAllDivs1();

        switch ($(this).val()) {
        case 'True':
            $("#Nights").show();
            break;
        case 'False':
            $("#Nights").hide();
            break;
        }
    };
    $(document).ready(function () {

        $("#WillStayAtHotel").change(handleNewSelection1);

        // Run the event handler once now to ensure everything is as it should be
        handleNewSelection1.apply($("#WillStayAtHotel"));

    });
</script>
<script>
    hideAllDivs2 = function () {
        $("#When").hide();
    };

    handleNewSelection2 = function () {

        hideAllDivs2();

        switch ($(this).val()) {
            case '1':
                $("#When").show();
                break;
            case '2':
                $("#When").show();
                break;
            case '3':
                $("#When").show();
                break;
            case '4':
                $("#When").show();
                break;
            case '5':
                $("#When").show();
                break;
            case '6':
                $("#When").show();
                break;
            case '7':
                $("#When").show();
                break;
            case '8':
                $("#When").show();
                break;
            case '':
                $("#When").hide();
                break;
        }
    };
    $(document).ready(function () {

        $("#HowManyNights").change(handleNewSelection2);

        // Run the event handler once now to ensure everything is as it should be
        handleNewSelection2.apply($("#HowManyNights"));

    });
</script>

@ Html.Dropdownlist C＃MVC 4当bool = true时显示div

2 个答案: