jquery - 如何处理mvc3中radiobuttonfor的点击或更改事件

Question

我正在创建一个简单的用户注册表单。用户可以注册为公司或个人。以下是使用 RadioButtonFor html 帮助程序的注册表单的相关 View 。我已经定义了要在 javascript 中使用的 id 属性:

    @model LayoutTest.ViewModels.ProjectUser
    <script>
    $(function () {
    $("#Class_UserType").change(function(){
        var value = $(this).val();
        if (value == 1) {
            $('#Person').hide();
        }
        else if (value == 2) {
            $('#Company').hide();
        }
      });
    });
    </script>
    @using (Html.BeginForm("Create", "Project", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
   @Html.ValidationSummary(true)
   <fieldset>
   <div class="new_row">
        <div class="editor-label">
            @Html.LabelFor(model => Model.UserType)
        </div>
        <div class="editor-field">
            <div class="editor-field">
                @Html.RadioButtonFor(model => model.UserType, (int)UserType.Company, new { @id= "Class_UserType" }) Company
                @{Html.ValidateFor(model => model.UserType);}
            </div>
            <div class="editor-field">
                @Html.RadioButtonFor(model => model.UserType, (int)UserType.Individual, new { @id = "Class_UserType" }) Individual 
                @{Html.ValidateFor(model => model.UserType);}
            </div>
        </div>
    </div>
    <div class="Company">
          HTML Tags inside
    </div>
    <div class="Person">
        HTML Tags inside
    </div>

此代码在正常工作时应隐藏相应的 div 公司/个人。我看过很多样本，但无法弄清楚我在这里做错了什么!任何帮助将不胜感激。

以下是相关的html输出:

    <div class="new_row">
        <div class="editor-label">
            <label for="UserType">*User Type</label>
        </div>
        <div class="editor-field">
            <div class="editor-field">
                <input data-val="true" data-val-number="The field *User Type must be a number." data-val-required="The *User Type field is required." id="Class_UserType" name="UserType" type="radio" value="1" /> Company
            </div>
            <div class="editor-field">
                <input checked="checked" id="Class_UserType" name="UserType" type="radio" value="2" /> Individual 
            </div>
        </div>
    </div>

Answer 1

以下对我有用:

    $('.UserType').change(function () {
        var value = $(this).filter(':checked').val();
        if (value == "1") {
            $('.Person').hide();
            $('.Company').show(500);
        }
        else if (value == "2") {
            $('.Company').hide();
            $('.Person').show(500);
        }
    });

首先，我需要在我的 html 中定义一个通用类:

    <div class="editor-field">
                @Html.RadioButtonFor(model => model.UserType, (int)UserType.Company,  new { @id= "Class_UTCompany", @class="UserType" }) Company
                @{Html.ValidateFor(model => model.UserType);}
            </div>
            <div class="editor-field">
                @Html.RadioButtonFor(model => model.UserType, (int)UserType.Individual, new { @id = "Class_UTIndividual", @class="UserType" }) Individual 
                @{Html.ValidateFor(model => model.UserType);}
     </div>

其次，我期待 int 中的值，这导致了错误。我能够通过放置调试器找到它；在我的 javascript 代码中。