编辑视图搜索表单

本文关键字：表单 图搜索 视图 编辑 | 更新日期: 2023-09-27 18:02:41

我有一些模型的基本CRUD视图:

public class Task
{
   public Task()
   {
       this.Users = new List<ApplicationUser>();
   }
   public string Id { get; set; }
   public string Name { get; set; }
   public DateTime DueDate { get; set; }
   public virtual IList<ApplicationUser> Users { get; set; }
}

现在，当我编辑任务时，我想要有一个文本框

  • 可以输入用户名
  • 点击搜索
  • 返回符合条件的任何结果
  • 从结果中选择一个或多个用户//这是绑定到Users属性
  • 保存任务

所有这些都在编辑视图中完成。

一切都很好CRUD，除了我不知道如何在编辑视图中实现搜索。

注:我有一种感觉，我需要一些Ajax表单与一些部分视图…

编辑视图搜索表单

此解决方案背后的一般思想是请求用户输入他们正在搜索的用户名，然后向服务器发送请求以检索具有该用户名的所有用户。一旦接收到响应，我们就用从服务器接收到的结果动态填充一个选择，并让用户选择一个用户名。

注意:我不建议您在当前状态下使用此解决方案，因为我总是不鼓励将Javascript代码与视图混合。我强烈建议将Javascript代码移到另一个文件中!

UsernameModel.cs 

public class UsernameModel 
{
    [Required]
    public string Username { get; set; }
}

UserController.cs 

using Newtonsoft.Json;
public class UserController : Controller
{
    ...
    [HttpPost]
    public ActionResult Get(UsernameModel model)
    {
        // user service has code to search for users 
        // whose username equals to or is similar to model.Username
        var users = userService.GetUsersByUsername(model.Username);
        var response = new 
        {
            Users = users
        };
        return Content(JsonConvert.Serialize(response), "application/json");
    }
    ...
}

视图:

<!-- HTML Markup to edit different task properties -->
<input type="hidden" id="UserSearchUrl" value="@Html.Action("Get", "User")" />
<label for="Username">Username:</label>
<input type="text" name="Username" id="Username" />
<button id="SearchUsername" type="button">Search</button>
<select id="UserSelect"></select>
<script type="text/javascript">
    $(function () {
        $('#SearchUsername').on('click', function () {
            $.ajax({
                type: "POST",
                url: $("#UserSearchUrl").val(),
                contentType: "application/json",
                data: { Username: $('#Username').val() },
                dataType: "json",
                success: function (data, textStatus, jqXHR) {
                    for (var i = 0; i < data.Users.length; i++) {
                        var option = $('<option>').attr('val', data.Users[i]);
                        option.text(data.Users[i]);
                        $('#UserSelect').append(option);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // enter error handling code here
                }
            });
        });
    });
</script>

这只是搜索用户的一种可能方式。它使用Javascript DOM操作和Ajax。除了这个方法之外，还有其他几种方法可以实现，但都涉及到某种Javascript。

另一种可能的方法是在编辑页面上加载任务信息的同时加载所有用户。然后在客户端浏览器中使用Javascript搜索用户，从而消除了向服务器发送请求的需要。如果你愿意的话，我可以给你举个例子。

相关文章：