我有一个数据列表，每个数据都有一个编辑，删除和＆amp ;;细节。我使用ajax从数据库中查询这些数据。而我现在想做的是每次点击任何一个按钮时，Modal都会弹出数据。
这是我的观点：
var id_modal = item.switches_info_id;
<td>
@Ajax.ActionLink("Actions", "Transaction", new { id=item.switches_info_id},
new AjaxOptions
{
HttpMethod = "Get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "edit-div",
}, new { @class= "link-list"})
</td>
<td>
<span data-toggle="tooltip" data-placement="top" title="Edit">
@Ajax.ActionLink(" ", "Edit", new { id=item.switches_info_id},
new AjaxOptions
{
HttpMethod = "Get",
UpdateTargetId = "Edit_Modal"+ item.switches_info_id,
}, new { @class= "fa fa-edit fa-lg", id="id_attr"}) ||
</span>
<span data-toggle="tooltip" data-placement="top" title="Details">
@Ajax.ActionLink(" ", "Details", new { id=item.switches_info_id},
new AjaxOptions
{
HttpMethod = "Get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "edit-div",
}, new { @class= "fa fa-plus-square fa-lg"}) ||
</span>
<span data-toggle="tooltip" data-placement="top" title="Delete">
@Ajax.ActionLink(" ", "Delete", new { id=item.switches_info_id},
new AjaxOptions
{
HttpMethod = "Get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "edit-div",
}, new { @class= "fa fa-trash-o fa-lg"})
</span>
</td>
</tr>
<tr>
<td><button data-toggle="modal" data-target="#Modal_Edit @id_modal" aria-hidden="true">@id_modal</button></td>
</tr>
<div class="modal fade" id="Edit_Modal @id_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Switch Info</h4>
</div>
<div class="modal-body">Sample
@Html.Action("Edit","Switch")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
在这个视图之上，我把我的代码调用到bootstrap中的模态函数。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Switch Info</h4>
</div>
<div class="modal-body">
@Html.Action("Edit","Switch")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
将添加bootstrap所需属性的Javascript：
<script type="text/javascript">
$('#id_attr').attr('data-toggle');
这是显示模态的代码：
@model InSys.Models.Switches_vw
<script src="~/Scripts/telephones.js"></script>
<script src="~/Scripts/datepicker.js"></script>
@using (Html.BeginForm("Edit", "Switch", FormMethod.Post)) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.Hidden("switches_info_id",Model.switches_info_id)
@Html.Hidden("switch_transactions_id",Model.switch_transactions_id)
@Html.Hidden("sw_trans_type",Model.sw_trans_type)
@Html.Hidden("sw_trans_by",Model.sw_trans_by)
@Html.Hidden("sw_trans_date",Model.sw_trans_date)
@Html.Hidden("sw_history_status",Model.sw_history_status)
@Html.HiddenFor(model => model.switches_info_id)
@Html.HiddenFor(model => model.created_by)
@Html.HiddenFor(model => model.created_date)
<table class="edit-table">
<caption id="pr-table"><b> EDIT INFORMATION </b></caption>
<tr>
<td class="i_name">Brand: </td><td class="td">@Html.DropDownList("brand_id")</td>
<td class="i_name">Model:</td> <td class="td"> @Html.DropDownList("model_id")</td>
<td class="i_name">Supplier:</td><td class="td">@Html.DropDownList("sw_suppliers_id", String.Empty)</td>
</tr>
<tr>
<td class="i_name">No of Ports: </td><td class="td">@Html.EditorFor(model => model.sw_no_of_ports)</td>
<td class="i_name">Serial Number:</td><td class="td">@Html.EditorFor(model => model.sw_serial_no)</td>
</tr>
<tr>
<td class="i_name">Mac Address:</td> <td class="td"> @Html.EditorFor(model => model.sw_mac_address)</td>
<td class="i_name">IP Address: </td><td class="td">@Html.Editor("sw_ip_address")</td>
</tr>
<tr>
<td class="i_name">Node Name:</td> <td class="td"> @Html.Editor("sw_node_name")</td>
<td class="i_name">Location: </td><td class="td">@Html.Editor("sw_location")</td>
</tr>
<tr>
<td class="i_name">Date Delivered:</td> <td class="td"> @Html.EditorFor(model => model.sw_delivery_date)</td>
<td class="i_name">End of Warranty: </td><td class="td">@Html.EditorFor(model => model.sw_warranty_end)</td>
</tr>
<tr>
<td class="i_name">POE:</td> <td class="td"> @Html.EditorFor(model => model.sw_poe)</td>
<td class="i_name">Active?</td><td class="td">@Html.EditorFor(model => model.is_active)</td>
</tr>
<tr>
<td class="i_name">Remarks: </td><td class="td">@Html.Editor("sw_remarks")</td>
</tr>
</table>
<p class="save">
@Html.ActionLink("Cancel", "Index", "Switch", new { @class="button"})
<input type="submit" value="Save" />
</p> }
但是，这段代码不起作用。单击“编辑”按钮后，不会弹出任何模态。我将如何实现这一目标？请帮忙。非常感谢。