Question

我正在尝试在MVC中开发一个功能齐全的Gridview，数据显示在gridview中，但我想在同一页面上编辑一行，即当我点击编辑超链接时，该行应该成为文本框。

这是我的HTML代码

<table>
    <tr>
        <th>
            @Html.Label("ID") 
        </th>
        <th>
            @Html.Label("Name")
        </th>
        <th>
            @Html.Label("Description")
        </th>
        <th>
             @Html.Label("Date")
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            <input type="text"  class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Id)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Name)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Description)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_date)
        </td>
        <td>
            <a class="edit" href="#">Edit</a> |
           @* @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |*@
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

我的jQuery

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function() {
        $('a.edit').click(function () {
            var dad = $(this).parent().parent();
            dad.find('label').hide();
            dad.find('input[type="text"]').show().focus();
        });

        $('input[type=text]').focusout(function() {
            var dad = $(this).parent();
            $(this).hide();
            dad.find('label').show();
        });
        });
    </script>
}

和我的文本框css

.edit-input {
    display:none;
}

但是当我执行屏幕时，我喜欢这个 enter image description here

我是mvc的新手，我对此并不了解，我应该在jQuery中修改什么来修复它？

Answer 1

你能在每一行中添加一个隐藏的文本框吗？然后当您单击该行时，隐藏每个td的内容，但显示文本框？

<td>

            @Html.DisplayFor(modelItem => item.Holiday_Id)
           @Html.TextBox(modelItem => item.Holiday_Id, new{style="display:none;"})
        </td>

<Script>
   $(function(){
    $(".edit").click(function(){
       $(this).parent().parent().children("td > * :not('label')").hide();
       $(this).children("input").show();
    });

   });
</script>

Answer 2

检查@Html.DisplayFor()生成的html。除非您创建了自定义DiplayTemplate，否则它不会将显示文本包装在<label>标记中，这是您脚本试图使用dad.find('label').hide();隐藏的内容。

而是将显示文本包装在容器中

<td>
  <input type="text"  class="edit-input" />
  <div class="displaytext">
    @Html.DisplayFor(modelItem => item.Holiday_Id)
  </div>
</td>

并将脚本调整为

....
$('a.edit').click(function () {
  var dad = $(this).parent().parent();
  dad.find('.displaytext').hide(); // change this
  dad.find('input[type="text"]').show().first().focus();
});

$('input[type=text]').focusout(function() {
  var dad = $(this).parent();
  $(this).hide();
  dad.find('.displaytext').show(); // and this
});

请注意，当您将显示文本的内容显示时，您可能还希望将显示文本的内容复制到输入中。

Answer 3

您的代码有两个问题。正如@Stephen Muecke所提到的@Html.DisplayFor()没有生成<label>标签。并在dad.find('input[type="text"]').show().focus();方法focus()为每个输入运行并设置焦点，但前一个输入失去焦点并提高它focusout（）事件（完全隐藏它）。这就是为什么你只能编辑日期，因为它最后输入并且不会丢失focus()。我根据@Stephen Muecke的修改模拟了你的情况，它的工作正常。你可以看到它here

标签在特定行的单击编辑时成为文本框

3 个答案: