编辑视图 - 搜索表单答案

【问题标题】：Edit view - search form编辑视图 - 搜索表单
【发布时间】：2015-07-15 08:52:51
【问题描述】：

我有一些模型的基本 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 表单...

【问题讨论】：

你能分享一些你编辑视图的代码吗？
考虑搜索“WebGrid”这个词，这个类使用 Ajax 表单，实际上你会使用部分视图，我的团队现在正在开发这样的功能，我们同时使用 Ajax表单和部分视图（使用 WebGrid）

标签： c# asp.net-mvc-5 asp.net-mvc-viewmodel asp.net-mvc-views

【解决方案1】：

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

注意：我不建议您在当前状态下使用此解决方案，因为我始终不鼓励将 Javascript 代码与您的视图混合使用。我强烈建议将您的 Javascript 代码移动到不同的文件中！

UsernameModel.cs

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

用户控制器.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 搜索用户，从而无需向服务器发送请求。如果你愿意，我可以举一个这个解决方案的例子。

【讨论】：