AJAX function is not passing Id parameter to GET method in my controller.
I have this table.
@foreach (var user in Model)
{
<tr>
<td>@user.FirstName</td>
<td>@user.LastName</td>
<td>@user.Email</td>
<td>@string.Join(" , ", user.Roles.ToList())</td>
<td>
<a class="btn btn-primary" onclick="manageRolePopup('@Url.Action("Manage","Role", new {id=user.UserId },Context.Request.Scheme)')">Manage Roles</a>
<partial name="_RoleManagePopup.cshtml" />
</td>
</tr>
}
On click I want to show in popup user first name and last name so I have this in my Controller
[HttpGet]
public async Task<IActionResult> Manage(string userId)
{
var user = await _userManager.FindByIdAsync(userId);
ViewBag.FirstName = user.FirstName;
ViewBag.LastName = user.LastName;
var model = new ManageRoleViewModel();
List<string> roleNames = new List<string>();
foreach(var role in _roleManager.Roles)
{
model.RoleId = role.Id;
roleNames.Add(role.Name);
}
model.UserId = user.Id;
model.RoleNames = roleNames;
return View(model);
}
AJAX
manageRolePopup = (url) => {
$.ajax({
type: "GET",
url: url,
success: function (res) {
$("#form-modal .modal-body").html(res);
$("#form-modal").modal("show");
}
})
}
View
<form method="post" asp-controller="Role" asp-action="Manage" asp-route-UserId="@Model.UserId">
<div class="row">
<div class="col-3">
<h4>@ViewBag.FirstName @ViewBag.LastName</h4>
<div class="form-group">
<select asp-items="@new SelectList(Model.RoleNames)">
<option selected disabled>---Select New Role---</option>
</select>
</div>
</div>
</div>
</form>
When im passing Id like below, everything is good. User is not null, Id parameter also.
<a asp-controller="Role" asp-action="Manage" asp-route-UserId="user.UserId"></a>
Obviously I want to do UPDATE method but for now I just want to have it displayed.
CodePudding user response:
you have to add userId to your ajax url
manageRolePopup = (userId) => {
var url = @Url.Action("Manage","Role");
$.ajax({
type: "GET",
url: url "?UserId=" userId,
....
Since you have a list of UserIds you need or add UserId data attribute to you ancore tag, or push it as input parameter
<a class="btn btn-primary" onclick="manageRolePopup(@user.UserId)>Manage Roles</a>
but it is better to use modern javascript syntax
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".userBtn", (function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var userId= this.id;
var url = @Url.Action("Manage","Role");
$.ajax({
type: "GET",
url: url "?UserId=" userId,
....
}));
});
</script>
and view
<a id="@user.UserId" class="userBtn btn btn-primary"> Manage Roles </a>