0

我有一个表格，显示一些数据作为名称邮件和 ID。

<table id="da-ex-datatable-numberpaging" class="da-table">
    <thead>
        <tr> 
            <th>Name</th>
            <th>Mail</th>
            <th>Operations</th>
        </tr>
    </thead>
    <tbody>
    @foreach(var c in Model.models)
    {    
    <form method="post" action="EditCustomer" >                             
         <tr> 
             <td>@c.name</td>
             <td>@c.mail</td>
             <td> 
                 <input type="button" value="Edit" onclick="edit()" />
                 <input type="submit" value="Save"/>
             </td>
         </tr>
     </form>
     } 
     </tbody>
</table>

我想要做的是只编辑一行的名称和邮件。在表格的最右侧，我有两个按钮作为编辑和保存。当我单击编辑时，我会转换

<td>john doe</td>

到

<td><input type="text" name="nameE" id="3nameE" value="john doe" /></td>

通过使用这个 javascript 方法

function edit(tag) {

    var id = tag.getAttribute("id");
    var name = document.getElementById(id + "name").innerHTML;
    var mail = document.getElementById(id + "mail").innerHTML;

    document.getElementById(id + "name").innerHTML = '<input type="text" name="nameE" id="' + id + 'nameE" value="' + name + '" />';
    document.getElementById(id + "mail").innerHTML = '<input type="text" name="mailE" id="' + id + 'mailE" value="' + mail + '" />';
}

并且用户编辑该文本框上的元素。

我的问题是在哪里放置表格以及如何在控制器上获取帖子值？如您所见，我的模型中有一个客户列表。但我想单独更新它们。我知道当我提交表单时，模型将传递给客户端，但是我刚刚更改的值没有放入模型中，因为我已经在 javascript 中创建了这些输入。我在这里迷路了，请帮帮我。我可能把事情搞混了，不要犹豫，建议改变整体方法。

4

1 回答 1

1

您可以将<input>已经在页面上，绑定到模型，并使用 javascript 隐藏/显示它。

代替：

@foreach(var c in Model.models)
{
    ...
    <td>@c.name</td>
    ...
}

尝试：

@for (var i = 0; i < Model.models.Count; i++)
{
    ...
    <td>
        <span>@Model.models[i].name</span>
        @Html.TextBoxFor(x => x.models[i].name, new { @style = "display:none" });
    </td>
    ...
}

当有人点击编辑时，使用 jQuery.show()和input 和 span 对象。.hide()

生成的输入名称可能看起来很奇怪，但假设您有一个表单（不是每行一个）和一个看起来像这样的控制器方法，它们会正确绑定到模型：

[HttpPost]
public ActionResult EditCustomers(MyViewModel model)
{
    // model.models works here
    ...
}

这篇文章可能对你也有帮助。

于 2013-07-19T00:56:54.220 回答