How to show/hide panel in mvc?

Total Post:128

Points:898
 1388  View(s)
Ratings:
Rate this:

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
        }
        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. 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?

      Modified On Apr-05-2018 11:48:45 PM

Answer

NEWSLETTER

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