Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Get selected value from HTML table and return details in view model to view

$
0
0

I have the following ViewModel that is passed into the View: 

public class UserIndexViewModel
{
     public IEnumerable<User> Users;

     public User SelectedUser;
}

I have the following Controller that populates the ViewModel and passes it into the View:

    public class HomeController : Controller
    {
        private readonly IDashboardUser _usersInterface;

        public HomeController(IDashboardUser users)
        {
            _usersInterface = users;
        }

        public IActionResult Index()
        {
            var viewModel = new UserIndexViewModel
            {
                Users = _usersInterface.GetAll()
            };

            return View(viewModel);
        }

        public IActionResult GetSelectedUserDetails(int userId)
        {
            //Get selected user here using passed Id and pass back to modal to display info to user;
            return View();
        }
    }

This is a snippet of my View (apologies for the HTML dump):

<!-- Results Card --><div class="card mb-3"><div class="card-header"><i class="fa fa-table"></i>
            Search Results</div><div class="card-body"><div class="row"><div class="col-md-12"><table class="table table-bordered" id="staffTable"><thead class="thead-light"><tr><th>Name</th><th>Email</th><th>Phone Number</th><th>Details</th></tr></thead>
                        @foreach (var user in @Model.Users)
                        {<tr><td>@user.Person.FullName</td><td>@user.Email</td><td>@user.PhoneRecord?.PhoneNumber</td><td><button type="button" class="btn btn-sm btn-info" style="width: 100%"
                                            data-toggle="modal" data-target="#contactCard" asp-action="GetSelectedUserDetails"><i class="fa fa-user">
                                            Details</i></button></td></tr>
                        }</table></div></div></div></div><!-- Contact Card Modal--><div class="modal fade" id="contactCard" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Staff Contact Card</h5><button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><div class="container-fluid"><div class="row"><div class="col-sm-4"><img class="img-fluid img-thumbnail mb-3" src="images/dand.jpg" alt="staff image"/></div><div class="col-sm"><div class="form-group row"><label for="name-input" class="col-2 col-form-label">Name</label><div class="col-10"><input class="form-control" type="text" value="Dan Doughty"
                                                id="name-input" readonly/></div></div></div></div></div></div></div></div></div><!-- end logout modal -->

Reading through this code you may already workout what I am trying to do, but I'm getting rather confused.

My goal is to:

 1. Allow the user to click the Details button

 2. Get the Id of the user that they have clicked on in the table

 3. Pass it back to the Controller

 4. Get the relevant details for the user from the database

 5. Pass this instance of a user back to the view so that their details

    are displayed in the modal

I've tried using asp-action="GetSelectedUserDetails" and then creating a method in the Controller but it is expecting a View named GetSelectedUserDetails.

I'm struggling to work out how I can get the Id of the selected user in the table and pass that back to the Controller. Then I am confused about the method in which I can return the user I have got from the database back to the view without creating the page or the ViewModel again.


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>