Javascript 当我创建新员工时，下拉菜单不加载数据，但当页面刷新时，它加载新数据

当我添加新员工时，插入的员工不会显示在下拉列表中，但当我刷新整个页面时，下拉列表会显示我插入的数据。问题是为什么添加新员工后下拉列表变为空。代码运行平稳，但我不明白背后的原因。 这是用户界面。在这里，我可以创建新员工，然后将员工添加到网格中

这是此处的模式视图。创建新员工需要这些字段

现在让我们看看这里的代码部分， 这是我的模型

 public class CompanyResource
{

    [Key]
    public int Id { get; set; }
    [Required]
    [StringLength(100)]
    public string Name { get; set; }
    [StringLength(100)]
    public string Position { get; set; }
    [Display(Name="Date of Joining")]
    public DateTime? DOJ { get; set; }
    [StringLength(50)]
    public string Phone { get; set; }
    [StringLength(100)]
    public string Address { get; set; }
    [StringLength(1)]
    [Required]
    public string Status { get; set; }

    public virtual ICollection<ProjectResource> ProjectResources { get; set; }
    public virtual ICollection<ProjectSiteResource> ProjectSiteResources { get; set; }

}

这是我的看法。脚本写在这里

var optionsStaff = new AjaxOptions
{
    HttpMethod = "POST",
    //Confirm = "Do you want to add a new person?",
    //OnBegin = "OnBegin",
    OnSuccess = "OnSuccessStaff",
    OnComplete = "OnCompleteStaff",
    OnFailure = "OnFai lureStaff"
};

这是我的模态形式

