使用MVC5 Ajax和Json在单个调用上绑定多个选择列表

Question

这是我的两个ajax调用，我需要在单个调用中完成。

$.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "/Job/GetJobType",
                data: "{}",
                dataType: "json",
                success: function (Result) {
                        $("#DdlJobType").append("<option value='0'>Select</option>");
                        $.each(Result, function (key, value) {
                            $("#DdlJobType").append($("<option></option>").val(value.TypeId).html(value.TypeName));
                        });
                }
            });

            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "/Job/GetStatus",
                data: "{}",
                dataType: "json",
                success: function (Result) {
                    if (typeof Result !== 'undefined' && Result != undefined) {
                        $("#DdlStatus").append("<option value='0'>Select</option>");
                        $.each(Result, function (key, value) {
                            $("#DdlStatus").append($("<option></option>").val(value.StatusId).html(value.StatusName));
                        });
                    }
                }
            });

我还需要设置数据库中的选定值， 谢谢

Answer 1

您不能一次调用两个不同的URL。但是，您可以在操作方法中将它们组合在一起。

查看

<select id="DdlJobType"></select>
<select id="DdlStatus"></select>

<script>
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "/Job/GetJobTypeAndStatus",
        data: "{}",
        dataType: "json",
        success: function (response) {
            console.log(response);

            $("#DdlJobType").append("<option value='0'>Select</option>");
            $.each(response.JobTypes, function (key, value) {
                $("#DdlJobType").append($("<option></option>").val(value.Value).html(value.Text));
            });

            $("#DdlStatus").append("<option value='0'>Select</option>");
            $.each(response.Status, function (key, value) {
                $("#DdlStatus").append($("<option></option>").val(value.Value).html(value.Text));
            });
        }
    });

</script>

型号

public class Model
{
    public List<SelectListItem> JobTypes { get; set; }
    public List<SelectListItem> Status { get; set; }
}

控制器

public class JobController : Controller
{
    public ActionResult GetJobTypeAndStatus()
    {
        var model = new Model
        {
            JobTypes = new List<SelectListItem>
            {
                new SelectListItem {Text = "Engineer", Value = "1"},
                new SelectListItem {Text = "Accountant", Value = "2"}
            },
            Status = new List<SelectListItem>
            {
                new SelectListItem {Text = "Active", Value = "true"},
                new SelectListItem {Text = "Inactive", Value = "false"}
            },
        };
        return Json(model, JsonRequestBehavior.AllowGet);
    }
}