使用js对razor中的mvc模型进行部分更新

partial update on an mvc model in razor using js

本文关键字：行部 更新 模型 mvc js razor 中的 使用      更新时间：2023-09-26

我有一个表，显示了一些数据，如名称邮件和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 + '" />';
}

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

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

您可以将<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()和.hide()。

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

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

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

相关文章：