クリックしたボタンに応じてモーダルフォームを変更します

Question

ユーザーの情報を示す表があり、それぞれに編集ボタンがあります。

私は編集したいユーザーの詳細をモーダルフォームに表示したいが、リストから詳細を取得してモデルとしてモーダルに渡す方法はわかりません。私はあなたがこれを達成する方法を理解するのに役立ちます、試験サンプルを作成しました

@model MyApp.Models.User 
@{ 
    ViewBag.Title = "Users"; 
    var roles = new List<string> { "Manager", "Admin" }; 
    var userRoles = (List<string>)ViewData["userRoles"]; 
} 

<h2>@ViewBag.Title</h2> 

@if (userRoles.Any(u => roles.Contains(u))) 
{ 
    using (Html.BeginForm("Update", "Admin", FormMethod.Post, new { id = "update-form", value = "" })) 
    { 
    <div class="modal fade" id="user-editor" > 
     <div class="modal-header"> 
      <a class="close" data-dismiss="modal"><h3>&times;</h3></a> 
      <h3 id="modal-title">Edit User</h3> 
     </div> 
     <div class="modal-body"> 
      <div class="form-group"> 
       @Html.Label("Name", new { @class = "col-md-2 control-label" }) 
       <div class="col-md-10"> 
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" }) 
       </div> 
      </div> 
      <div class="form-group"> 
       @Html.Label("Age", new { @class = "col-md-2 control-label" }) 
       <div class="col-md-10"> 
        @Html.TextBoxFor(m => m.Age, new { @class = "form-control" }) 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <a class="btn" data-dismiss="modal">Close</a> 
      <input type="submit" class="btn btn-primary" value="Save Changes" /> 
     </div> 
    </div> 
    } 
} 

<table class="table-bordered table-hover" id="tbusers"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      @if (userRoles.Any(u => roles.Contains(u))) 
      { 
       <th>Edit</th> 
      } 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var u in users) 
     { 
      <tr id="@u.Id"> 
       <td>@u.Name</td> 
       <td>@u.Age</td> 
       @if (userRoles.Any(u => roles.Contains(u))) 
       { 
        <td><a type="button" class="btn edit-btn" href="#user-editor" data-toggle="modal">Edit</a></td> 
       } 
      </tr> 
     } 
    </tbody> 
</table> 

Answer 1

：

は、ここに私の図です。次のスクリプトを同じページ

で ActionMethodから個々の従業員のデータを設定/取得するための

<script src="~/Scripts/jquery-3.1.1.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 

JQuery AJAXコールを参照し、同じページで

@model IEnumerable<MvcApplication1.Models.Employee> 
@using MvcApplication1.Models; 
<h2>Index</h2> 
<table> 
@foreach (Employee item in Model) 
{ 
    <tr> 
     <td>@Html.ActionLink(@item.EmployeeName, "Name", new { id = item.ID })</td> 
     <td> 
      <button type="button" data-id='@item.ID' class="anchorDetail btn btn-info btn-sm" data-toggle="modal" 
     data-target="#myModal"> 
       Open Large Modal</button></td> 
    </tr> 
} 
</table> 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Details</h4> 
     </div> 
     <div class="modal-body"> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
    </div> 

従業員のリストが表示されます Index.cshtml

<script> 
$(document).ready(function() { 
    var TeamDetailPostBackURL = '/Employee/Details'; 
    $(document).on('click', '.anchorDetail', function() { 
     var $buttonClicked = $(this); 
     var id = $buttonClicked.attr('data-id'); 
     var options = { "backdrop": "static", keyboard: true }; 
     $.ajax({ 
      type: "GET", 
      url: TeamDetailPostBackURL, 
      contentType: "application/json; charset=utf-8", 
      data: { "Id": id }, 
      datatype: "json", 
      success: function (data) { 
       debugger; 
       $('.modal-body').html(data); 
       $('#myModal').modal(options); 
       $('#myModal').modal('show'); 

      }, 
      error: function() { 
       alert("Dynamic content load failed."); 
      } 
     }); 
    }); 
    $("#closbtn").click(function() { 
     $('#myModal').modal('hide'); 
    }); 
}); 

今、従業員のクラスを作成します（i '私は、ページ内にページをロードする必要があるので、私はPartialViewを返すよ

public ActionResult Index() 
{ 
    return View(emp);//sends a List of employees to Index View 
} 
public ActionResult Details(int Id) 
{ 
    return PartialView("Details", 
    emp.Where(x=>x.ID==Convert.ToInt32(Id)).FirstOrDefault()); 
} 

：Employeeという名前のコントローラおよびこれらのような2 ActionMethodsを作成

public class Employee 
{ 
    public int ID { get; set; } 
    public string EmployeeName { get; set; } 
} 

）EFを使用していないメートル。結果と

そしてモーダルダイアログのように表示されます：

あなたは従業員のインデックスページを実行し、訪問したとき、あなたはこのような画面が表示されます Details.cshtml

@model MvcApplication1.Models.Employee 
<fieldset> 
<legend>Employee</legend> 
<div class="display-label"> 
    @Html.DisplayNameFor(model => model.ID) 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.ID) 
</div> 
<div class="display-label"> 
    @Html.DisplayNameFor(model => model.EmployeeName) 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.EmployeeName) 
</div> 
</fieldset> 
<p>@Html.ActionLink("Back to List", "Index")</p> 

注： jqueryとBootstrapのリファレンスを追加する必要があり、必要に応じてデザイン/カスタマイズすることができます。