ASP.NET MVC提交后Line Manager Name空白 求隐藏域解决方案

要解决提交后Line Manager Name空白的问题，核心是通过隐藏域保存名称值，确保表单提交时能传递该值，再在回显视图时重新赋值。具体步骤如下：

1. 添加隐藏域到表单 #

在表单内的LineManagerName输入框附近添加一个隐藏域，用于存储名称值：

<div class="row">
    <div class="form-group col-md-6 hover">
        <div class="col-md-5">
            @Html.Label("Employee Name", htmlAttributes: new { @class = "control-label" })
        </div>
        <div class="col-md-7">
            <input type="text" id="LineManagerName" class="form-control" />
            <!-- 添加隐藏域 -->
            <input type="hidden" id="hdnLineManagerName" name="hdnLineManagerName" />
        </div>
    </div>
</div>

2. 同步自动选择的值到隐藏域 #

修改jQuery自动完成的select事件，选中Line Manager ID时，同时更新输入框和隐藏域的值：

select: function (event, ui) {
    $("#LineManagerName").val(ui.item.employeeName);
    $("#hdnLineManagerName").val(ui.item.employeeName); // 同步到隐藏域
}

3. 后台接收并传递回显值 #

修改Create的POST方法，接收隐藏域的参数，将名称值存入ViewBag以便回显：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(ResignationRequester resignationRequester, string hdnLineManagerName)
{
    // 保存名称到ViewBag，供视图回显
    ViewBag.LineManagerName = hdnLineManagerName;
    return View(resignationRequester);
}

4. 页面加载时回显名称 #

在$(document).ready中添加逻辑，页面加载（包括提交后回显）时，如果ViewBag有值，就给输入框和隐藏域赋值：

$(document).ready(function () {
    // 回显提交后的Line Manager Name
    var savedName = '@Html.Raw(ViewBag.LineManagerName ?? "")';
    if (savedName) {
        $("#LineManagerName").val(savedName);
        $("#hdnLineManagerName").val(savedName);
    }

    // 原有自动完成逻辑
    $("#txtLineManagerId").autocomplete({
        source: function (request, response) {
            var searchText = $("#txtLineManagerId").val();
            console.log("search text" + searchText)
            $.ajax({
                url: '@Url.Action("GetAllEmployeeBasedSearchText", "Resignation")',
                data: { searchText: searchText },
                method: "GET",
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (item) {
                        console.log("data is" + item.EmployeeID);
                        return { label: item.EmployeeID, value: item.EmployeeID, employeeName: item.EmployeeName };
                    }))
                }
            });
        },
        position: { my: "right top", at: "right bottom" },
        appendTo: '#searchContainer',
        select: function (event, ui) {
            $("#LineManagerName").val(ui.item.employeeName);
            $("#hdnLineManagerName").val(ui.item.employeeName);
        }
    });
});

额外优化：解决jQuery版本冲突 #

你的代码中引用了多个版本的jQuery和jQuery UI（如1.5、1.8.9、3.6.0等），这会导致JS错误或功能异常。建议只保留最新兼容的版本：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

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