Question

我有一个页面，可按校园搜索员工。使用剃须刀在选定区域中填充校园。然后，我得到所有已过滤的员工，但是页面拒绝使用当前员工数量重绘DOM

我有一个select的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>

}

Answer 1

https://dotnetfiddle.net/YllSay

您应该使用NewtonSoft Json

例如，

查看

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

如何使用剃须刀中填充的选择来修复我的搜索

1 个答案: