How to pass ID to controller and use it to display data on modal - asp.net

Question

I have passed the UserID to the table as shown in the code:
View
#foreach (var user in Model.RIROUsers)
{
<tr>
<td class="text-center">#(user.FirstName + " " + user.LastName)</td>
<td>View Details</button>
</tr>
}
Modal
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group col-md-4 col-md-offset-2">
<label for="">* Address</label>
<input type="text" class="form-control input-sm" value="">
<label for="">* Birthday</label>
<input type="text" class="form-control input-sm" value="">
<label for="">* Contact</label>
<input type="text" class="form-control input-sm" value="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Controller
public ActionResult Index()
{
var vm = new RIROViewModel();
vm.RIROUsers = new List<ResourceViewModel>();
foreach (var user in db_RIRO.sp_GetAllRIRORoster())
{
vm.RIROUsers.Add(new ResourceViewModel()
{
EID = user.EID,
FirstName = user.FirstName,
LastName = user.LastName,
EmployeeType = user.EmployeeType,
ProjectName = user.ProjectName,
JobTitle = user.JobTitle,
Level = user.CareerLevel,
ACNRollOn = user.HireDate,
ManagerName = user.Manager,
LeadName = user.Supervisor,
UserID = user.UserID
});
}
return View(vm);
}
Now when I click View Details I want the details of the user to display on the modal. What would be the best approach on this? I'm thinking of creating another stored procedure to retrieve the User's details and display it on the modal. But how do I do this?
EDIT 1: Changed button to a href=~/Views/RIRO/id=#user.UserID

Answer 1

As Shyju said, use click DOM event to the anchor link to show modal popup. Here are the steps:
1) Put Url.Action with proper controller and action name into href attribute of anchor link, then assign a class name to help identify each link.
<a href="#Url.Action("Details", "User", new { id = user.UserID })"
class="btn btn-xs btn-primary details" data-toggle="modal"
data-target="#exampleModal" data-id="#user.UserID">View Details</a>
2) Handle click DOM event using JS which rather than opening a new window/tab in browser, it should open modal popup instead (by using jQuery.ajax(), jQuery.get() or jQuery.load()):
$('.details').click(function (ev) {
ev.preventDefault(); // this is required
// get target action
var action = $(this).attr('href');
$.get(action, function (data) {
$(this).find(".modal-body").html(data);
$('#exampleModal').modal('show');
});
});
// alternative way
$('.details').click(function (ev) {
ev.preventDefault(); // this is required
// get target action
var action = $(this).attr('href');
$('.modal-body').load(action, function () {
$('#exampleModal').modal('show');
});
});
3) Ensure that target action method returns partial view which will loaded to the modal popup.
public ActionResult Details(int id)
{
var vm = new RIROViewModel();
// do something to retrieve data from DB
return PartialView("_Details", vm);
}
References:
Implementing Bootstrap Modal Popup In MVC Application
How to get anchor text/href on click using jQuery?