Question

我在我的MVC应用程序中应用了一个管理面板模板。然后我根据模板设计更改视图。

这是该模板中的示例表单设计。我选择水平表单设计并为我的表单应用相同的设计。

我的编辑视图

请参见上图，没有正确的对齐方式，并显示我在视图中使用的所有插件都失败了。因为Jquery没有定义，$没有定义错误。

我的观看代码

标题中的插件

   @model Sample_Customer.Area
   @using (Html.BeginForm())
   {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | General Form Elements</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no" name="viewport">

  <!-- jQuery 2.2.0 -->
  <script src="~/Scripts/jquery-2.2.0.min.js"></script>

  <!-- Bootstrap 3.3.6 -->
  <script src="~/Scripts/bootstrap.min.js"></script>
  <!-- FastClick -->
  <script src="../../plugins/fastclick/fastclick.js"></script>
  <!-- AdminLTE App -->
  <script src="../../dist/js/app.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>


    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
    folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">      </script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>

正文代码

    <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
    <div class="content-wrapper">
    <section class="content-header">
    <h1>
    General Form Elements
    <small>Preview</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="#">Forms</a></li>
    <li class="active">General Elements</li>
  </ol>
       </section>

   <!-- Main content -->
   <section class="content">
     <div class="row">
     <div class="col-md-6">
     <div class="box box-info">
     <div class="box-header with-border">
     <h3 class="box-title">Area</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form class="form-horizontal">
      <div class="box-body">
      <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">DisplayName</label>

  <div class="col-sm-10">
  @Html.TextBoxFor(model => model.DisplayName, new { @class = "form-control", type = "text", id = "Date" })
  @Html.ValidationMessageFor(model => model.DisplayName)
              </div>
            </div>
  <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">PrintName</label>
    <div class="col-sm-10">
  @Html.TextBoxFor(model => model.PrintName, new { @class = "form-control", type = "text", id = "Date" })
  @Html.ValidationMessageFor(model => model.PrintName)
              </div>
            </div>

 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">City</label>
 <div class="col-sm-10">
 @Html.DropDownList("CityID", null, "Select", new { @class = "form-control" })
              </div>
             </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
            <button type="submit" class="btn btn-default">Clear</button>
            <button type="submit" class="btn btn-info pull-right">Save</button>
            </div>
            <!-- /.box-footer -->
           </form>
           </div>
          </div>
         </div>
  </section>
  </div>
  <footer class="main-footer">
  <div class="pull-right hidden-xs">
  <b>Version</b> 2.3.3
  </div>
  <strong>Copyright &copy; 2014-2015 <a  href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
reserved.
  </footer>
  <div class="control-sidebar-bg"></div>
  </div>
  </body>
   }

我看到很多关于这个错误的文章。他们中的许多人说在引导程序之前加载java脚本。在我把这个下面的j查询文件放在页脚之下。然后我再次将这些插件放入标题中。但我仍然遇到了这个错误。

  <!-- jQuery 2.2.0 -->
  <script src="~/Scripts/jquery-2.2.0.min.js"></script>

  <!-- Bootstrap 3.3.6 -->
  <script src="~/Scripts/bootstrap.min.js"></script>
  <!-- FastClick -->
  <script src="../../plugins/fastclick/fastclick.js"></script>
  <!-- AdminLTE App -->
  <script src="../../dist/js/app.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

我尽力解释这个问题。请任何人帮我解决这个问题。

提前谢谢..

Answer 1

您应该在引导引用之前添加jquery-ui引用。按照以下顺序：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script>

Answer 2

您必须在所有其他Js组件之前导入Jquery和Jquery UI。在其他组件可以使用Jquery库之前。

没有定义Jquery，并且$ MVC4中没有定义错误

2 个答案: