0

ユーザーのリストを表示するために、MVC3 で JQuery DataTable を使用しています。データを編集するために JQuery ダイアログを開いていますが、ダイアログでは最初の行のデータがすべての行に対してのみ表示されます。

以下は私の見解です：

@model IEnumerable<EditorDataTable.Models.UserModel>
@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
 }
 <div id="mypopup" style="display:none;">
 <label id="lblFirstName">FirstName</label>
 <br />
 <input type="text" id="txtFirstName" name="txtFirstName" />
 <br />
 <label id="lblLastName">LastName</label>
 <br />
 <input type="text" id="txtLastName" name="txtLastName" />
  <br />
 <label id="lblCity">City</label>
 <br />
 <input type="text" id="txtCity" name="txtCity" />
 <br />
 <input type="submit" id="btnUpdate" value="Update" />
 </div>
<table id="example" class="display">
<thead>
<tr>
    <th>
        FirstName
    </th>
    <th>
        LastName
    </th>
    <th>
        City
    </th>     
    <th>
        Action
    </th>
</tr>  
</thead> 
<tbody>
@foreach (var item in Model) {
<tr class="even gradeC">
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>     
    <td class="click">
         @Html.HiddenFor(modelItem => item.UserID,"Value")
        <a href="#" id="edit">Edit</a>         
    </td>
</tr>
}
</tbody>
</table>

以下は私のjQueryです：

  $(document).ready(function () {
$('#example').dataTable({      
});

$(".click").on('click', function (e) {        
    $("#txtFirstName").val("");
    $("#txtLastName").val("");
    $("#txtCity").val("");        
    var UserId = $("#item_UserID").val();
    $("#mypopup").dialog();
    $.ajax({
        type: "GET",
        url: "Home/EditData",
        data: { UserId: UserId },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data) {
                $("#txtFirstName").val(data.aaData[0][0]);
                $("#txtLastName").val(data.aaData[0][1]);
                $("#txtCity").val(data.aaData[0][2]);
            }               
        }
    });      
});
});

UserID を格納している隠しフィールドを使用して、ユーザー データを取得していますが、毎回最初の行の UserId のみを取得しています。

4

2 に答える 2

0

非表示の変数を使用する代わりに、次のように id をtdに指定しました。

<tbody>
@foreach (var item in Model) {

<tr class="even gradeC">
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>    
    <td class="click" id="@item.UserID">           
        <a href="#" id="edit">Edit</a>        
    </td>
</tr>
}
</tbody>

[編集] をクリックすると、この ID を使用して、js で以下のようにデータを取得しています。

$(document).ready(function () {
$('#example').dataTable({      
});

$(".click").on('click', function (e) {        
$("#txtFirstName").val("");
$("#txtLastName").val("");
$("#txtCity").val("");        
var UserId = this.id;
$("#mypopup").dialog();
$.ajax({
    type: "GET",
    url: "Home/EditData",
    data: { UserId: UserId },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        if (data) {
            $("#txtFirstName").val(data.aaData[0][0]);
            $("#txtLastName").val(data.aaData[0][1]);
            $("#txtCity").val(data.aaData[0][2]);
        }               
    }
  });      
});
});

各行について、その行のIDのみを取得しています。

于 2013-09-03T07:10:38.570 に答える