@ Html.dropdownlist c # mvc 4 pokaż div, gdy bool = true

Question

Mam dużo divs pod sobą, a potem wybrano wartość i prawda, że chcę kolejny div do pokazania. Wiem, że mogę zrobić to z JavaScriptem, ale jak mogę zrobić z brzytwą?

Oto część mojego kodu,

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

Więc kiedy ludzie klikną, będę uczestniczyć wtedy Div "Hotel" powinien pokazać i tak dalej.

Wdzięczny za wszelką pomoc.

c# javascript css asp.net-mvc razor

0

Izekid 16 sierpień 2014, 12:56

Answer 1

Musisz użyć JavaScript dla tej funkcjonalności, ponieważ jest po stronie klienta. A brzytwy jest analizowany przez serwer ... Ourourse Istnieje możliwość wysyłania formularza po formularzu kogoś postów do serwera i pokaż więcej pól po stronie. Ale dziś nie ma żadnych niej. ;)

1

matti2515 16 sierpień 2014, 09:08

Answer 2

Jeśli ktoś jest zainteresowany, to moje rozwiązanie i kod, dzięki za wcześniejszą pomoc:

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

0

Izekid 17 sierpień 2014, 14:31

@ Html.dropdownlist c # mvc 4 pokaż div, gdy bool = true

2 odpowiedzi

Podobne pytania

Nowe pytania

c#