При редактировании данных во всплывающем окне JQuery для всех строк отображаются данные только первой строки.

Я использую JQuery DataTable в MVC3 для отображения списка пользователей. Я открываю диалоговое окно 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]);
            }               
        }
    });      
});
});

Я взял скрытое поле, в котором я храню свой идентификатор пользователя, с помощью которого я извлекаю свои пользовательские данные, но каждый раз, когда я получаю идентификатор пользователя только первой строки.


jquery asp.net-mvc-3 jquery-datatables
person Shreya    schedule 30.08.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Идентификаторы должны быть уникальными. См.: Должен ли идентификатор быть уникальным на всей странице. ?

Но есть лучший способ сделать то, что вы пытаетесь сделать:

1) включите уникальный идентификатор в ‹tr›, чтобы получить что-то вроде: ‹tr id="id123"›. Добавьте к идентификатору пользователя хотя бы одну букву алфавита, например "id" или что угодно. Это потому, что вы не хотите, чтобы идентификатор HTML был числом (например, id="12356"). Идентификатор должен начинаться с символа.

2) Добавьте обработчик click или dblclick в строки таблицы, например:

  $(document).on("click", "#example tbody tr", 
         function () { editUser(this.id.substring(2)); } );

Обратите внимание, что подстрока (2) удаляет предыдущий текст «id», поэтому у вас остается только фактический идентификатор пользователя.

3) Используйте это значение в функции editUser:

function editUser(id)
{
    $("#txtFirstName").val("");
    $("#txtLastName").val("");
    $("#txtCity").val("");        
    $("#mypopup").dialog();
    $.ajax({
        type: "GET",
        url: "Home/EditData",
        data: { UserId: id },
        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]);
            }               
        }
    });      
});

Вот простая скрипка: http://jsfiddle.net/95jB5/ Щелкните строку, и она отобразит идентификатор пользователя.

person Bumptious Q Bangwhistle    schedule 02.09.2013

arrow_upward
0
arrow_downward

Вместо того, чтобы использовать скрытую переменную, я присвоил моему 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>

И при нажатии Edit я использую этот идентификатор для получения данных, как показано ниже, в моем 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]);
        }               
    }
  });      
});
});

Теперь он работает, для каждой строки я получаю идентификатор только этой строки.

person Shreya    schedule 03.09.2013