C# 编辑视图-搜索表单

我有一些模型的基本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; }
}

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

您可以输入用户名 单击搜索 返回与条件匹配的任何结果 从结果中选择一个或多个用户//这是绑定到用户属性的 保存任务 所有这些都是在编辑视图中完成的

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

---

另外，我觉得我需要一些带有部分视图的Ajax表单…

此解决方案的总体思路是请求用户输入他们正在搜索的用户名，然后向服务器发送请求，以检索所有使用该用户名的用户。收到响应后，我们将使用从服务器收到的结果动态填充select，并让用户选择用户名

注意：我不建议您在当前状态下使用此解决方案，因为我始终不鼓励将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");
    }

    ...
}

视图：

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

---

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

你能分享你的编辑视图的一些代码吗？考虑使用Ajax表单搜索这个术语WebGrid，这个类，你真的会使用部分视图，我的团队现在正在这样的特性上工作，我们使用WebGrid的Ajax表单和部分视图。

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