2017-10-04 8 views
2

私は何時間も岩に頭を打ちました。私はASP.Net Core 2.0 MVC Webアプリケーションを開発しており、Nginxを使ってUbuntu 16.04で実行しています。実稼働中にあらゆるタイプのモーダルダイアログを開くまで、すべてが美しく機能します。ダイアログのデバッグは完全に機能します。エラーや問題なしで開閉できます。しかし、プロダクション環境でそれらを開くと、ページのコンテンツは消え、ブラウザはページを永久にロードしているかのように動作します。デバッガを見ると、FirebugやChromeにエラーが表示されることはありません。私はグーグルとグーグルして....ASP.Net Core 2.0 MVCのウェブサイトブートストラップモーダルダイアログを開くと、スタイルとコンテンツが消えます

誰もがアイデアをお持ちですか?ここでのモーダルのためのコードは次のとおりです。

@model erp_jbitpro_cloud.Models.Customers.Customer 

@{ 
    Layout = "_LayoutPart"; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Create</title> 
</head> 
<body> 
    <div class="row"> 
     <div class="col-md-7"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="close"> 
        <span aria-hidden="true" class="glyphicon glyphicon-remove-circle"></span> 
       </button> 
       <h4 class="modal-title" id="mylabel">Editor</h4> 
      </div> 
      <form asp-action="Create" class="newDialogForm"> 
       <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
       <div class="form-group"> 
        <label asp-for="CustomerName" class="control-label"></label> 
        <input asp-for="CustomerName" class="form-control" /> 
        <span asp-validation-for="CustomerName" class="text-danger"></span> 
       </div> 
       <div class="form-group"> 
        <label asp-for="Address1" class="control-label"></label> 
        <input asp-for="Address1" class="form-control" /> 
        <span asp-validation-for="Address1" class="text-danger"></span> 
       </div> 
       <div class="form-group"> 
        <label asp-for="Address2" class="control-label"></label> 
        <input asp-for="Address2" class="form-control" /> 
        <span asp-validation-for="Address2" class="text-danger"></span> 
       </div> 
       <div class="form-group"> 
        <label asp-for="City" class="control-label"></label> 
        <input asp-for="City" class="form-control" /> 
        <span asp-validation-for="City" class="text-danger"></span> 
       </div> 
       <div class="form-group"> 
        <label asp-for="StateId" class="control-label"></label> 
        <select asp-for="StateId" class="form-control" asp-items="ViewBag.StateId"></select> 
       </div> 
       <div class="form-group"> 
        <label asp-for="ZipCode" class="control-label"></label> 
        <input asp-for="ZipCode" class="form-control" /> 
        <span asp-validation-for="ZipCode" class="text-danger"></span> 
       </div> 
       <div class="form-group"> 
        <label asp-for="Phone" class="control-label"></label> 
        <input asp-for="Phone" class="form-control" /> 
        <span asp-validation-for="Phone" class="text-danger"></span> 
       </div> 
       <div class="form-group"> 
        <label asp-for="Website" class="control-label"></label> 
        <input asp-for="Website" class="form-control" /> 
        <span asp-validation-for="Website" class="text-danger"></span> 
       </div> 
       <div class="form-group modal-footer"> 
        <input type="submit" value="Create" class="btn btn-success" /> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       </div> 
      </form> 
     </div> 
</div> 
</body> 
</html> 

誰もがここで起こって何ができるかについての任意のアイデアを持っている:

@model IEnumerable<erp_jbitpro_cloud.Models.Customers.Customer> 

@{ 
    Layout = "_LayoutPart"; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
</head> 
<body> 
    <script> 
     $(document).ready(function() { 
      debugger; 
      var url = ""; 
     }); 
    </script> 

<p> 
    <a asp-action="Create" class="newPopup btn btn-primary" data-toggle="modal" data-target="#editPopup">Create New</a> | 
    <a asp-action="Index" asp-controller="CustomerMgmnt" class="btn btn-primary">Back to Customer Management...</a> 
</p> 
<table class="table table-striped"> 
    <thead> 
     <tr> 
       <th> 
        @Html.DisplayNameFor(model => model.CustomerName) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.Address1) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.Address2) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.City) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.ZipCode) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.Phone) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.Website) 
       </th> 
      <th> 
       @Html.DisplayNameFor(model => model.State) 
      </th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
@foreach (var item in Model) { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.CustomerName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Address1) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Address2) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.City) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ZipCode) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Phone) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Website) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.State.Abbr) 
      </td> 
      <td> 
       <a asp-action="Edit" asp-route-id="@item.CustomerId" class="editPopup btn btn-success" data-toggle="modal" data-target="#editPopup">Edit</a> | 
       <a asp-action="Details" asp-route-id="@item.CustomerId" class="detailsPopup btn btn-default">Details</a> 
      </td> 
     </tr> 
} 
    </tbody> 
</table> 

    <div class="modal fade" id="editPopup" role="dialog" aria-labelledby="mylabel"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      </div> 
     </div> 
    </div> 

    <div class="newDialog"> 
    </div> 
    <div class="detailsDialog"> 
    </div> 

</body> 
</html> 

そしてここでは、モーダルへの負荷があること部分ですか?

+0

をあなたはすべてのエラーを取得している参照するには、ブラウザの開発ツールのコンソールを確認してください。また、私はネットワークのタブを調べて、必要なファイルがすべて正しくロードされていることを確かめた/呼び出しのための200 OK応答を得る – Shyju

+0

私はチェックし、ブートストラップのCSSとサイトのCSSファイルは200の代わりに304を表示している... 304 ?? – jforward5

+0

キャッシュに問題がありますか?キャッシュのクリアをテストし、問題が解決するかどうかを確認します。 – jforward5

答えて

0

うわー!だから私は@shyjuの提案のおかげで、この問題を解決しました!問題は、cssファイルがステータス304になっていたことです。プロダクションサイトでテンプレートの_Layoutファイルからデフォルトのリンクを使用していました。

オリジナル:

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" 
       asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" 
       asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> 
     <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> 

はそれを修正:ちょうど下のコードを参照してください。それを修正するもので、明確にするため

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" asp-append-version="true" /> 
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> 
関連する問題