HOW TO SHOW/HIDE PANEL IN MVC?

Ashish Pandey

Total Post:128

Points:898
Posted by  Ashish Pandey
 1058  View(s)
Ratings:
Rate this:

I am using strong typed views in my MVC and have now manage to show all the editors for my register form as I like.

The problem is that I have a radiogroup containing 4 radiobotton, When selecting a radiobutton I neet to hide some of the editors that are bound to the strong typed propertie fields.

I could create a javascript function like this.

if(radiobonnton1.value = cehcked){

           //Hide not used fields

           //Show used fields

        }

        else if(radiobonnton2.value = cehcked){

         ...

        }

        ...

The problem with this is that it will be a BIG function and Im not sure how the MVC Validation will handle it if a editor that is not valid are hidden? Will it still be possible to submit?

  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: How to show/hide panel in mvc?

    I have now added this javascript methid :

    $(document).ready(function () {

            $("#ModelViewAd\\.TypeOfAd :radio").change(function () {

     

     

                if (this.id.match('TypeOfAd_Sell$') != null) {

     

                    $("#ModelViewAd_BuyNowPrice").removeAttr('disabled');

                    $("#divBuyNowPrice").fadeIn(500, null);

     

                    $("#divReservationPrice").fadeOut(500, null);

                    $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');

     

                    $("#divEndDate").fadeOut(500, null);

                    $("#ModelViewAd_EndDate").attr('disabled', 'disabled');

     

                    $("#divStartingPrice").fadeOut(500, null);

                    $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');

     

                }

                else if (this.id.match('TypeOfAd_Buy$')) {

     

                    $("#divReservationPrice").fadeOut(500, null);

                    $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');

     

                    $("#divEndDate").fadeOut(500, null);

                    $("#ModelViewAd_EndDate").attr('disabled', 'disabled');

     

                    $("#divStartingPrice").fadeOut(500, null);

                    $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');

     

                    $("#divBuyNowPrice").fadeOut(500, null);

                    $("#ModelViewAd_BuyNowPrice").attr('disabled', 'disabled');

     

                }

                else if (this.id.match('TypeOfAd_Let$')) {

     

                    $("#ModelViewAd_BuyNowPrice").removeAttr('disabled');

                    $("#divBuyNowPrice").fadeIn(500, null);

     

                    $("#divReservationPrice").fadeOut(500, null);

                    $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');

     

                    $("#divEndDate").fadeOut(500, null);

                    $("#ModelViewAd_EndDate").attr('disabled', 'disabled');

     

                    $("#divStartingPrice").fadeOut(500, null);

                    $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');

     

                }

                else if (this.id.match('TypeOfAd_WishRent$')) {

     

                    $("#divBuyNowPrice").fadeOut(500, null);

                    $("#ModelViewAd_BuyNowPrice").attr('disabled', 'disabled');

     

                    $("#divReservationPrice").fadeOut(500, null);

                    $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');

     

                    $("#divEndDate").fadeOut(500, null);

                    $("#ModelViewAd_EndDate").attr('disabled', 'disabled');

     

                    $("#divStartingPrice").fadeOut(500, null);

                    $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');

     

                }

                else if (this.id.match('TypeOfAd_Swap$')) {

     

                    $("#divBuyNowPrice").fadeOut(500, null);

                    $("#ModelViewAd_BuyNowPrice").attr('disabled', 'disabled');

     

                    $("#divReservationPrice").fadeOut(500, null);

                    $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');

     

                    $("#divEndDate").fadeOut(500, null);

                    $("#ModelViewAd_EndDate").attr('disabled', 'disabled');

     

                    $("#divStartingPrice").fadeOut(500, null);

                    $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');

     

                }

                else if (this.id.match('TypeOfAd_Auktion$')) {

     

                    $("#ModelViewAd_BuyNowPrice").removeAttr('disabled');

                    $("#divBuyNowPrice").fadeIn(500, null);

     

                    $("#ModelViewAd_ReservationPrice").removeAttr('disabled');

                    $("#divReservationPrice").fadeIn(500, null);

     

                    $("#ModelViewAd_EndDate").removeAttr('disabled');

                    $("#divEndDate").fadeIn(500, null);

     

                    $("#ModelViewAd_StartingPrice").removeAttr('disabled');

                    $("#divStartingPrice").fadeIn(500, null);

                }

            })

        });

    The radiobutton is set correcly on validation failed from server to client but the javascript is not runned until a radiobutton is changed manually?

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!