bootstrap modalを使用してMVCのテーブルデータを編集する方法は？
MVCビューに、従業員の詳細を表示するテーブルがあります。編集機能を追加したいのですが、新しいページで開く代わりに、bootstrap modal。（ http：// Twitter.github.com/bootstrap/javascript.html#modals ）
ページでデータが既に利用可能であるため、ajaxを使用する必要はないと思います。選択した従業員のデータをbootstrapモーダルに渡し、同じ画面にポップアップするために、jqueryまたはかみそりのコードが必要だと思います。以下に私のコードを示します。ヘルプをいただければ幸いです。 。ありがとう
@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>
確かに2つの可能性があります。AJAXを使用する場合と使用しない場合です。 AJAXなしでそれを行う場合は、[編集]リンクのクリックイベントをサブスクライブし、テーブルからモーダルに値をコピーして、最後にモーダルを表示できます。
編集リンクにいくつかのクラスを与えることから始めます：
<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化する必要があるかもしれません。
{{！-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>