MVC3-只有第一行链接能很好地与Jquery Modal Dialog配合使用
MVC3 - Only first row link works well with Jquery Modal Dialog
使用MVC3、Razor、Jquery、Javascript。下面的代码循环显示一个包含字段和链接的表结构。每行上的链接都会触发一个Jquery Modal对话框,该对话框以弹出窗口的形式显示部分视图页面。但是弹出对话框只适用于第一行。。。从第二行向下的链接将页面打开为一个完整的网页,而不是一个弹出的模式对话框。如何修复。。谢谢你的帮助。
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Category)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { id = "modalEdit" }) |
</td>
</tr>
这是Jquery模态对话框代码。
<script type="text/javascript">
$(document).ready(function () {
//initialize the dialog
$("#resultEdit").dialog({ modal: true, width: 300, resizable: true, position: 'center', title: 'Edit Information', autoOpen: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
});
$(function () {
$('#modalEdit').click(function () {
//load the content from this.href, then turn it into a dialog.
$('#resultEdit').load(this.href).dialog('open');
return false;
});
});
这可能是因为所有编辑链接都有相同的id!
这将使jquery的行为高度不可预测!
给你的编辑链接一个共享类,像这样:
@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" })
并将您的选择器更改为:
$('.modalEdit').click(function () {
尝试更改链接以使用类而不是id。
例如
@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" })
和
$('.modalEdit').click(function () ...
不能有多个具有相同ID的元素。
请改用类名。
相关文章:
- Jquery Modal表单登录与AJAX-ASP经典上的IE 9
- jQuery Modal Dialog无法使用回发
- 如何使用jQuery&Zurb Foundation 5 Reveal Modal
- Jquery and Bootstrap Modal
- jQuery Modal Popup-回发后输入类型设置为null
- Jquery modal imagen with zoom
- jQuery-bootgrid modal dialog
- 如何在Bootstrap Modal上使用Vue.js渲染插件jQuery(作为工具提示和Switchery)
- jQuery modal-dialog , buttons, 重定向到 link, 在 jquery/js 中传递 PH
- Jquery Modal/Dialog表单不起作用
- BootStrap Django Jquery Modal在Ajax调用提交时未关闭
- 在简单模式中,取消单击时不会调用onClose事件..当我在simple-modal上加载另一个jquery对话框时
- 使用 Codeigniter 和 jquery 在 Modal Bootstrap 3 中的 DB 中填充字段
- jQuery将鼠标点击从VNC转移到modal
- Bootstrap Modal 在使用 jQuery 打开时不可滚动
- 等到