javascript - 当我创建新员工时，下拉列表不会加载数据，但是当刷新页面时，它会加载新数据

Question

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

这是模态视图，此处需要创建新员工的字段

Here you can see that the drop down is empty. But when I refresh the entire page I can see the whole list in the drop down

But when the entire page is refreshed the inserted data shows nicely with the other employees coming from the database

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

 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; }

}

这是我的 Controller 和操作

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Position,DOJ,Phone,Address,Status")] CompanyResource companyResource)
    {

        var isAjaxRequest = Request.IsAjaxRequest();

        ModelState["Status"].Errors.Clear();

        if (ModelState.IsValid)
        {
            db.CompanyResource.Add(companyResource);
            db.SaveChanges();

            if (isAjaxRequest)
            {
                var staff = new SelectList(db.CompanyResource.ToList(), "Id", "Name");
                return Json(new { Flag = true, CompanyResources = staff }, JsonRequestBehavior.AllowGet);
            }

            Success(string.Format("Successfully save data !"), true);
            return RedirectToAction("Index");
        }
        if (!isAjaxRequest) return View(companyResource);
        return Json(null, JsonRequestBehavior.AllowGet);

    }


 public JsonResult GetStaff()
    {
        try
        {
            var staff = new SelectList(db.CompanyResource.ToList(), "Id", "Name");
            return Json(new { Flag = true, CompanyResources = staff }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return Json(new { Flag = false, Msg = ex.Message }, JsonRequestBehavior.AllowGet);
        }

    }

这是我的观点。脚本写在这里

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>

这是我从操作中接收 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() {}

Answer 1

这是您的 Controller 返回的内容:

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

请注意第二个属性CompanyResources。现在，您正在对返回的数据执行以下操作:

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

看到您正在迭代响应的 GetStaff 属性，但这是不正确的。您应该迭代 CompanyResources 属性。所以改成这样:

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

正如斯蒂芬提到的，它应该是 .appendTo($("#RName"))，而不是我已经更改的 .appendTo("#RName")如上所述。