javascript - MVC 和显示/隐藏面板？

Question

我在 MVC 中使用强类型 View ，现在已成功地按照我的喜好显示注册表单的所有编辑器。

问题是我有一个包含 4 个单选按钮的单选组，当选择一个单选按钮时，我需要隐藏一些绑定(bind)到强类型属性字段的编辑器。

我可以创建一个像这样的 JavaScript 函数

if(radiobonnton1.value = cehcked){
   //Hide not used fields
   //Show used fields
}
else if(radiobonnton2.value = cehcked){
 ...
}
...

问题在于，它将是一个很大的函数，而且我不确定如果隐藏了无效的编辑器，MVC 验证将如何处理它？还可以提交吗？

这真的是正确的方法吗？

致以诚挚的问候

Answer 1

我现在添加了这个 javascript 方法:

$(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);

                    }


            })


        });

单选按钮在从服务器到客户端的验证失败时正确设置，但在手动更改单选按钮之前不会运行 JavaScript？