forum

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

Ask Question

How to show/hide panel in mvc?

Anonymous User217211-Oct-2014

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

The problem is that I have a radio group containing 4 radio button, When selecting a radio button I neet to hide some of the editors that are bound to the strong typed property fields.

I could create a javascript function like this.

if(radiobonnton1.value = cehcked){
           //Hide not used fields
           //Show used fields
        }
        elseif(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?

asp.net mvcasp.net asp.net mvc 
Updated on 11-Oct-2014
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

11-Oct-2014
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');
 
            }
            elseif (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');
 
            }
            elseif (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');
 
            }
            elseif (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');
 
            }
            elseif (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');
 
            }
            elseif (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?

Liked By