Question

我有一个bootstrap模板，想在我的asp.net mvc 5项目中使用它。在_layout页面中我有以下代码：

      <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
    <!-- BEGIN CORE PLUGINS -->
    <!--[if lt IE 9]>
    <script src="../../Template/metronic/assets/global/plugins/respond.min.js"></script>
    <script src="../../Template/metronic/assets/global/plugins/excanvas.min.js"></script>
    <![endif]-->
    <script src="../../Template/metronic/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
    <script src="../../Template/metronic/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->
@RenderSection("FEATURED", true)
    <script>
        jQuery(document).ready(function () {
            Metronic.init(); // init metronic core componets
            Layout.init(); // init layout
            QuickSidebar.init() // init quick sidebar
            Index.init();
            Index.initDashboardDaterange();
            Index.initJQVMAP(); // init index page's custom scripts
            Index.initCalendar(); // init index page's custom scripts
            Index.initCharts(); // init index page's custom scripts
            Index.initChat();
            Index.initMiniCharts();
            Index.initIntro();
            Tasks.initDashboardWidget();
        });
    </script>
    <!-- END JAVASCRIPTS -->

对于名为feature的部分，我在子页面中有这些代码

<!-- END PAGE CONTENT-->
@section featured{
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/jquery-validation/js/additional-methods.min.js"></script>
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/select2/select2.min.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="../../../../Template/metronic/assets/global/scripts/metronic.js" type="text/javascript"></script>
    <script src="../../../../Template/metronic/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
    <script src="../../../../Template/metronic/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
    <script src="../../../../Template/metronic/assets/admin/pages/scripts/form-wizard.js"></script>
    <!-- END PAGE LEVEL SCRIPTS -->
    <script>
        jQuery(document).ready(function () {
            // initiate layout and plugins
            FormWizard.init();
        });
    </script>
    <!-- END JAVASCRIPTS -->}

在子页面中，我创建了一个向导表单来获取用户信息，并且有一个这样的表单：

                            <form action="#" class="form-horizontal" id="submit_form" method="POST">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Username <span class="required">
                                                    * </span>
                                                    </label>
                                                    <div class="col-md-4">
                                                        <input type="text" class="form-control" name="username"/>
                                                        <span class="help-block">
                                                        Provide your username </span>
                                                    </div>
                                                </div>
</form>

客户端验证效果最好但是当我将输入更改为razor时，输入验证无法正常工作

                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        Username <span class="required">
                                                            *
                                                        </span>
                                                    </label>
                                                    <div class="col-md-8">
                                                        @Html.TextBoxFor(model => model.karkonan.Name, new { @class = "form-control" })
                                                        @Html.ValidationMessageFor(model => model.karkonan.Name)
<span class="help-block">
                                                            Provide your username
                                                        </span>
                                                    </div>
                                                </div>

在 form-wizard.js 中，我想添加代码来定义验证 karkonan.Name 的规则，但它的名称对于javascript无效。

username: {
                        minlength: 5,
                        required: true
                    }
karkonan.Name: {
                        minlength: 5,
                        required: true
                    }

当我用这个替换表单标签时：

@using (Html.BeginForm("create", "karmand", FormMethod.Post, new { @class="form-horizontal",@id="submit_form"}))
                {
                    @Html.AntiForgeryToken()

当我转到其他向导步骤时，

无验证工作。

Answer 1

使用MVC和razor，当你使用像@ Html.For这样的东西时，你的验证需要以属性的形式反对你的服务器端C＃模型。

所以该物业名称＆＃39;在＆＃39; karkonan＆＃39; （C＃类名称应该以大写字母开头）需要有一个＆＃39; [必需]＆＃39;属性例如。 MVC会将客户端验证属性放入生成的html中（后者将在客户端上使用jquery不显眼的验证。在服务器的控制器中，您还要检查有效的模型状态。）

你可以连接自己的一些客户端验证，如果你检查剃刀生成的输入的html，元素将获得有意义的id，但它可能更容易使用什么＆＃39 ; s内置。

在bootstrap和asp.net mvc5中进行验证

1 个答案: