Получить данные через AJAX и вывести в div (ASP.NET MVC)

381
05 апреля 2017, 12:53

Есть такая View

Собственно вот скрин

Компания и Вакансия сделаны селекторами, то есть когда выбираем компанию, в вакансию автоматом грузятся данные из свзязанной таблицы.

Реализовано это так

Код View

<div class="inner-div2">
   <div style="width: 50%;float: left;background: #f2f2f2;height: 100%;">
       <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>
       <div style="text-align:center">
           <input id="display" class="btn btn-default" type="button" style="margin-top:10px;"  value="Показать" />
       </div>
       <div id="list" style="margin-left:20px;width:93%; text-align:center;background:white;height:68%;margin-top:20px; border-style:solid; border-radius:5px;"></div>
       </div>

Собственно в div id=list мне нужно выводить все вопросы с привязкой к id вакансии

Тут схема моей бд

Для DropDown List код уже написан

Вот он

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

На контроллере так для вакансий

 public ActionResult Vacancies(int companyId)
    {
        var items = db.Vacancy
                      .Where(x => x.CompanyID == companyId)
                      .Select(x => new SelectListItem
                      {
                          Value = x.VacancyId.ToString(),
                          Text = x.VacancyName
                      })
                      .ToList();
        return Json(items, JsonRequestBehavior.AllowGet);
    }

Для вопросов я сделал так на контроллере

[HttpPost]
    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);
    }

И так на Вьюхе

    $(document).ready(function () {
    $('#display').click(function () {
        get();
    });
});
function get() {
    $("#vacancy").change(function (e) {
        var $vacancy = $("#question");
        var url = $vacancy.data("url") + '?vacancyId=' + $(this).val();
        $.ajax({
        url: '@Url.Action("QuestionBlocks","YourController")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false
    })
    .success(function (result) {
        alert("test");
     });
    });
}

Но прикол в том, что для вопрос аякс не отрабатывает, не могу понять почему. То есть по кнопке мне надо передавать айдишник с селектора Вакансий на контроллер и возвращать выбранные данные.

И второй вопрос, как мне вывести список Question1-Question10 для выбранного блока?

UPDATE

Решил пойти таким путем, получать айдишник из селектора Вакансий так

<script>
$('#display').click(function () { 
    var getValue = $("#vacancy").val();
    alert(getValue);
}); 

Все работает как нужно.

Остается открытым вопрос, как передать айдишник на контроллер, получить данные и вернуть их.

И собственно 2 вопрос тоже остался открытым, по поводу вывода вопросов

Answer 1

Собственно я разобрался

вот такой код позволяет получить данные

<script>
    $('#display').click(function () {
        var vacancyId = $("#vacancy").val();
        var model = {
            vacancyId: vacancyId
    };
    $.ajax({
        url: '@Url.Action("QuestionBlocks", "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.QuestionBlocks);
    })
    .error(function (xhr, status) {
    alert("error");
});
});
</script>
READ ALSO
C# определить является ли процесс фоновым

C# определить является ли процесс фоновым

Получаю список все процессов командой

383
В чем разница между разработкой на C# в winforms и UWP?

В чем разница между разработкой на C# в winforms и UWP?

Расскажите в чем разница при разработке программы на C# в winforms и UWP? Есть ли разница в написании кода и если да то насколько? В данном вопросе...

314
Asp Net Core на IIS работает только на localhost

Asp Net Core на IIS работает только на localhost

Как настроить IIS+Asp Net Core для доступа из интернета? На данный момент доступ есть только с localhost- остальным запросам сервер выдаёт ошибкуКак...

350