使用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。