Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Question
Tuesday, April 16, 2019 12:05 AM
I have a modal section at the bottom of my view and at the top I have a list of users with a button for each user. I would to open up the user details modal at the bottom with my button click. I have a ajax() that passes the userid to my controller. I know I could make a partialview and do this but is there a way to pass it to my modal at the bottom of my view?
@model IEnumerable<MVC_TimeSh.Models.UsersViewModel>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
@Html.DisplayNameFor(m => m.IdShortened)
</th>
<th>
@Html.DisplayNameFor(m => m.Name)
</th>
<th>
@Html.DisplayNameFor(m => m.Role)
</th>
<th>
@Html.DisplayNameFor(m => m.PhoneNumber)
</th>
<th>
@Html.DisplayNameFor(m => m.Email)
</th>
<th>
@Html.DisplayNameFor(m => m.UserName)
</th>
<th>
@Html.DisplayNameFor(m => m.Birthday)
</th>
<th>
@Html.DisplayNameFor(m => m.DateCreated)
</th>
<th>
View Details
</th>
</tr>
</thead>
@foreach (var item in Model)
{
<tbody>
<tr>
<td>
@Html.DisplayFor(mi => item.IdShortened)
</td>
<td>
@Html.DisplayFor(mi => item.Name)
</td>
<td>
@Html.DisplayFor(mi => item.Role)
</td>
<td>
@Html.DisplayFor(mi => item.PhoneNumber)
</td>
<td>
@Html.DisplayFor(mi => item.Email)
</td>
<td>
@Html.DisplayFor(mi => item.UserName)
</td>
<td>
@Html.DisplayFor(mi => item.Birthday)
</td>
<td>
@Html.DisplayFor(mi => item.DateCreated)
</td>
<td>
<a href="#" onclick="ShowUserDetails(id = Modal.UserId)"
class="btn btn-primary">View</a>
@*@Html.ActionLink("Modal", "DetailsModal",
new { id = item.UserId })*@
<input type="button" value="Open" onclick="UserDetails(this)"
data-assigned-id="@item.UserId" />
function UserDetails(details) {
var id = $(details).data("assigned-id");
//$('#contentBody').html(id);application/json '{userId:"'+id+'"}',
//$('#modalViewUser').modal('show'); "Url.Action("UserDetails", "Users")",
$.ajax({
url: '/Users/UserDetails',
contentType: "text",
data: { userId : id },
dataType: "html",
success: function (data) {
$("#contentBody").html(data);
$("#modalViewUser").modal("show");
},
failure: function (data) {
alert(data.responseText);
},
error: function (data) {
alert(data.responseText);
}
});
}
//data: '{ userId: "'+ id +'" }', ; charset-utf-8
function OpenMyModal(id) {
$('#modalViewUser').modal('show');
}
function ShowUserDetails(id) {
var url = '@Url.Content("~/")' + "Users/UserDetails";
$.ajax({
type: "POST",
url: url,
data: '{ UserId: "' + id + '" }',
contentType: "application/json; charset-utf-8",
dataType: "html",
success: function (response) {
$('#contentBody').html(response);
$('#modalViewUser').modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
<!-- DETAILS MODAL FOR SPECIFIED USER -->
<div class="modal fade" id="modalViewUser" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<span class="glyphicon glyphicon-user"></span>
Member Detail
</h4>
</div>
<div class="modal-body" id="contentBody">
test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="details-modal" style="display:none">
<h4>test test test</h4>
</div>
controller
public async Task<ActionResult> UserDetails(string userId)
{
try
{
if(userId == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var user = await UserManager.FindByIdAsync(userId);
return View();
}
catch(Exception ex)
{
Console.Write(ex.Message);
TempData["Error"] = "Error retrieving User Details";
return RedirectToAction("UserDashboard", "Users");
}
}
All replies (1)
Tuesday, April 16, 2019 2:33 AM âś…Answered
I got this working 100% all my data shown with a type get with ajax.
Am I suppose to be doing this with ajax( type: "POST")
Here is my code to do it normal without any type POST just a normal ajax.
public async Task<ActionResult> UserDetails(string userId)
{
try
{
if(userId == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var user = await UserManager.FindByIdAsync(userId);
UsersViewModel model = new UsersViewModel()
{
UserId = user.Id,
IdShortened = user.Id.Substring(0, 10),
Birthday = user.Birthday.ToString(),
Name = user.Name,
DateCreated = user.DateCreated.ToString(),
Email = user.Email,
PhoneNumber = user.PhoneNumber,
UserName = user.UserName
};
return PartialView("UserDetails", model);
}
catch(Exception ex)
{
Console.Write(ex.Message);
TempData["Error"] = "Error retrieving User Details";
return RedirectToAction("UserDashboard", "Users");
}function UserDetails(details) {
var id = $(details).data("assigned-id");
//application/json '{userId:"'+id+'"}',
// "Url.Action("UserDetails", "Users")",
$.ajax({
url: '/Users/UserDetails',
contentType: "text",
data: { userId : id },
dataType: "html",
success: function (data) {
$("#contentBody").html(data);
$("#modalViewUser").modal("show");
//alert(data.responseText);
},
failure: function (data) {
alert(data.responseText);
},
error: function (data) {
alert(data.responseText);
}
});<input type="button" value="Open" onclick="UserDetails(this)"
data-assigned-id="@item.UserId" /><div class="modal fade" id="modalViewUser" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<span class="glyphicon glyphicon-user"></span>
Member Detail
</h4>
</div>
<div class="modal-body" id="contentBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@model MVC_TimeSh.Models.UsersViewModel
@Html.DisplayNameFor(m => m.Name)
@Html.DisplayFor(m => m.Name)
...