Как исправить мой поиск с помощью выбора, который заполняется в бритве - PullRequest
Новая
       3

Как исправить мой поиск с помощью выбора, который заполняется в бритве

1 голос
/ 22 апреля 2019

У меня есть страница, которая ищет сотрудников по кампусу. Кампусы заселены в избранном, используя бритву. Затем я получаю всех отфильтрованных сотрудников, но на странице отказывается перерисовывать DOM с текущим числом сотрудников

У меня есть onchange () выбора, который он вызывает ajax, который будет вызывать ActionResult страницы. Это как-то работает нормально, так как возвращает правильные данные.

Выбор, заполненный бритвой 

<select placeholder="Select campus" id="selCampus" class="form-control" required>
    <option value="">Select campus</option>

    @foreach (var campus in Model.Campuses)
    {

        <option value="@campus.Id">@campus.CampusName</option>

        }
    </select>

Onchange для выбора, указывающего на контроллер действия 

$("#selCampus").change(function () {
    //$(".employee").remove();
    $.ajax({
        type: 'POST',
        url: '/admin/staff/',
        dataType: 'html',
        data: ({
            campusId: $(this).val()
        }),
        success: function () {
        }
    });
});

ActionResult, загружается при загрузке страницы и замене выбора 

public ActionResult Employees(long? campusId)
{
    var client = new RestClient(Request.Url.GetLeftPart(UriPartial.Authority).ToString());
    var request = new RestRequest("api/employee/getClinicMembers/{campusId}", Method.POST);
    request.AddParameter("campusId", campusId, ParameterType.QueryString);

    var result = client.Execute<ClinicMembersOutput>(request);

    ViewBag.title = "Home | Members";
    return View(result.Data);
}

не хочет перерисовывать этот код новыми данными, даже если Model.Employees отфильтровал данные 

@foreach (var member in Model.Employees)
{
    <div class="col-lg-4 col-xlg-3 col-md-5 employee">
        <div class="card">
            <div class="card-body">

            </div>
        </div>


    </div>

}

1 Ответ

0 голосов
/ 22 апреля 2019

https://dotnetfiddle.net/YllSay

Вы должны указать NutonSoft Json

Например,

View 

@model Testy20161006.Controllers.AneleViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut155</title>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#selCampus").change(function () {
                $.ajax({
                    type: 'POST',
                    //changing your url to fit my environment
                    //url: '/admin/staff/',
                    url: '/home/tut155/',
                    dataType: 'html',
                    data: ({
                        campusId: $(this).val()
                    }),
                    success: function (response) {
                       $("#theTargetEmplyees").empty();
                       $.each(JSON.parse(response), function (key, value) {
                            $("#theTargetEmplyees").append("<li>" + value + "</li>")
                        })
                        }
                });
            });
        })
    </script>
</head>
<body>
    <div>
        <select placeholder="Select campus" id="selCampus" class="form-control" required>
            <option value="">Select campus</option>
            @foreach (var campus in Model.Campuses)
            {
                <option value="@campus.Id">@campus.CampusName</option>
            }
        </select>
        <div></div>
        <ul id="theTargetEmplyees"></ul>
    </div>
</body>
</html>

Controller / ViewModel 

namespace Testy20161006.Controllers
{
    public class Campus
    {
        public int Id { get; set; }
        public string CampusName { get; set; }
    }

    public class AneleViewModel
    {
        public IList<Campus> Campuses { get; set; }
    }

    public class HomeController : Controller
    {
        [HttpPost]
        public string Tut155(long? campusId)
        {
            List<string> employees = new List<string>();
            switch (campusId)
            {
                case 1:
                    employees.Add("John DeVry");
                    employees.Add("Tim DeVry");
                    employees.Add("Phil DeVry");
                    break;
                case 2:
                    employees.Add("John ASU");
                    employees.Add("Tim ASU");
                    employees.Add("Phil ASU");
                    break;
                case 3:
                    employees.Add("John UofA");
                    employees.Add("Tim UofA");
                    employees.Add("Phil UofA");
                    break;
                default:
                    break;
            }
            return JsonConvert.SerializeObject(employees);
        }

        public ActionResult Tut155(int? id)
        {
            AneleViewModel vm = PopulateCampuses();
            return View(vm);
        }

        private static AneleViewModel PopulateCampuses()
        {
            AneleViewModel vm = new AneleViewModel();
            vm.Campuses = new List<Campus>();
            vm.Campuses.Add(new Campus { CampusName = "DeVry", Id = 1 });
            vm.Campuses.Add(new Campus { CampusName = "ASU", Id = 2 });
            vm.Campuses.Add(new Campus { CampusName = "UofA", Id = 3 });
            return vm;
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...