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

问题描述

我有一个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，但表单值没有变化。我该如何解决？

解决方法

首先通过放置console.log来检查change事件是否正在生效，然后从那里还检查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);
                           
                        }
                    })
                }
            })