i am trying to pass #item.PhanHoi.ID to modal but it #item.PhanHoi.ID only stops at first number of loop, is there any way to pass id to modal? Thanks
<tbody>
#foreach (var item in ViewBag.DsPhanHoi)
{
<tr class="sacss">
<td></td>
<td>#item.PhanHoi.Ten</td>
<td>#item.PhanHoi.NoiDung</td>
<td>#item.PhanHoi.TGphanhoi</td>
<td>#item.PhanHoi.SDT</td>
<td>#item.PhanHoi.Email</td>
<td>#item.PhanHoi.DiaChi</td>
<td class="datatable-ct">
<div class="button-ap-list responsive-btn">
<div class="btn-group btn-custom-groups" style="margin-left:26%">
<a class="btn btn-primary" href="#Url.Action("XemPH", new { id = item.PhanHoi.ID })"><i style="font-size:15px" class="fa fa-info-circle" aria-hidden="true"></i></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#DangerModalalert" data-item="#item.PhanHoi.ID"><i style="font-size:15px" class="fa fa-trash" aria-hidden="true"></i></a>
<div id="DangerModalalert" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<span class="educate-icon educate-danger modal-check-pro information-icon-pro"></span>
<h2>Cẩn thận!</h2>
<p>Việc này sẽ xóa phản hồi này vĩnh viễn!!!</p>
</div>
<div class="modal-footer danger-md">
<a data-dismiss="modal" href="#">Hủy bỏ</a>
<a style="background-color:red" href="#Url.Action("XacNhanXoaPH", new {id = #item.PhanHoi.ID })">Xóa!!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
The id of modal is not unique,you can try to make it unique,so that it will not always call the first modal.You can use the following code:
<tbody>
#{ var count = 0;}
#foreach (var item in ViewBag.DsPhanHoi)
{
<tr class="sacss">
<td></td>
<td>#item.PhanHoi.Ten</td>
<td>#item.PhanHoi.NoiDung</td>
<td>#item.PhanHoi.TGphanhoi</td>
<td>#item.PhanHoi.SDT</td>
<td>#item.PhanHoi.Email</td>
<td>#item.PhanHoi.DiaChi</td>
<td class="datatable-ct">
<div class="button-ap-list responsive-btn">
<div class="btn-group btn-custom-groups" style="margin-left:26%">
<a class="btn btn-primary" href="#Url.Action("XemPH", new { id = item.PhanHoi.ID })"><i style="font-size:15px" class="fa fa-info-circle" aria-hidden="true"></i></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#DangerModalalert_#count" data-item="#item.PhanHoi.ID"><i style="font-size:15px" class="fa fa-trash" aria-hidden="true"></i></a>
<div id="DangerModalalert_#count" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<span class="educate-icon educate-danger modal-check-pro information-icon-pro"></span>
<h2>Cẩn thận!</h2>
<p>Việc này sẽ xóa phản hồi này vĩnh viễn!!!</p>
</div>
<div class="modal-footer danger-md">
<a data-dismiss="modal" href="#">Hủy bỏ</a>
<a style="background-color:red" href="#Url.Action("XacNhanXoaPH", new {id = #item.PhanHoi.ID })">Xóa!!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
count++;
}
</tbody>
Related
I have a problem displaying the data that I got in Controller from ajax.
What I want to do?
I'm displaying a list of "Candidate" with a specific function (Candidate is my Model) like this:
The View for this :
<form method="post" asp-action="Index" >
<div class="panel panel-primary" style="margin-left: -190px">
<div class="panel-heading" >
<center>
CEO
</center>
</div>
<div class="panel-body" >
<div id="position">
#foreach(var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.CEO))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
#*<center><input type="checkbox" value="" name="ceo_id" class="ceo"></center>*#
#if (User.IsInRole("User"))
{
<center><input type="checkbox" value="#candidate.candidate_id" name="ceo_id" class="ceo" ></center>
//<div id="log">#candidate.candidate_id</div>
}
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
#*<a class="btn btn-success btn-block" onclick="SaveList()" asp-action="voteresult"> Voteaza </a>*#
</div>
</div>
</ul>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
Product Manager
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.ProductManager))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="productmanager_id" class="productmanager"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
CTO
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.CTO))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="cto_id" class="cto"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
Sales Manager
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.SalesManager))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="salesmanager_id" class="salesmanager"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
Finance Manager
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.FinanceManager))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="financemanager_id" class="financemanager"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
HR
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.HR))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="hr_id" class="hr"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -7px; margin-right: -100px;">
<div class="panel-heading">
<center>
Accountant
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.Accountant))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="accountant_id" class="accountant"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
#*#Html.ActionLink("Come back to Home", "voteresult", "Candidate")*#
<button class="btn btn-success ballot" type="submit"SaveList" name="submit" asp-controller="Candidate" asp-action="voteresult">Vote</button>
</form>
<script>
var SaveList = function() {
var checkboxData = $(".ceo:checked").val();
console.log(checkboxData);
$.ajax({
url: "/Candidate/voteresult",
type: 'POST',
dataType: 'json',
data: { guid: checkboxData }
//la fiecare click sa iti retina id-ul candidatului si aboa la final (
});
}
</script>
What I wanted to do was to send to controller the id of the selected one, and I used for that an ajax POST. I got my id of the selected on in my controller, and my controller called ,,Candidate" Looks like that:
[HttpPost]
public async Task<IActionResult> voteresult (Guid guid)
{
var candidate = await _context.Candidatati.FirstOrDefaultAsync(x => x.candidate_id == guid);
ViewBag.Message = candidate;
return View();
}
Now when I press the Button ,,Vote" I want to get my ViewBag Messsage to "voteresult" View. It looks like that:
#using eVote.Models;
<h1>Salut</h1>
<div class="col-lg-8" style="margin-left:240px;">
<div class="alert alert-info">
<label>CEO</label>
<br />
#{
var data = ViewBag.Message;
}
<p>#data.candidate.id</p>
</div>
</div>
But I got the message not found. I tried to make the post of checkbox value on click but if I done that, if goes to the controller with the correct id, but after I press button it goes to the controller with empty id. The main question is, how to go "voteresult" View keeping my checkbox data from controller?
I hope some can help me with this.
I have a list within a model and I want to add objects to that list using a form in a razor view before I save it to a database
This is the model that I have:
public class ActivityForm
{
public string Name { get; set; }
public string Description { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int Points { get; set; }
public List<Award> Awards { get; set; }
}
This is the code for my view:
#model ActivityForm
#{
ViewData["Title"] = "Activity Details";
}
<section class="my-sm-5">
<div class="container">
<div class="section-header d-flex mb-5">
<h1 class="h-02 flex-grow-1">Activity Details</h1>
</div>
<div class="row">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-12">
<label asp-for="Name" class="form-label">#Html.DisplayNameFor(model => model.Name)</label>
<input asp-for="Name" type="text" class="form-control" id="inputEmail4"
placeholder="#Html.DisplayNameFor(model => model.Name)">
<span asp-validation-for="Name" class="invalid-feedback"></span>
</div>
<div class="col-12">
<label asp-for="Description" class="form-label">#Html.DisplayNameFor(model =>
model.Description)</label>
<textarea asp-for="Description" class="form-control" id="exampleFormControlTextarea1" rows="5"
placeholder="#Html.DisplayNameFor(model => model.Description)"></textarea>
<span asp-validation-for="Description" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="StartDate" class="form-label">#Html.DisplayNameFor(model =>
model.StartDate)</label>
<input asp-for="StartDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.StartDate)">
<span asp-validation-for="StartDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="EndDate" class="form-label">#Html.DisplayNameFor(model => model.EndDate)</label>
<input asp-for="EndDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.EndDate)">
<span asp-validation-for="EndDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4 mb-6">
<label asp-for="Points" class="form-label">#Html.DisplayNameFor(model => model.Points)</label>
<input asp-for="Points" type="number" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.Points)">
<span asp-validation-for="Points" class="invalid-feedback"></span>
</div>
<div class="col-8 d-grid gap-2">
<a class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#add-award">Add award</a>
<div class="row">
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#cancel-activity">Cancel</a>
</div>
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#post-activity">Post Activity</a>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Award name</th>
<th scope="col">Description</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < 1; i++)
{
<tr>
<td>Award Name</td>
<td>Award Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</section>
<div class="modal" id="add-award" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content br-20 pd-20">
<div class="modal-header justify-content-center">
<h5 class="modal-title h-04 text-prim-color">Award details</h5>
</div>
<form class="row g-3">
<div class="modal-body">
<div class="row g-3">
<div class="col-md-12">
<label asp-for="Award.Name" class="form-label">Name</label>
<input asp-for="Award.Name" type="text" class="form-control" id="inputEmail4">
</div>
<div class="col-12">
<label asp-for="Award.Description" for="inputAddress" class="form-label">Description</label>
<textarea asp-for="Award.Description" class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Close</button>
<input class="btn btn-primary w-100" type="submit" value="Confirm"></input>
</div>
</form>
</div>
</div>
</div>
My form is within a modal and when I click the submit button I want to create an Award object with the values from the form. After the object is created I want to add it to the Awards List and have the changes reflect on the view.
This is what the View looks like:
View with modal
And this is how it will look like after the object has been added:
View after object is added
You should first fix some issues:
Right now your form does not have a binding for the ActivityForm.Awards property. You should change:
<tbody>
#for (int i = 0; i < 1; i++)
{
<tr>
<td>Award Name</td>
<td>Award Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
To:
<tbody>
#for (var i = 0; i < Model.Awards.Count; i++)
{
<input type="hidden" asp-for="#Model.Awards[i].Name" />
<input type="hidden" asp-for="#Model.Awards[i].Description" />
<tr>
<td>#Model.Awards[i].Name</td>
<td>#Model.Awards[i].Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
Documentation for binding model to a collection: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-6.0#collections-1
Your form should wrap around both Form and Awards sections:
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
...
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
...
</div>
</form>
You should also change:
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#post-activity">Post Activity</a>
to an actual submit button:
<button type="submit" class="btn btn-outline-primary w-100">Post Activity</button>
Now if you manually add some awards to the Awards list from your Controller,
return View(new ActivityForm
{
Awards = new List<Award>
{
new Award { Name = "Name", Description = "Descr" },
new Award { Name = "Award 2", Description = "Descr 2" }
}
});
the awards will be displayed properly and also when you submit the form the ActivityForm.Awards list will be populated with the awards you added manually.
These issues need to be fixed before you go on and implement the add award form inside the modal.
In my loop I'm creating a table from the model with a loop but when I use my delete function it returns back an array of all ID's instead of the singular clicked.
<tbody id="itemTable">
#foreach (var item in Model.tableItems)
{
<tr>
<td id="idRow">#item.ID</td>
<td>#item.MemberName</td>
<td>#item.Details</td>
<td>#item.StatusDesc</td>
<td class="justify-content-center">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notesModal-#item.ID">
<i class="fas fa-plus fa-2x"></i>
</button>
<button type="button" class="btn btn-danger" id="showDeleteModalBtn" data-toggle="modal" data-target="#deleteModal-#item.ID" data-show="true">
<i class="fas fa-trash-alt fa-2x "></i>
</button>
<!---------------------- DELETE MODAL------------------------------------------>
<div class="modal fade" id="deleteModal-#item.ID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="titleLabel">Are you Sure?</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>#item.ID</div>
where I am assigning the ID
<input type="hidden" name="ID" id="itemID-#item.ID" value="#item.ID" asp-for="ID" />
<label class="form-text text-muted">Delete for #item.MemberName ?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete<i class="fas fa-trash-alt ml-2"></i></button>
</div>
</div>
</div>
</div>
}
And here is what its returning.
Maybe because your modal is inside the for loop?
Answer: My Form was submitting all I had to re arrange the form to submit only the model in the loop instead of capturing all.
<tbody id="dissatTable">
#foreach (DissatisfactionTableModel item in Model.tableItems)
{
<tr>
<td>#item.ID</td>
<td>#item.MemberName</td>
<td>#item.Details</td>
<td>#item.StatusDesc</td>
<td class="justify-content-center">
<form action="/Dissatisfactions/DeleteDissat" method="post">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notesModal">
<i class="fas fa-plus fa-2x"></i>
</button>
<button type="button" class="btn btn-danger" id="showDeleteModalBtn" data-toggle="modal" data-target="#deleteModal-#item.ID" data-show="true">
<i class="fas fa-trash-alt fa-2x "></i>
</button>
<!---------------------- DELETE MODAL------------------------------------------>
<div class="modal fade" id="deleteModal-#item.ID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="titleLabel">Are you Sure?</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input id="dissatID" type="text" name="ID" value="#item.ID" asp-for="ID" />
<label class="form-text text-muted">Delete Dissat for #item.MemberName ?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" onclick="">Delete<i class="fas fa-trash-alt ml-2"></i></button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
}
</tbody>
I have a table from my view and it loads data from my Mysql db and once you click the button update in the table it will have a pop-up which supposedly load the details from my table and my problem is it is not getting the correct value, every time that I will clicked any on my row table it will have the same value.
Here is my View:
<table border="1">
<thead>
<tr>
<th>OP</th>
<th>OP Desc</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.op</td>
<td>#item.op_desc</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Update</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><b>Update selected values:</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>
OP:
</dt>
<dd>
#item.op
</dd>
<dt>
OP Desc:
</dt>
<dd>
#item.op_desc
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
so rather than displaying on my current tab I decided to pass it to modal to make it as pop-up
The problem is all of your buttons are pointing to the same modal:
data-target="#exampleModalCenter"
and all of your modals have the same id (which is not a valid HTML):
id="exampleModalCenter"
To fix the problem, you need to give each modal a unique id, something like this:
#foreach (var item in Model)
{
<button data-toggle="modal" data-target="##Model.UseSomeUniqueProperty" // other attributes...
<div id="#Model.UseSomeUniqueProperty" class="modal fade" // other attributes
// rest of your code...
I want to pass a list of objects to modal popup which is represented as view in a separate .cshtml file
here what I did :
first, I have the following index.cshtml view:
#model E_Voucher.Models.Contract
#{
ViewBag.Title = "Details";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
Contract #Html.DisplayFor(model => model.ContractId) Details
</div>
</div>
<div class="portlet-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
Info
</li>
<li>
Projects
</li>
<li>
Devices
</li>
<li>
Cards
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_info">
#1 Tab
</div>
<div class="tab-pane" id="tab_project">
#2 Tab
</div>
<div class="tab-pane" id="tab_devices">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="actions" style="padding-left:5px">
<a class="btn btn-circle btn-outline red" data-target="#AssignDeviceModal" data-toggle="modal">
<i class="fa fa-plus"></i>
<span class="hidden-sm hidden-xs">Assign Device </span>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_cards">
#4Tab
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AssignDeviceModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
#Html.Action("AssignDevice")
</div>
</div>
</div>
</div>
</div>
the index.cshtml view contains 4 tabs, in the device_tab there is a button which is responsible to show a modal popup contains all the available device to the user, as you can see in the div with id=AssignDeviceModal I put a #Html.Action("AssignDevice") to call the Action Method AssignDevice which fetch the devices from DB, and render the following AssignDevice.cshtml view:
#model IEnumerable<E_Voucher.Models.Device>
<div class="modal-header">
<h4 class="modal-title">Assign Device</h4>
</div>
<div class="modal-body">
#*for example print the brand of device*#
#foreach (var item in Model)
{
<li>#item.Brand</li>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
and here is the Action Method AssignDevice:
public ActionResult AssignDevice()
{
List<Device> _dev = new List<Device>();
Device dev1 = new Device();
dev1.Brand = "Samasung";
_dev.Add(dev1);
Device dev2 = new Device();
dev1.Brand = "SONY";
_dev.Add(dev2);
return View(_dev);
}
the problem is, when I click the button, the popup modal is shown and disappeared immediately !
how to fix this ?