如何在Razor Page页面中提交x-editable输入框的数值

问题原因 #

你当前表单内的字段都是<a>标签，不属于浏览器默认识别的表单提交元素，点击提交按钮时不会自动将这些标签的内容序列化发送到后端OnPost方法。同时你原代码里提交按钮末尾多了冗余的/>字符，建议先删掉避免HTML解析错误。

方案1：添加隐藏input同步值（适配默认表单提交逻辑） #

这种方案不需要修改你现有的OnPost后端代码，只需要调整前端HTML和补充少量JS同步逻辑即可：

1. 给每个<a>可编辑字段对应添加同名隐藏<input>，name属性值要和你的EditDoctorViewModel的属性名完全对应：

<form method="post" class="form-horizontal editor-horizontal">
    <div class="form-group">
        <div class="col-sm-9">
            <a href="#" id="name" data-type="text"
               data-pk="1" data-placeholder="Required"
               data-title="نام خود را وارد کنید">@Model.Information.Doctor.Name</a>
            <!-- 新增隐藏input，name对应EditDoctorViewModel的Name属性 -->
            <input type="hidden" name="Name" id="nameInput" value="@Model.Information.Doctor.Name" />
        </div>
        <label class="col-sm-3 control-label">نام</label>
    </div>
    <div class="form-group">
        <div class="col-sm-9">
            <a data-pk="1" data-placeholder="Required" data-placement="left"
               data-title="نام خانوادگی خود را وارد کنید " data-type="text"
               href="#" id="family" >@Model.Information.Doctor.Family</a>
            <!-- 新增隐藏input，name对应EditDoctorViewModel的Family属性 -->
            <input type="hidden" name="Family" id="familyInput" value="@Model.Information.Doctor.Family" />
        </div>
        <label class="col-sm-3 control-label">نام خانوادگی </label>
    </div>
    <button type="submit" class="btn btn-primary">تایید</button>
</form>

2. 如果你用的是x-editable这类可编辑组件，在初始化时添加编辑完成回调，将<a>标签的最新值同步到对应隐藏input即可：

$('#name').editable({
    success: function(response, newValue) {
        $('#nameInput').val(newValue);
    }
});
$('#family').editable({
    success: function(response, newValue) {
        $('#familyInput').val(newValue);
    }
});

如果是你自己实现的<a>标签编辑逻辑，在编辑完成的回调里执行同样的赋值操作即可。

方案2：AJAX手动提交（灵活度更高） #

如果你不想额外加隐藏input，也可以拦截表单提交事件，手动收集字段值发送给后端：

document.querySelector('form').addEventListener('submit', function(e) {
    // 阻止默认表单提交
    e.preventDefault();
    // 收集字段值，key和EditDoctorViewModel属性对应
    const postData = {
        Name: document.getElementById('name').textContent.trim(),
        Family: document.getElementById('family').textContent.trim()
    };
    // 提交请求，需要带上Razor Pages默认要求的防伪token
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify(postData)
    }).then(res => {
        // 提交成功后按需执行刷新、跳转等逻辑
        window.location.reload();
    });
});

内容的提问来源于stack exchange，提问作者user14719104