Home > DeveloperSection > Forums > How to show/hide panel in mvc?
Ashish Pandey

Total Post:128

Points:898
Posted on    October-11-2014 12:35 AM

 ASP.NET MVC ASP.Net  ASP.NET MVC 
Ratings:


 1 Reply(s)
 633  View(s)
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?



Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    October-11-2014 12:37 AM

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?


Don't want to miss updates? Please click the below button!

Follow MindStick