如何在 Ajax 中使用下拉菜单自动填写表单？答案

【问题标题】：How to Auto Fill Form using Dropdown in Ajax?如何在 Ajax 中使用下拉菜单自动填写表单？
【发布时间】：2020-12-02 13:44:17
【问题描述】：

我有一个 Html 表单：

@using (Html.BeginForm("UpdateServiceClientInformation", "contracts", new { id = Model.Id }, FormMethod.Post, new { role = "form" }))
                                        {
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    @if (Model.AvailableClients.Count > 0)
                                                    {
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.AvailableClients)
                                                            @{
                                                                Model.AvailableClients.Insert(0, new SelectListItem
                                                                {
                                                                    Text = "None",
                                                                    Value = "0"
                                                                });
                                                            }
                                                            @Html.DropDownListFor(m => m.AvailableClientId, Model.AvailableClients, new { @class = "form-control" })
                                                        </div>
                                                    }
                                                </div>
                                            </div>

                                            <div id="clientInformationInputsWrapper">
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.ClientForm.FirstName)
                                                            @Html.TextBoxFor(m => m.ClientForm.FirstName, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.ClientForm.FirstName, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(m => m.ClientForm.LastName)
                                                            @Html.TextBoxFor(m => m.ClientForm.LastName, new { @class = "form-control" })
                                                            @Html.ValidationMessageFor(m => m.ClientForm.LastName, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>

                                                </div>

                                               
                                            <input type="submit" class="btn btn-sm btn-primary pull-right" value="Save Changes" />

                                        }

它包含可用客户端的下拉列表。现在我需要的是当我选择下拉列表时，表单必须自动填写。我正在使用 Ajax：

 $("#AvailableClientId").on("change", function () {
                var serviceCliendId = $(this).val();
                if (serviceCliendId == "0") {
                    $("#clientInformationInputsWrapper :input").val("");
                } else {
                    $.ajax({
                        url: "/ServiceClient/Details/" + serviceCliendId,
                        type: "GET",
                        success: function (resp) {
                            $("#ClientForm.FirstName").val(resp.FirstName);
                            $("#ClientForm.LastName").val(resp.LastName);
                           
                        }
                    })
                }
            })

虽然使用这个 ajax 方法命中 API 但表单值没有改变。我该如何解决这个问题？

【问题讨论】：

标签： jquery ajax asp.net-mvc razor asp.net-ajax

【解决方案1】：

首先通过放置一个console.log检查更改事件是否生效，然后从那里检查serviceCliendId和ajax响应。

$("#AvailableClientId").on("change", function () {
                console.log('Change Event Fired')
                var serviceCliendId = $(this).val();
                console.log('serviceCliendId: ' + serviceCliendId)
                if (serviceCliendId == "0") {
                    $("#clientInformationInputsWrapper :input").val("");
                } else {
                    $.ajax({
                        url: "/ServiceClient/Details/" + serviceCliendId,
                        type: "GET",
                        success: function (resp) {
                        console.log('resp: ' + JSON.stringify(resp))
                            $("#ClientForm.FirstName").val(resp.FirstName);
                            $("#ClientForm.LastName").val(resp.LastName);
                           
                        }
                    })
                }
            })

【讨论】：