ブートストラップモーダルポップアップが分割ビューでブレークする

Question

私は、検索結果を表示するための部分ビューの検索ビューを持っています。 モーダルポップアップをクリックするとハイパーリンクが開きます。

このシナリオでは、私のモーダルポップアップが壊れています。それはポップアップとしてもう開いておらず、すべてのスタイリングを失います。

私が間違っていることはわかりません。私は部分的なビューを使用しない場合、ポップアップが動作します。

パーシャルビュー_SearchCustomer.cshtml

@model PagedList.IPagedList<MDMWeb.Models.CustomerModel> 
@using PagedList; 
@using PagedList.Mvc; 

<table id="tblResult" class="table table-bordered table-striped table-hover sortable"> 
<thead> 
    <tr> 
     <th>@Html.Label("MDM ID")</th> 
     <th>@Html.Label("Customer Type")</th> 
     <th>@Html.Label("Title")</th> 
     <th>@Html.Label("First Name")</th> 
     <th>@Html.Label("Surname")</th> 
     <th>@Html.Label("Email")</th> 
     <th>@Html.Label("Mobile")</th> 
     <th>@Html.Label("Phone")</th> 
     <th>@Html.Label("Private Customer")</th> 
     <th>@Html.Label("Status")</th> 
    </tr> 
</thead> 
<tbody> 
    @foreach (var item in Model) 
    { 
     @Html.HiddenFor(model => item.code) 
     <tr> 
      <td><a data-modal="" href='@Url.Action("Edit","Customer",new { viewname = "Edit", mdmID = item.code })' title='@item.code'>@Html.DisplayFor(modelItem => item.code)</a></td> 
      <td> @Html.DisplayFor(modelItem => item.customerType) </td> 
      <td> @Html.DisplayFor(modelItem => item.title) </td> 
      <td> @Html.DisplayFor(modelItem => item.firstName) </td> 
      <td> @Html.DisplayFor(modelItem => item.lastName) </td> 
      <td> @Html.DisplayFor(modelItem => item.email) </td> 
      <td> @Html.DisplayFor(modelItem => item.mobile) </td> 
      <td> @Html.DisplayFor(modelItem => item.phone) </td> 
      <td> @Html.CheckBoxFor(modelItem => item.isPrivateCustomer) </td> 
      <td> @Html.DisplayFor(modelItem => item.status) </td> 
     </tr> 
    } 
</tbody> 
</table> 

@if (Model.PageCount > 1) 
{ 
    <div class="box-footer clearfix"> 
     <ul class="pagination pagination-sm no-margin pull-right"> 

     @Html.PagedListPager(Model, page => Url.Action("SearchCustomer", new   { page, pageSize = Model.PageSize, currentFilter = ViewBag.SearchCriteria }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.OnlyShowFivePagesAtATime, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "divResults", InsertionMode = InsertionMode.Replace }))     
    </ul> 
</div> 
} 

Search.cshtml

@model string 
@Scripts.Render("~/bundles/jquery") 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

@if (Request.IsAuthenticated) 
{ 
    using (Ajax.BeginForm("SearchCustomer", "Customer", new AjaxOptions 
    { 
     HttpMethod = "POST", 
     UpdateTargetId = "divResults", 
     InsertionMode = InsertionMode.Replace, 
    })) 
    { 
    <h2>@ViewBag.PageTitle</h2> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="box"> 
       <!-- /.box-header --> 
       <div class="box-header with-border" id="searchCriteria"> 
        <div class="row"> 
         <div class="col-md-1"><label>Created From</label></div> 
         <div class="form-group col-md-3"> 
          <div class="input-group date"> 
           <div class="input-group-addon"> 
            <i class="fa fa-calendar"></i> 
           </div> 
           <input type="text" class="form-control" id="datepickerfrom" name="datepickerfrom"> 
          </div> 
         </div> 
         <div class="col-md-1"> 
          <label class="pull-left">Created To</label> 
         </div> 
         <div class="form-group col-md-3"> 
          <div class="input-group date"> 
           <div class="input-group-addon"> 
            <i class="fa fa-calendar"></i> 
           </div> 
           <input type="text" class="form-control" id="datepickerto" name="datepickerto"> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-1"> 
          <label>System</label> 
         </div> 
         <div class="col-md-3"> 
          <select class="form-control" style="width: 100%;" name="sourcesystem"> 
           <option selected="selected">All</option> 
           <option>Salesforce</option> 
           <option>Pathway</option> 
          </select> 
         </div> 
         <div class="col-md-1"> 
          <label>Customer Type</label> 
         </div> 
         <div class="col-md-3"> 
          <select class="form-control" style="width: 100%;" name="customertype"> 
           <option selected="selected">All</option> 
           <option>Individual</option> 
           <option>Organisation</option> 
          </select> 
         </div> 
         <div class="col-md-3"> 
          <input type="submit" value="Search" /> 
         </div> 
        </div> 
       </div> 

       <!-- /.box-body --> 
       <div class="box-body" id="divResults"> 

       </div>  
      </div> 
      <!-- /.box --> 
     </div> 
    </div> 

    <div id='myModal' class='modal fade bs-example-modal-lg' tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
     <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
       <div id='myModalContent'></div> 
      </div> 
     </div> 
    </div> 

    @section scripts{ 
     @Scripts.Render("~/scripts/appjs/referenceds.js") 
     <script> 
      $(function() { 
       var currentDate = new Date(); 

       $('#datepickerto').datepicker({ 
        autoclose: true 
       }); 

       $("#datepickerto").datepicker("setDate", currentDate); 

       $('#datepickerfrom').datepicker({ 
        autoclose: true 
       }); 
       $("#datepickerfrom").datepicker("setDate", currentDate);    
      }) 
     </script> 
    } 
} 
} 

Answer 1

uはuはJavaScriptで行うか、jqueryのこの

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Movie Search</title> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
 
</head> 
 
<body> 
 

 
    <div class="container">  
 

 

 
      <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> 
 
    
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
     
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body" id="#modal-body"> 
 
      <p>Some text in the modal.</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 
    
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <script> 
 
     $(document).ready(function(){ 
 
      $("#myBtn").click(function(){ 
 
       $("#myModal").modal(); 
 
       $("#modal-body").html('@Url.Content("~/{controller}/{Action}/{ID}")'); 
 
      }); 
 
      
 
     }); 
 

 
     
 
    </script> 
 
</body> 
 
</html>

を試すことができ、それを行うカント

Answer 2

このコードを試してみてください、あなたのために動作します

<div id='myModalContent'> 
    @Html.Action("ActionName", "ControllerName") 
</div> 

or 

<div id='myModalContent'> 
@Html.Partial("_SearchCustomer") 
</div>