Edit view - search form

Question

I have some basic CRUD views for a model:

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; }
}

Now, when I edit a Task, I want to have a textbox where

you can enter the username
click search
return any results that matches the criteria
select one or more users from results // this is bound to Users property
save the task

All this done within the edit view.

Everything works fine CRUD, except I don't know how to implement the search withing the edit view.

P.S. I have a feeling I need some Ajax forms with some partial view ...

consider to search about the term "WebGrid", this class using the Ajax forms, and really you will use the partial views, my team is working now on feature like this, and we use both , Ajax forms and partial views (with the WebGrid) — Hakan Fıstık, Jul 15 '15 at 09:07

score 0 · Answer 1 · answered Jul 15 '15 at 09:46

The general idea behind this solution is to request user to enter username they are searching for and then sending a request to the server for retrieving all users with that username. Once a response is received, then we dynamically populate a select with the results received from the server and make user select a username.

Note: I don't recommend you to use this solution in its current state as I always discourage mixing Javascript code with your views. I strongly recommend to move your Javascript code in a different file!

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");
    }

    ...
}

View:

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

This is just 1 possible way of searching for users. It uses Javascript DOM Manipulation and Ajax. There are several other ways of achieving this other than this one but all will involve some sort of Javascript.

Another possible way of doing this is to loading all users at the same time as loading task information on the edit page. Then search for users using Javascript within client's browser, thus removing a need for sending request to the server. I can give an example of this solution if you would like.

Edit view - search form

1 Answers1