时间戳

首页 > 解决方案 > 使用 MVC5 Ajax 和 Json 在单个调用上绑定多个选择列表

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

问题描述

这是我的两个 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));
                        });
                    }
                }
            });

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

标签： jsonajaxasp.net-mvc-5

解决方案

您不能对两个不同的 URL 进行一次调用。但是，您可以在 action 方法中组合它们。

在此处输入图像描述

看法

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

推荐阅读