How to fix my search using a select that is populated in razor

Question

I have a page that searches employees by campus. The campuses are populated in a select using razor. I then get all the filtered employees but the page refuses to redraw the DOM with the current number of employees

I have an onchange() of the select it calls an ajax that will call the ActionResult of the page. This somehow works fine since it returns the correct data.

A select populated using razor

<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 for the select pointing to the action controller

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

ActionResult, this loads on pageload and onchange of the select

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

does not want to redraw this code with new data, Even tho Model.Employees has filtered data

@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>

}

You make an AJAX call but don't do anything with the result in `success: function(result)`. — Jasen, Apr 22 '19 at 17:51

kblau · Answer 1 · 2019-04-22T21:06:12.827

https://dotnetfiddle.net/YllSay

You should nuget NewtonSoft Json

As an example,

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

How to fix my search using a select that is populated in razor

1 Answers1