<div class="modal fade" id="resourceStaffModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="staffModalTitle">Add Staff</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="panel-body">
                @using (Ajax.BeginForm("Create", "CompanyResources", null, optionsStaff, new { @id = "staffCreateForm" }))
                {
                    @Html.AntiForgeryToken()

                    <div class="form-horizontal">


                            <div class="form-group">
                                @Html.Label("Name", htmlAttributes: new {@class = "control-label col-md-2"})
                                @Html.ValidationSummary(true, "", new {@class = "text-danger"})
                                <div class="col-md-10">
                                    @Html.TextBox("Name", null, new { @class = "form-control" })

                                </div>
                            </div>

                        <div class="form-group">
                            @Html.Label("Position", htmlAttributes: new {@class = "control-label col-md-2"})
                            @Html.ValidationSummary(true, "", new {@class = "text-danger"})
                            <div class="col-md-10">
                                @Html.TextBox("Position", null, new {@class = "form-control"})

                            </div>
                        </div>

                        <div class="form-group">
                            @Html.Label("ToDate", "Date", htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-4">
                                @Html.TextBox("DOJ", null, new { @class = "form-control datepicker" })
                            </div>
                        </div>


                        <div class="form-group">
                                @Html.Label("Phone", htmlAttributes: new {@class = "control-label col-md-2"})
                                @Html.ValidationSummary(true, "", new {@class = "text-danger"})
                                <div class="col-md-10">
                                    @Html.TextBox("Phone", null, new {@class = "form-control"})

                                </div>
                            </div>


                            <div class="form-group">
                                @Html.Label("Address", htmlAttributes: new {@class = "control-label col-md-2"})
                                @Html.ValidationSummary(true, "", new {@class = "text-danger"})
                                <div class="col-md-10">
                                    @Html.TextBox("Address", null, new {@class = "form-control"})

                                </div>
                            </div>



                            <div class="form-group">
                                @Html.Label("Status", htmlAttributes: new { @class = "control-label col-md-2", @required = "required" })
                                <div class="col-md-10">
                                    <select class="form-control" id="Status" name="Status">
                                        <option value="A">Active</option>
                                        <option value="I">Inactive</option>
                                    </select>

                                </div>
                            </div>                                                 

                        <div class="modal-footer">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>                       
                }
            </div>
        </div>
    </div>
</div>

增加工作人员
&时代；
@使用（Ajax.BeginForm（“Create”，“CompanyResources”，null，optionStaff，new{@id=“staffCreateForm”}））
{
@Html.AntiForgeryToken（）
@Label（“Name”，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@TextBox（“Name”，null，new{@class=“form control”}）
@Label（“Position”，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@TextBox（“Position”，null，new{@class=“form control”}）
@Label（“ToDate”，“Date”，htmlAttributes:new{@class=“controllabel col-md-2”}）
@TextBox（“DOJ”，null，new{@class=“form control datepicker”}）
@Label（“Phone”，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@TextBox（“Phone”，null，new{@class=“form control”}）
@Label（“Address”，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@TextBox（“地址”，空，新{@class=“form control”}）
@Label（“Status”，htmlAttributes:new{@class=“controllabel col-md-2”，@required=“required”}）
活跃的
不活跃的
拯救
接近
}

这是我从操作接收Json响应的脚本

    function OnBeginStaff() {}

    function OnCompleteStaff() {}

    function OnSuccessStaff() {
        $('#Name').val("");
        $('#Position').val("");
        $('#DOJ').val("");
        $('#Phone').val("");
        $('#Address').val("");
        $('#Status').val("");           

        $('#resourceStaffModal').modal('hide');
        $.get("@Url.Action("GetStaff", "CompanyResources")", function(resp) {
            if (resp.Flag) {
                $("#RName").empty().html("<option value>--Select--</option>");
                $.each(resp.GetStaff, function (key, item) {
                    $("<option>").attr("value", item.Value).html(item.Text).appendTo("#RName");
                });
            }
        });

    }

    function OnFailureStaff() {}

函数OnBeginStaff（）{} 函数OnCompleteStaff（）{} 函数OnSuccessStaff（）{ $（'#Name'）.val（“”）； $（“#位置”）.val（“”）； $（'DOJ'）.val（“”）； $（'#Phone'）.val（“”）； $（'地址'）.val（“”）； $（'#Status'）.val（“”）； $（'resourceStaffModal'）.modal（'hide'）； $.get（“@Url.Action（“GetStaff”、“CompanyResources”）”），函数（resp）{ if（相应标志）{ $（“#RName”）.empty（）.html（“--Select--”）； $。每个（分别为GetStaff、功能（键、项）{ $（“”）.attr（“value”，item.value）.html（item.Text）.appendTo（“#RName”）； }); } }); } 函数OnFailureStaff（）{}

---

以下是控制器返回的内容：

return Json(new { Flag = true, CompanyResources = staff }, JsonRequestBehavior.AllowGet);
    }

请注意第二个属性

公司资源

。下面是您对返回的数据所做的操作：

$.each(resp.GetStaff, function (key, item) {
                $("<option>").attr("value", item.Value).html(item.Text).appendTo("#RName");
            });

---

同样正如Stephen提到的，它应该是

.appendTo（$（“#RName”）

，而不是

.appendTo（“#RName”）

，我已经在上面更改了它。

以下是控制器返回的内容：

return Json(new { Flag = true, CompanyResources = staff }, JsonRequestBehavior.AllowGet);
    }

请注意第二个属性

公司资源

。下面是您对返回的数据所做的操作：

$.each(resp.GetStaff, function (key, item) {
                $("<option>").attr("value", item.Value).html(item.Text).appendTo("#RName");
            });

---

正如Stephen提到的，应该是

.appendTo（$（“#RName”）

，而不是

.appendTo（“#RName”）

，我已经在上面更改了它。

我在你的帖子中找不到错误消息。包括在内了吗？如果是这样的话，你能让它更清晰吗？实际上没有错误发生。数据保存成功。但当我创建一个新员工时，下拉列表显示为空，但当我刷新整个页面时，它会加载我刚才创建的数据。请更新您的帖子来解释这一点。你的问题以“当我添加一些东西时，我得到了一个错误”开始，所以这很令人困惑。更新。我已经给出了图像。请检查发生了什么事

.appendTo（$（“#RName”）

，而不是

。appendTo（#RName”）

我在你的帖子中找不到错误消息。包括在内了吗？如果是这样的话，你能让它变得更好吗