2017-09-18 64 views
0

我試圖使用模式來提交從MVC部分視圖派生的窗體。部分視圖中的表單獨立工作,但是當我無法讓模態部分工作時。jQuery 3.2.1 MVC部分視圖模式

包括:

<script src="/Scripts/jquery-3.2.1.js"></script> 
<script src="/Scripts/bootstrap.js"></script> 

在我的主視圖模態:

<div class="modal hide fade in edit-redirect-modal" id="editModal"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h5 class="modal-title">Edit Redirect</h5> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
      </div> 
      <div class="modal-body"> 
       Loading... 
      </div> 
      <div class="modal-footer"> 
       <input type="submit" value="Save" /> 
      </div> 
     </div> 
    </div> 
</div> 

在我的主視圖腳本:

<script type="text/javascript"> 
$('.editRedirect').on('click', function (e) { 
    e.preventDefault(); 
    $('.edit-redirect-modal').modal('show').find('.modal-body').load($(this).attr('href')); 
}); 

類「editRedirect」的示例鏈接:

<a href="/Admin/Edit/8154" class="editRedirect" data-target="editModal" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></a> 

當我單擊鏈接時,屏幕變暗,但模式不出現。控制檯引發此錯誤:

> Syntax error, unrecognized expression: # 
at Function.Sizzle.error (jquery-3.2.1.js:1580) 
at Sizzle.tokenize (jquery-3.2.1.js:2232) 
at Sizzle.select (jquery-3.2.1.js:2659) 
at Function.Sizzle [as find] (jquery-3.2.1.js:884) 
at jQuery.fn.init.find (jquery-3.2.1.js:2922) 
at jQuery.fn.init (jquery-3.2.1.js:3032) 
at jQuery (jquery-3.2.1.js:98) 
at getParent (bootstrap.js:798) 
at HTMLAnchorElement.<anonymous> (bootstrap.js:782) 
at Function.each (jquery-3.2.1.js:362) 

更新:我改變了我的情態和腳本此,不再得到任何控制檯錯誤,但是點擊鏈接仍然變暗,沒有對話的內容頁面。

<div class="modal fade edit-redirect-modal" id="editModal"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h5 class="modal-title">Edit Redirect</h5> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
      </div> 
      <div class="modal-body"> 
       Loading... 
      </div> 
      <div class="modal-footer"> 
       <input type="submit" value="Save" /> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     var dialog = $("#editModal").dialog({ 
      autoOpen: false, 
      height: 400, 
      width: 350, 
      modal: true, 
      buttons: { 
       Cancel: function() { 
        dialog.dialog("close"); 
       } 
      }, 
      close: function() { 

      } 
     }); 

     $('.editRedirect').on('click', function (e) { 
      e.preventDefault(); 
      $('#editModal').modal('show').find('.modal-body').load($(this).attr('href')); 
     }); 
    }); 
</script> 

回答

0

我結束了使用這種方法的可用結果,雖然有一個bug關閉模式和選擇另一個項目重新打開模式與以前的數據。

主持人:

<a href="/Admin/Edit/@item.Id" class="editRedirect" data-target="editModal" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp; 

事業部:

<div id="editDialog" title="Edit Redirect" style="display:none;"> 
<div id="editModal"></div> 

的JavaScript:

$(".editRedirect").click(function() { 
     $("#editModal").parent('div').load($(this).attr("href")); 
     $("#editDialog").dialog({ 
      width: 400, 
      height: 450, 
      modal: true 
     }); 

     return false;