C# 使用Jquery asp.net mvc进行内联编辑

我有以下HTML：

@using (Ajax.BeginForm("Edit", "LicenseHolder", null, new AjaxOptions()
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "createonsuccess"
}))
{
<table class="table table-striped editTable" style="border-top: 1px solid #000;">
<tr>
    <td class="tdstyle"><span>@Model.LicenseHolder.LegalPerson.Name</span></td>
</tr>
<tr>
    <td class="bigtd"></td>
</tr>
<tr>
    <td class="tdstyle">
        <i class="fa fa-map-marker iconPos" aria-hidden="true"></i>
        <span>@Model.LicenseHolder.LegalPerson.PrimaryAddress.StreetAddress</span>
    </td>
</tr>
<tr>
    <td class="tdstyle"><span>@Model.LicenseHolder.LegalPerson.PrimaryAddress.ZipCode</span></td>
</tr>
<tr>
    <td class="tdstyle"><span>@Model.LicenseHolder.LegalPerson.PrimaryAddress.HomeTown @Model.LicenseHolder.LegalPerson.PrimaryAddress.Country</span></td>
</tr>
 </table>
}

@使用（Ajax.BeginForm（“编辑”，“许可持有人”，空，新的AjaxOptions（）
{
HttpMethod=“Post”，
InsertionMode=InsertionMode.Replace，
OnSuccess=“createonsuccess”
}))
{
@Model.LicenseHolder.LegalPerson.Name
@Model.LicenseHolder.LegalPerson.PrimaryAddress.StreetAddress
@Model.LicenseHolder.LegalPerson.PrimaryAddress.ZipCode
@Model.LicenseHolder.LegalPerson.PrimaryAddress.homely@Model.LicenseHolder.LegalPerson.PrimaryAddress.Country
}

我使用以下javascript代码使行内联可编辑：

   $('.editEnable').click(function (e) {
            e.stopPropagation();
            $('.editTable tr').each(function () {   
                var ele = $(this).find("span");
                var value = ele.text();
                updateVal(ele, value);
            });
            $('.editFields').show();
        });

        $('.centering').click(function (e) {
            $(".thVal").replaceWith(function () {
                return this.value;
            });
            $('.editFields').hide();
        });

        function updateVal(currentEle, value) {
            $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="' + value + '" />');
            $(".thVal", currentEle).focus().keyup(function (event) {
                if (event.keyCode == 13) {
                    $(currentEle).html($(".thVal").val().trim());
                }
            }).click(function (e) {
                e.stopPropagation();
            });
        }
    });

$（'.editEnable'）。单击（函数（e）{
e、 停止传播（）；
$（'.editTable tr'）。每个（函数（）{
var ele=$（this.find（“span”）；
var值=ele.text（）；
更新值（ele，value）；
});
$（'.editFields'）.show（）；
});
$（'.centering'）。单击（函数（e）{
$（“.thVal”）.replaceWith（函数（）{
返回此.value；
});
$（'.editFields'）.hide（）；
});
函数updateVal（currentEle，value）{
$（currentEle.html（“”）；
$（“.thVal”，currentEle.focus（）.keyup（函数（事件）{
如果（event.keyCode==13）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
}
})。单击（功能（e）{
e、 停止传播（）；
});
}
});

我想在这里说明的是，当我单击save时，我想对Edit方法进行post调用：

 public async Task<ActionResult> Edit(LicenseHolderDetailViewModel model)
        {
            return View();
        }

公共异步任务编辑（LicenseHolderDetailViewModel模型）
{
返回视图（）；
}

---

这里的问题是，当我点击save时，模型是空的。这是因为输入字段未绑定到

LicenseHolderDetailView

。当我进行内联编辑时，如何完成此绑定？

Span不会在表单中发回。因此，您不能像当前设计的那样

解决这个问题的最简单方法可能是将隐藏的输入与span保持同步。使hiddenFields具有与模型上的字段相对应的名称属性

比如说

<tr>
    <td class="tdstyle">
        <span>@Model.LicenseHolder.LegalPerson.Name</span>
        @Html.HiddenFor(m => m.LicenseHolder.LegalPerson.Name)
    </td>
</tr>

@Model.LicenseHolder.LegalPerson.Name
@HiddenFor（m=>m.LicenseHolder.LegalPerson.Name）

确保更新隐藏字段，否则它们将保留其原始值

---

还要注意，表单需要包装所有要提交的元素。因此，现在需要将整个表括起来，以提交所有隐藏的输入。

您的输入需要一个

名称

属性。@Jasen:是的。我如何以一种好的方式添加这个name属性呢？就像您现在正在编写的任何其他属性一样。或者

.attr（“name”，“model property name”）

如何更改隐藏输入的值？只需使用jQuery（基于代码的其余部分）选择它，然后使用.val（newValue）进行设置