MVC and show/hinde panels?

Question

Hi,

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?

Is this really the way to go?

BestRegards

Answer 1

Hi,

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?