通过 AJAX (ASP.NET MVC) 从数据库中选择数据

Question

我有包含公司、职位空缺、面试和问题块表的数据库。

这是它的方案

所以空缺连接到公司，面试连接到空缺，问题块连接到面试。

我实现了公司的下拉列表，当我选择公司时，空缺下拉列表更新。

这是查看的代码

<div style="width: 100%; margin-left: 20px;height: 15%;padding-top: 20px;">
    @Html.DropDownList("Company", ViewBag.Companies as SelectList, "Компания", new { @class = "greeting", @style = "width:30%; margin-left:20px;" })
    <select class="greeting" id="vacancy" name="id"  style="width:30%; margin-left:150px;" data-url="@Url.Action("Vacancies","Questions")">
        <option value="" disabled selected>Вакансия</option>
    </select>
</div>

和 Ajax 调用

<script>
    $(function () {
        $("#Company").change(function (e) {
            var $vacancy = $("#vacancy");
            var url = $vacancy.data("url") + '?companyId=' + $(this).val();
            $.getJSON(url, function (items) {
                $.each(items, function (a, b) {
                    $vacancy.append('<option value="' + b.Value + '">' + b.Text + '</option>');
                });
            });
        });
    });
</script>

我有这样的视图

所以我需要什么。

我需要向控制器发出请求，并找到与 VacancyId 相关的 QuestionBlock。

所以据我了解，我需要将 VacancyId 从下拉列表传递到控制器进行一些 sql 操作并返回 JSON？

或者我该怎么做？

更新

感谢@CuriousDev 的回答，它适用于选择项目。

我还需要一件事，我需要像这样显示 Question1-Question10。

这是我的 Action 方法

public ActionResult QuestionBlocks(int vacancyId)
{
    var items = db.QuestionBlocks
        .Where(x => x.Interview.VacancyId == vacancyId)
        .Select(x => new 
        {
            ID = x.Block_ID.ToString(),
            Question1 = x.Question1,
            Question2 = x.Question2,
            Question3 = x.Question3,
            Question4 = x.Question4,
            Question5 = x.Question5,
            Question6 = x.Question6,
            Question7 = x.Question7,
            Question8 = x.Question8,
            Question9 = x.Question9,
            Question10 = x.Question10,
        })
        .ToList();
    return Json(items, JsonRequestBehavior.AllowGet);
}

我需要如何编写 ajax 调用到后端并在 div 中显示数据？

Answer 1

您好，我不确定您的要求是什么，您对逻辑的理解只是您需要的实现。

$("#Company").change(function (e) {
    var companyId = $(this).val();
    var model = {
        companyId:companyId
    };

    $.ajax({
        url: '@Url.Action("Vacancies","Questions")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false
    })
    .success(function (result) {
        console.log(result);
        console.log(result.Vacancies);

    })
    .error(function (xhr, status) {
    alert("error");
});

});

对于控制器

public ActionResult Vacancies(int companyId)
{
    // Logic to get the vacancies data
    var result = "abc";
    return Json(new { Vacancies = result }, JsonRequestBehavior.AllowGet);
}

希望上述实现对您有所帮助。 谢谢

Answer 2

下面是从 Action Method 获取 json 的 ajax 调用，它可能在下拉更改或您想要在 Success 上的其他一些事件上创建您的表结构并将其附加到下面的正文中，如果只是示例代码

    $.ajax({
            url: '@Url.Action("QuestionBlocks","YourController")',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(model),
            type: 'Get',
            dataType: 'json',
            processData: false
        })
        .success(function (result) {
           // Here do some stuff with your JSON to bind that in Table 
         var trHTML = '';

         $.each(data.Countries, function (i, item) {

          trHTML += 'Your Table Structure';
         });

          $('#YourID').append(trHTML);
        })
        .error(function (xhr, status) {
        alert("error");
     });