如何使用 bootstrap modal 编辑 MVC 中的表格数据？
Posted
技术标签:
【中文标题】如何使用 bootstrap modal 编辑 MVC 中的表格数据？【英文标题】：How to use bootstrap modal to edit the table data in MVC? 【发布时间】：2013-03-21 15:27:05 【问题描述】：我在 MVC 视图中有一个显示员工详细信息的表。我想添加一个编辑功能，但我不想在新页面中打开它，而是想使用引导模式显示它。 (http://twitter.github.com/bootstrap/javascript.html#modals)
我认为我不必使用 ajax，因为数据已经在页面上可用。我想我需要一些 jquery 或 razor 代码将所选员工的数据传递给引导模式，并在同一屏幕上弹出它。下面是我的代码。任何帮助将不胜感激。谢谢
@Foreach(var item in Model.Employees)
<tr>
<td>@User.Identity.Name
</td>
<td>@item.FirstName
</td>....other columns
<td><a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a>
<td>
</tr>........other rows
**Bootstrap Modal**
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Employee</h3>
</div>
<div class="modal-body">
<p>Selected Employee details go here with textbox, dropdown, etc...</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
【问题讨论】：
【参考方案1】：确实有两种可能性：有或没有 AJAX。如果你想在没有 AJAX 的情况下这样做，你可以订阅 Edit 链接的 click 事件，然后将值从表复制到模态，最后显示模态。
所以首先给你的编辑链接一些类：
<a href="#" class="btn edit">Edit</a>
您可以订阅：
$('a.edit').on('click', function()
var myModal = $('#myModal');
// now get the values from the table
var firstName = $(this).closest('tr').find('td.firstName').html();
var lastName = $(this).closest('tr').find('td.lastName').html();
....
// and set them in the modal:
$('.firstName', myModal).val(firstName);
$('.lastNameName', myModal).val(lastName);
....
// and finally show the modal
myModal.modal( show: true );
return false;
);
这假设您已为 <td> 元素和模态框中的输入字段提供了适当的 CSS 类。
如果你想使用 AJAX，你可以像这样生成链接：
@Html.ActionLink("Edit", "Edit", "Employees", new id = employee.Id , new @class = "btn edit" )
然后你订阅这个按钮的点击事件并触发AJAX请求：
$('a.edit').on('click', function()
$.ajax(
url: this.href,
type: 'GET',
cache: false,
success: function(result)
$('#myModal').html(result).find('.modal').modal(
show: true
);
);
return false;
);
您将在主视图中有一个简单的模态占位符，其中包含详细信息：
<div id="myModal"></div>
将被命中的控制器操作应该使用 id 获取员工记录并将其传递给部分视图：
public ActionResult Edit(int id)
Employee employee = repository.Get(id);
EmployeeViewModel model = Mapper.Map<Employee, EmployeeViewModel>(employee);
return PartialView(model);
最后是相应的部分：
@model EmployeeViewModel
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Edit Employee</h3>
</div>
<div class="modal-body">
<div>
@Html.LabelFor(x => x.FirstName)
@Html.EditorFor(x => x.FirstName)
</div>
<div>
@Html.LabelFor(x => x.LastName)
@Html.EditorFor(x => x.LastName)
</div>
...
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
显然，您还需要将输入字段包装到 Html.BeginForm 中，这样您就可以将更新后的员工详细信息发送到服务器。如果您想留在同一页面上，可能还需要对此表单进行 AJAX 化。
【讨论】：
谢谢。你能告诉我ajax方法吗？我当然也很想知道这种方法。顺便说一句，在发回数据时，我需要使用员工 ID 编辑它的数据库。那么，我是否应该将员工 ID 作为视图中的隐藏元素？ 使用 AJAX 方法，您可以将模态的内容放在部分内容中。然后，当单击 Edit 链接时，您对控制器操作执行 AJAX 请求并发送当前员工 ID。然后，控制器操作将使用此 id 获取相应的记录并将其传递给部分视图。在您的 AJAX 调用的成功回调中，您将把这部分内容注入到 DOM 中。 这似乎重定向到只有部分视图的页面。有谁知道如何解决这个问题？【参考方案2】：!--如果你使用laravel 5.8那么你可以使用我的公式--
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead class=" text-primary">
<th>
Name
</th>
<th>
Designation
</th>
<th>
Avatar
</th>
<th class="text-right">
Action
</th>
</thead>
<tbody>
@foreach($ourTeams as $ourTeam)
<tr>
<td>
$ourTeam->name
</td>
<td>
$ourTeam->designation
</td>
<td>
@if(empty($ourTeam->avatar))
<img src="asset('avatar/logo.png')" >
@else
<img style="width: 100%"
src="asset('uploads/avatar')/$ourTeam->avatar"
>
@endif
</td>
<td class="text-right">
<!-- Button trigger modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#editModal$ourTeam->id">
Edit
</button>
<!-- Modal -->
<div class="modal fade" id="editModal$ourTeam->id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Team</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="" method="post" enctype="multipart/form-data">
<div class="modal-body">
@csrf
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" value="$ourTeam->name" name="name" id="name">
</div>
<div class="form-group">
<label>Designation:</label>
<input type="text" class="form-control" value="$ourTeam->designation" name="designation" id="designation">
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="avatar" id="avatar"><br>
<label class="custom-file-label" for="avatar">Upload Photo</label>
</div>
</div >
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<a href="" class="btn btn-danger">Delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
$ourTeams->links()
</div>
</div>
【讨论】：
以上是关于如何使用 bootstrap modal 编辑 MVC 中的表格数据？的主要内容，如果未能解决你的问题，请参考以下文章
将 Django 和 Bootstrap 5 Modal 与 Ajax 结合使用
在 Django Bootstrap Modal 窗口中编辑记录