如何使用剃须刀视图在选择下拉菜单时调用操作方法

Question

<select id="TypeOfUser" name="typeOfUser" class="active text-normal">
     <option value="2" onclick="location.href='@(Url.Action("Index", "User", new { typeOfUser = 2}))'">CMS Users</option>
     <option value="3" onclick="location.href='@(Url.Action("Index", "User", new { typeOfUser = 3}))'">Site Users</option>
</select>

在选择下拉项时，我想用选定的值调用我的操作方法-

public async Task<IActionResult> Index([FromQuery] int typeOfUser = 2)
{
   SearchUsersResponse searchUserResponse = await new SearchUsersHandler(_db).Handle(new SearchUsersCommandAsync
   {
       Type = typeOfUser
   });

   return View("Index", searchUserResponse);
}

目前在下拉选择更改时我无法调用操作方法。

Answer 1

onclick 对选项不起作用。您可以做的是执行 javascript 代码以在 SELECT 元素的 onchange 事件上进行重定向。

<select id="TypeOfUser" name="typeOfUser" class="active text-normal" 
                                       onchange="doIt(this,'@Url.Action("Index", "User")')">
    <option value="2" >CMS Users</option>
    <option value="3">Site Users</option>
</select>

假设您有一个 javascript 方法，它有 2 个参数。第一个参数是对发生 onchange 事件的 SELECT 元素的引用。因此，您可以访问 value 属性 以获取所选选项的值。

function doIt(item,baseUrl) {
        window.location.href = baseUrl + '?typeOfUser=' + item.value;
}