使用jqueryui在mvc 4中打開模態窗口使用jqueryui

Question

我想根據主機頁面發送的參數動態加載模態窗口。主機頁面將在表格中具有一組編輯鏈接。點擊任何編輯鏈接應打開一個窗口，其中包含基於發送的行ID的相應數據。下面的代碼不起作用。我需要什麼樣的變化，使以至於當我點擊編輯鏈接，我可以給一個rowid到「dialogMsg」 DIV層，使得數據可以動態地放置在它

<div id="dialogMsg" title="Editing " + StudentFirstName > 
      Show other student details here 
</div> 

<table > 
<tr> 
    <td> 
     James 
    </td> <td><a href="#" id="editlink">Edit</a></td> 
</tr> 
<tr> 
    <td> 
     John 
    </td> <td><a href="#" id="editlink">Edit</a></td> 
</tr> 
<tr> 
    <td> 
     Doe 
    </td> <td><a href="#" id="editlink">Edit</a></td> 
</tr> 
</table> 

<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     $("#dialogMsg").dialog({ 
      autoOpen: false, 
      height: 300, 
      width: 350, 
      modal: true, 
      buttons: { 
       "Create an account": function() { 
        var bValid = true; 

        $(this).dialog("close"); 

       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 

     }); 


     $('#editlink') 
     .click(function() { 
      $('#dialogMsg').dialog('open'); 
     }); 
    }); 
</script> 

Answer 1

我已經做了一些改動您的代碼：

<div id="dialogMsg" title="Editing ">Show other student details here</div> 
<table> 
    <tr> 
     <td>James</td> 
     <td> 
      <a href="#" class="editlink">Edit</a> 
      <input type="javascript" class="personId" value="1" /> 
     </td> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td> 
      <a href="#" class="editlink">Edit</a> 
      <input type="javascript" class="personId" value="2" /> 
     </td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td> 
      <a href="#" class="editlink">Edit</a> 
      <input type="javascript" class="personId" value="2" /> 
     </td> 
    </tr> 
</table> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#dialogMsg").dialog({ 
      autoOpen: false, 
      height: 300, 
      width: 350, 
      modal: true, 
      buttons: { 
       "Create an account": function() { 
        var bValid = true; 

        $(this).dialog("close"); 

       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 

     }); 


     $('.editlink').click(function() { 
      $('#dialogMsg') 
       .dialog('option', 'title', "Editing " 
        + $(this).closest('tr').find('td:first').text()) 
       .dialog('open'); 

      var personId = $(this).closest('tr').find('.personId').val(); 
      // work it out with the ID here 
     }); 
    }); 
</script> 

變化做：

1. 移動的標題給JavaScript。您不能像這樣設置標題屬性<div id="dialogMsg" title="Editing " + StudentFirstName >。

2. 更改Edit鏈接的id屬性爲class屬性。對於頁面中的每個元素，id必須是唯一的。

3. 在JavaScript中設置對話框標題。 $(this).closest('tr').find('td:first').text()).dialog('open');。在這裏，我獲取最近的父代tr標籤並獲取第一個td子標籤的文本。

編輯：

增加了對CSS類ID隱藏字段。該類可以在jQuery select中用於獲取ID。