jQuery MVC中如何使用bootstrap模式编辑表数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15728474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use bootstrap modal to edit the table data in MVC?
提问by Ren
I have a table in MVC view that displays employee details. I'd like to add an edit functionality, but instead of opening it in a new page, I'd like to show it using a bootstrap modal. (http://twitter.github.com/bootstrap/javascript.html#modals)
我在 MVC 视图中有一个表，显示员工详细信息。我想添加编辑功能，但不是在新页面中打开它，而是想使用引导模式显示它。（http://twitter.github.com/bootstrap/javascript.html#modals）
I don't think I have to use ajax since the data is already available on the page. I think I need to some jquery or razor code to pass the selected employee's data to the bootstrap modal, and pop it up on the same screen. Below is my code. Any help would be greatly appreciated. Thanks
我不认为我必须使用 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>
回答by Darin Dimitrov
There are indeed 2 possibilities: with or without AJAX. If you want to do that without AJAX you could subscribe to the click event of the Edit link and then copy the values from the table to the modal and finally show the modal.
确实有两种可能性：有或没有 AJAX。如果你想在没有 AJAX 的情况下做到这一点，你可以订阅 Edit 链接的点击事件，然后将表中的值复制到模态，最后显示模态。
So start by giving your edit link some class:
因此，首先为您的编辑链接提供一些类：
<a href="#" class="btn edit">Edit</a>
that you could subscribe to:
您可以订阅：
$('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;
});
This assumes that you have given proper CSS classes to the <td>elements and the input fields in your modal.
这假设您已经为<td>元素和模式中的输入字段提供了适当的 CSS 类。
If you wanted to use AJAX you could generate the link like that:
如果你想使用 AJAX，你可以生成这样的链接：
@Html.ActionLink("Edit", "Edit", "Employees", new { id = employee.Id }, new { @class = "btn edit" })
and then you subscribe to the click event of this button and trigger the AJAX request:
然后订阅这个按钮的点击事件并触发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;
});
you will have a simple placeholder for the modal in your main view that will harbor the details:
您将在主视图中有一个简单的模态占位符，它将包含详细信息：
<div id="myModal"></div>
The controller action that will be hit should fetch the employee record using the id an dpass it to a partial view:
将被命中的控制器操作应该使用 id 获取员工记录并将其传递给局部视图：
public ActionResult Edit(int id)
{
Employee employee = repository.Get(id);
EmployeeViewModel model = Mapper.Map<Employee, EmployeeViewModel>(employee);
return PartialView(model);
}
and finally the corresponding partial:
最后是相应的部分：
@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>
Obviously you will also need to wrap the input fields into an Html.BeginFormthat will allow you to send the updated details of the employee to the server. It might also be necessary to AJAXify this form if you want to stay on the same page.
显然，您还需要将输入字段包装到Html.BeginForm允许您将员工的更新详细信息发送到服务器。如果您想停留在同一页面上，可能还需要 AJAX 化此表单。
回答by MD. MOMINUL ISLAM
{{!--If you use laravel 5.8 then you can use my formula--}}
{{!--如果你使用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')}}" width="100">
@else
<img style="width: 100%"
src="{{asset('uploads/avatar')}}/{{$ourTeam->avatar}}"
width="100" height="200">
@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>
