Question

我有一个表单，我希望用户使用单选按钮选择公司或个人用户。根据选择，我想显示和隐藏某些输入字段，如BirthDate，Gender等（适用于单个用户但不适用于公司）。我尝试了不同的方法，但每个方法都存在一些或其他问题。

在视图中使用Html.Partial

    <div class="companyDiv" style="display: none;">
        @Html.Partial("Company")
    </div>
    <div class="individualDiv">
        @Html.Partial("Individual")
    </div>

单选按钮更改事件：

$("[name=IsIndividual]").on('change', function(){
                var $radio = $(this);

                var $individual = $radio.val();
                if ($individual == "True") {
                    $('.companyDiv').hide();                    
                   // $('.companyDiv').prop('disabled', true);
                    $('.individualDiv').show();                    
                  //  $('.individualDiv').prop('disabled', false);

                }
                else {
                    $('.individualDiv').hide();                   
                  //  $('.individualDiv').prop('disabled', true);
                    $('.companyDiv').show();                   
                 //   $('.companyDiv').prop('disabled', false);

                }
            });

使用这种方法，一切都在视图中很好地加载，但是当我发布它时，两个部分中存在的字段在控制器中变为空。两个部分中具有相同字段的原因是因为我想以不同的方式使用相同的字段。示例 - 我有一个firstName字段，我将其用作个人用户的名字，但在公司的情况下我想用它来捕获两个案例中带有不同标签和验证的名称。

使用Ajax方法

主页

    $(function(){
        $("[name=IsIndividual]").on('change', function(){
            var $radio = $(this);
            $.ajax({
                url:'@Url.Action("GetType", "Customers")',
                data: { IsIndividual: $radio.val() },
                type: 'GET',
                success: function(data){
                    $("#loadpartial").html(data);
                }
            });

        });
    });

控制器

    [HttpGet]
    public ActionResult GetType(bool IsIndividual)
    {
        if (IsIndividual)
        {
            return PartialView("Individual");
        }
        else
        {
            return PartialView("Company");
        }
    }

部分

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/plugins/select2")
    @Scripts.Render("~/plugins/dataPicker")

    <script type="text/javascript">


        $(document).ready(function () {

            $('.datepicker').datepicker({
                format: 'dd-M-yyyy',
                startView: 2,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                showClose: true,
                showClear: true,
                toolbarPlacement: 'top'
            }
                ); 
});
    </script>

}

但在这种情况下，像datepicker这样的控件不起作用。因为我尝试将脚本从主页移动到部分页面，所以我不确定我在做错了什么。

此外，由于我对此非常陌生，我不确定实现这一目标的最佳做法是什么。无论是2种方法还是其他方法。

Answer 1

使用部分视图时，问题很可能是元素'name'属性未使用正确的前缀设置。检查渲染的html，看看根据不属于partial的元素，从partial获取的名称是否正确。如果它们与模型绑定器所期望的不匹配，那么它们在控制器中将为空。

对于Ajax方法，问题是您正在动态加载元素，以便在调用datepicker函数后将它们添加到DOM中，因此它不会应用于它们。您应该在Ajax调用的success函数中调用datepicker函数，而不是document.ready函数。然后应该使用datepicker。

要实际回答你的问题，在这种特殊情况下，我会推荐ajax路线，因为你只会加载用户选择的内容。但两种方法都没问题。

在asp.net mvc 5中为条件输入创建表单的最佳方法是什么。使用div并渲染部分或Ajax

1 个答案: