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...
Related
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>
I started to learn some basic c# and im trying to find my way into ASP.net
I am running the following code with some help from this video: https://www.youtube.com/watch?v=C5cnZ-gZy2I (time stamp: 1 hour and 50min)
public class BestellenModel : PageModel
{
private ApplicationDbContext _db;
public BestellenModel(ApplicationDbContext db)
{
_db = db;
}
[BindProperty]
public Bedrijven Bedrijven { get; set; }
public async Task OnGet(int id)
{
Bedrijven = await _db.Bedrijven.FindAsync(id);
}
}
}
In the video whenever the edit button is pressed the right data from the data base appears on screen. For me nothing appears but whenever i click on my url and hit enter again the data appears.
I tried the debug option within VS and i saw that the line FindAsync doesn't run when hitting the button. But when i click enter on the url then it runs the code. My url looks like this: https://localhost:7005/Bedrijfslijst/Bestellen?id=32
Can anyone tell me what i am missing here? because i am a bit stuck.
Edit:
Now whenever the client Clicks on the "kopen" button it needs to render the data from the db to the fields.
This is a screenshot from the yt video, its supposed to show the data when the page is loaded. For me its not loading but whenever i click on the url and hit enter then the db data will load in.
cshtml script:
#page
#model test1v1.Pages.Bedrijfslijst.BestellenModel
<br />
<h2 class="text-primary">Rapport bestellen</h2>
<br />
<div class="border container" style="padding:120px;">
<form method="post">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="form-group row" style="padding:10px;">
<div class="col-4">
<label asp-for="Bedrijven.Kvk"></label>
</div>
<div class="col-4">
<input asp-for="Bedrijven.Kvk" class="form-control" />
</div>
<span asp-validation-for="Bedrijven.Kvk" class="text-danger"></span>
</div>
<div class="form-group row" style="padding:10px;">
<div class="col-4">
<label asp-for="Bedrijven.Bedrijfsnaam"></label>
</div>
<div class="col-4">
<input asp-for="Bedrijven.Bedrijfsnaam" class="form-control" />
</div>
<span asp-validation-for="Bedrijven.Bedrijfsnaam" class="text-danger"></span>
</div>
<div class="form-group row" style="padding:10px;">
<div class="col-4">
<label asp-for="Bedrijven.Adres"></label>
</div>
<div class="col-4">
<input asp-for="Bedrijven.Adres" class="form-control" />
</div>
<span asp-validation-for="Bedrijven.Adres" class="text-danger"></span>
</div>
<div class="form-group row" style="padding:10px;">
<div class="col-3 offset-4">
<input type ="submit" value="Bestellen" class="btn btn-success form-control" />
</div>
<div class="col-3">
<a asp-page="index" class="btn btn-primary form-control">Terug</a>
</div>
</div>
</form>
</div>
#section Scripts{
<partial name ="_ValidationScriptsPartial"/>
}
Edit2:
#page
#model test1v1.Pages.Bedrijfslijst.IndexModel
<br />
<div class="container row p-0 m-0">
<div class="col-9">
<h2 class="text-primary">Bedrijf Lijst</h2>
</div>
<div class="col-3">
<a asp-page="Zoeken" class="btn btn-primary form-control text-white">Bedrijf Zoeken</a>
</div>
<div class= "col-10 border p-4 mt-4">
<form method="post">
#if (Model.Bedrijven.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="Bedrijven.FirstOrDefault().Kvk"></label>
</th>
<th>
#*#Html.DisplayNameFor(m=>m.Books.FirstOrDefault().Author)*#
<label asp-for="Bedrijven.FirstOrDefault().Bedrijfsnaam"></label>
</th>
<th>
<label asp-for="Bedrijven.FirstOrDefault().Adres"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.Bedrijven)
{
<tr>
<td>
#Html.DisplayFor(m=>item.Bedrijfsnaam)
</td>
<td>
#Html.DisplayFor(m=>item.Kvk)
</td>
<td>
#Html.DisplayFor(m=>item.Adres)
</td>
<td>
<button asp-page="Bestellen" asp-route-id="#item.Id" class="btn btn-primary btn-sm">Kopen</button>
</td>
</tr>
}
</table>
}
else
{
<p>Geen Bedrijven Gevonden.</p>
}
</form>
</div>
</div>
I hava a list of objects in my view. In a table, with some conditions I create rows and add a button. I want to pass that row's data to my controller when button of modal-footer is pressed. I tried ajax request and forms but I could not manage that up. What is coming to my controller is always the first element of list.
My view:
<table class="table border-bottom dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr><th rowspan="1">Saat</th><th rowspan="1">Durum</th></tr>
</thead>
#{int i = 0; }
#foreach (var v in Model)
{
<tbody>
<tr>
#if (v.IsActive == 1)
{
<td>#v.Hour.ToString():#v.Minute.ToString().ElementAt(0)0</td>
<td><p class="blckpassive">Dolu</p></td>
}
else
{
<td>#v.Hour.ToString():#v.Minute.ToString().ElementAt(0)0</td>
<td><p class="blckactive">Boş</p></td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Randevu Al</button></td>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Emin Misiniz?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Seçtiğiniz Randevuyu Almak İstiyor Musunuz?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
<a type="button" href="/Appointment/AddAppointment?hour=#v.Hour" class="btn btn-primary">Evet</a>
</div>
</div>
</div>
</div>
}
</tr>
</tbody>
i++;
}
</table>
Controller:
public IActionResult AddAppointment(int hour)
{
return null;
}
Objects in list has hour and minute variables which are int and sorted as "9:00,9:30,10:00,10:30...16:00".
What is coming to my controller is always the first element of list.
You put the code of popup modal dialog in a foreach loop, if you check the html source code, you can find that multiple button(s) with same value #exampleModal of data-target attribute, and target modal(s) with same value exampleModal of id attribute, which cause the above issue.
To resolve this issue and make modal popup works well, you can modify the code as below to make the data-target attribute of button trigger and id attribute of modal unique within the HTML document.
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target=#("#exampleModal"+i)>Randevu Al</button></td>
<div class="modal fade" id=#("exampleModal"+i) tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Test Result
I am currently trying to find my way around Blazor Pages.
At the moment I am trying to open a bootstrap model when clicking on a button.
I tried to implement this with a child component (WorkoutsDetail.razor).
However, I don't know what I'm doing wrong, The properties of the model are bind to the input controls using bind-value.
Does anyone have a tip on what else I need to pay attention to?
This is the page where the Button (AddTask) should open the model
#page "/workouts"
#using Tracker.Data
#using Tracker.Services
#inject IWorkoutsListService service
<h3>Workout Plans</h3>
#if (workoutsNames == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach (var workouts in workoutsNames)
{
<tr>
<td>#workouts.Name</td>
<td><button type="button" class="btn btn-primary" value="Edit">Edit</button></td>
<td><input type="button" class="btn btn-danger" value="Delete" /></td>
</tr>
}
</tbody>
</table>
}
<div>
<input type="button" data-toggle="modal" data-target="#workoutsModal" class="btn btn-primary" value="Add Task" #onclick="(() => InitializeTaskObject())" />
</div>
<WorkoutsDetail WorkoutObject=workoutObject></WorkoutsDetail>
#code {
List<Tracker.Data.Workouts> workoutsNames;
Tracker.Data.Workouts workoutObject = new Tracker.Data.Workouts();
protected override async Task OnInitializedAsync()
{
workoutsNames = await service.Get();
}
private void InitializeTaskObject()
{
workoutObject = new Tracker.Data.Workouts();
}
}
This is where I set the Model
#using Tracker.Data
#using Tracker.Services
#inject IWorkoutsListService service
#inject IJSRuntime jsRuntime
<div class="modal" tabindex="-1" role="dialog" id="workoutsModal" style=" display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Workout Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<EditForm Model="#WorkoutObject" OnValidSubmit="#HandleValidSubmit">
<div class="form-group">
<label for="workoutName">Workout Name</label>
<input type="hidden" #bind-value="#WorkoutObject.Id" />
<InputText id="name" class="form-control" #bind-Value="#WorkoutObject.Name" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</EditForm>
</div>
</div>
</div>
</div>
#code {
[Parameter]
public Tracker.Data.Workouts WorkoutObject { get; set; }
List<string> TaskStatusList = new List<string>() { "New", "In Progress", "Completed" };
private async void HandleValidSubmit()
{
}
}
The way that I achieved this is by using the IJSRuntime and calling the bootstrap method "modal.show" on the desired model and "modal.hide" when I no longer need it:
I started by importing the JSInterop namespace
using Microsoft.JSInterop;
Then I used the InvokeVoidAsync method to call "modal.show"
await JS.InvokeVoidAsync("modal.show", "ConfirmationModal");
This is the HTML:
<div id="#Id" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">#Title</h4>
<button type="button" class="close" aria-label="Close" #onclick="OnCloseClick">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Body
</div>
<div class="modal-footer">
#Actions
</div>
</div>
</div>
Note that the reason why the id is set to #id is because I created a blazor component and reused it throughout by site
You can (but don't need to) use JSInterop to open or close modals, when using data-attributes. I use this in my blazor project exactly as you have attempted to do - apart from the following differences:
If you are using the latest version of Bootstrap (V5) - please ensure your data attributes are named correctly:
data-bs-toggle="modal" data-bs-target="#workoutsModal"
If you leave out the -bs- with Bootstrap V5 it won't work - even though it did work with earlier versions. I also note your modal seems to be based on an older version of Bootstrap. Just ensure that you are following the conventions of the version actually included in your <head> section.
I don't have display: block set for my modal (I don't need any additional styles in order for this to work).
I ran your code, it works for me.
Hope you added bootstrap related javascript link in index.html
also remove
style=" display: block;
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>