現有串列的搜索欄

我有一個包含用戶串列的頁面（asp.net 6 mvc web app with identity），我想要一個搜索欄來通過他們的電子郵件過濾這些用戶，但我不知道該怎么做

管理員控制器

public class AdminController : Controller
    {
        private readonly ILogger<AdminController> _logger;
        private readonly UserManager<ApplicationUser> _userManager;
        private readonly RoleManager<IdentityRole> _roleManager;

        public AdminController(ILogger<AdminController> logger, UserManager<ApplicationUser> userManager, RoleManager<IdentityRole> roleManager)
        {
            _logger = logger;
            _roleManager = roleManager;
            _userManager = userManager;
        }

        public async Task<IActionResult> ListOfUsersAndRoles()
        {
            
            var users = await _userManager.Users.ToListAsync();
            var userRolesViewModel = new List<UserRolesViewModel>();
            foreach (ApplicationUser user in users)
            {
                var thisViewModel = new UserRolesViewModel();
                thisViewModel.UserId = user.Id;
                thisViewModel.Email = user.Email;
                thisViewModel.Name = user.UserName;
                thisViewModel.Roles = await GetUserRoles(user);
                userRolesViewModel.Add(thisViewModel);
            }
            return View(userRolesViewModel);
        }

ListOfUsersAndRoles 視圖

<h1>List of users and roles</h1>
<table class="table">
    <thead>
        <tr>
            <th>Email</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in Model)
        {
        <tr>
            <td>@user.Email</td>
            <td>@string.Join(" , ", user.Roles.ToList())</td>
            <td>
                <a class="btn btn-primary" asp-controller="Admin" asp-action="ModifyRole" asp-route-userId="@user.UserId">Modify role</a>
            </td>
        </tr>
        }
    </tbody>
</table>

這一定很容易編碼，但作為一個初學者，我迷路了，我正在看的教程要么是針對舊版本的 asp.net，要么他們不使用 mvc、EF、身份等而不是學習，其實我越來越糊涂了。從我所看到的，我認為javascript是必要的，我對javascript一無所知

歡迎任何視頻、網站或建議

uj5u.com熱心網友回復：

由于您對 不了解javascript，所以我嘗試撰寫一個簡單的演示來實作您的目標javascript，請參考：

視圖模型

public class SearchViewModel
    {
        
        public string Email { get; set; }
        public IEnumerable<string> Role { get; set; }
        public string UserId { get; set; }
    }

控制器

public class SearchController : Controller
    {
        private readonly RoleManager<IdentityRole> roleManager;

        //if you don't use custom identityuser, you just use UserManager<IdentityUser> here
        private readonly UserManager<AppUser> userManager;
        public SearchController(UserManager<AppUser> userManager, RoleManager<IdentityRole> roleManager)
        {
            this.userManager = userManager;
            this.roleManager = roleManager;
        }
        public IActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public async Task<IActionResult> Index(SearchViewModel model)
        {
            var user = await userManager.FindByEmailAsync(model.Email);
            
            if(user != null)
            {
                var role = await userManager.GetRolesAsync(user);

                SearchViewModel viewModel = new SearchViewModel()
                {
                    Role = role,
                    Email = user.Email,
                    UserId = user.Id
                };
                return View(viewModel);
            }
            else
            {
                ViewBag.result = "User not found";
                return View();
            }
        }
    }

指數

@model SearchViewModel
<h1>List of users and roles</h1>
<form asp-controller="Search" asp-action="Index" method="post">
    <input asp-for="@Model.Email" />
    <button type="submit">search</button>
</form>
<table class="table">
    <thead>
        <tr>
            <th>Email</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        
       @if (@Model!=null)
      {
           <tr>
            <td>@Model.Email</td>
            <td>
               @foreach (var role in @Model.Role)
                    {
                        <div>@role</div>
                    }
            </td>
            <td>
                <a class="btn btn-primary" asp-controller="Admin" asp-action="ModifyRole" asp-route-userId="@Model.UserId">Modify role</a>
            </td>
            </tr>
        }
        else
        {
           
              <h3> @ViewBag.result</h3>
            
        }

    </tbody>
</table>

演示：

標籤：javascript jQuery 网 asp.net-mvc asp.net 核心

上一篇：ASP.NETMVC檢查控制器表中的值

下一篇：ASP.NETMVC-如何將串列從控制器傳遞到視圖以填充下拉串列？