2016-04-21 82 views
0

我在我的MVC應用程序中應用了一個管理面板模板。然後我根據該模板設計更改視圖。

這是在該模板中的示例表單設計。我選擇了水平表單設計併爲我的表單應用相同的設計。 Sample forms in template

我已編輯的視圖

My Area View

見上述圖像沒有正確對準和示出了i的所有都失敗視圖中使用的所有的插件。由於這個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> 

我盡我最大的努力來解釋這個問題。請任何人幫我解決這個問題。

提前謝謝..

+0

你能分享你的腳本嗎? –

+0

哪個腳本要清晰地告訴我即時分享 – Susan

+0

向我們展示'$(document).ready ...'部分代碼的聲明。 –

回答

0

你應該引導之前添加引用的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> 
0

你把所有其他的js組件之前導入jQuery和jQuery UI的。其他組件可以使用Jquery庫之前。

+0

這意味着我必須在所有插件加載正確之前導入所有j查詢和j查詢ui插件Magdi – Susan

+0

是的,您可以在其他庫之前導入所有Jquery插件 –

+0

ok讓我試試 – Susan