i am trying to render partial view(reusable) in order to delete customer with cus_id within table(list of Customers)
but every time i submit form only first row id is submitting please tell me correct solution.
#foreach (var item in Model)
{
....
<td>
#await Html.PartialAsync("~/Views/Shared/Modal.cshtml", item.cus_id)
#*<partial name="~/Views/Shared/Modal.cshtml" for="#item.cus_id"/>*#
</td>
}
Here is My View
#model int
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
</div>
The problem is in your partial view.
<i class="fas fa-trash-alt" title="Delete"></i>
You used the id selector, it will always select the first modal which id is "myModel". While all the modals' ids are the same. So, every time you submit, only the first row id is submitting.
You can apply the cus_id to the modal id to distinguish which modal should be opened.
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal_#Model" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete #Model?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
Related
I want to pass the value of #item.Id to a form out of this loop which is in the same razor page
#foreach (var item in Model.GetContracts)
{
<tr>
<td>#item.Plate</td>
<td>#item.Cname</td>
<td>#item.CheckIn.ToString("dd/MM/yyyy")</td>
<td>#item.CheckOut.ToString("dd/MM/yyyy")</td>
<td>#item.Price</td>
<td>#item.Paid</td>
<td>#item.Deposit</td>
<td>#item.Note</td>
<td>#item.Id</td>
<td><Button type="button" class="btn btn-success" data-toggle="modal" data-target="#Returned" onclick="getId">إغلاق العقد</Button></td>
<td><a class="btn btn-warning" asp-page="Returned" asp-route-Id="#item.Id">تجديد</a></td>
</tr>
}
I want to place the #item.Id in asp-route-id="#item.Id"
<!-- Modal for returned -->
<div class="modal fade" id="Returned" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"></h5>
<button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" asp-page-handler="Returned" asp-route-id="">
<input type="date" asp-for="#Model.Update" />
<input type="submit" class="btn btn-primary" />
</form>
</div>
</div>
</div>
</div>
ps: i cant put the form in the loop because it will always read the #item.Id of the first item in list because 'div cant be nested in a tr or table'
You can add the form as a separate column for your table and pass your id there.
#foreach (var item in Model.GetContracts)
{
<tr>
<td>#item.Plate</td>
<td>#item.Cname</td>
<td>#item.CheckIn.ToString("dd/MM/yyyy")</td>
<td>#item.CheckOut.ToString("dd/MM/yyyy")</td>
<td>#item.Price</td>
<td>#item.Paid</td>
<td>#item.Deposit</td>
<td>#item.Note</td>
<td>#item.Id</td>
<td><Button type="button" class="btn btn-success" data-toggle="modal" data-target="#Returned" onclick="getId">إغلاق العقد</Button></td>
<td><a class="btn btn-warning" asp-page="Returned" asp-route-Id="#item.Id">تجديد</a></td>
<td>
<div class="modal-body">
<form method="post" asp-page-handler="Returned" asp-route-id="#item.id">
<input type="date" asp-for="#Model.Update" />
<input type="submit" class="btn btn-primary" />
</form>
</div>
</td>
</tr>
}
As #Yuri said, you could put the model popup inside the TD and inside the foreach loop. But you will find it will still just call first model, since the data-target="#Returned" just set target for the #Returned to avoid this action, I suggest you could try to modify your codes to use for loop instead of using the foreach and set the each row's return model popup id with return_#i.
More details, you could refer to below codes:
#for (int i=0; i<Model.Count; i++)
{
<tr>
<td>#Model[i].Plate</td>
<td>#Model[i].Cname</td>
<td>#Model[i].CheckIn.ToString("dd/MM/yyyy")</td>
<td>#Model[i].CheckOut.ToString("dd/MM/yyyy")</td>
<td>#Model[i].Price</td>
<td>#Model[i].Paid</td>
<td>#Model[i].Deposit</td>
<td>#Model[i].Note</td>
<td>#Model[i].Id</td>
<td><Button type="button" class="btn btn-success" data-toggle="modal" data-target="#Returned_#i" onclick="getId">إغلاق العقد</Button></td>
<td><a class="btn btn-warning" asp-page="Returned" asp-route-Id="#Model[i].Id">إغلاق العقد</a></td>
<td><a class="btn btn-warning" asp-page="CheckOut" asp-route-Id="#Model[i].Id">تجديد</a></td>
<td>
<div class="modal fade" id="Returned" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"></h5>
<button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" asp-page-handler="Returned" asp-route-id="#Model[i].Id">
#item.Id
<input type="date" asp-for="#Model[i].Update" />
<input type="submit" class="btn btn-primary" />
</form>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="modal fade" id="Returned_#i" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"></h5>
<button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" asp-route-id="#Model[i].Id">
#Model[i].Id
<input type="date" asp-for="#Model[i].Update" />
<input type="submit" class="btn btn-primary" />
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
}
I have a card and what i want to do, is when a user click(create course) button it must generate new content(asp.net mvc) or dashboard that is empty. I have some ideas around this. Let me share below;
<div class="row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<!-- Modal -->
<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">Start New Course</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<label for="CourseName" class="col-sm-2 col-form-label">CourseName:</label>
<div class="col-sm-6">
#Html.EditorFor(model => model.CourseName, new { htmlAttributes = new { #class = "form-control", autofocus = "autofocus", placeholder = "CourseName" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Course</button>
</div>
</div>
</div>
</div>
// Jquery
<a class="btn btn-large btn-success" id="fire" href="/Controller/Courses.chtml#">Create Courses</a>
$('#fire').on('click', function (e) {
// dont know what to put here....?
})
I dont know if my logic is wrong and need some ideas around. Meaning what i want when i click the create button from the modal form it must take me to the new content(asp.net mvc). Something along this line
Change the href value, replace the ActionResultName and ControllerName, see below:
<a class="btn btn-large btn-success" id="fire" href="#Url.Action("ActionResultName","ControllerName")">Create Courses</a>
So i have this code here for the pictures, it works perfectly with the first but it doesn't update the modal for the next.
<a id="modal-456343" href="#modal-container-456343" role="button" class="btn" data-toggle="modal"><img src="~/Images/#(item.Id).jpg" style="height:100px; width:100px;" /></a>
<div class="modal fade" id="modal-container-456343" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
#Html.DisplayFor(modelItem => item.Overskrift)
</h4>
</div>
<div class="modal-body">
<div>
<img id="i" src="~/Images/#(item.Id).jpg" style="width:100%; height:100%">
</div>
</div>
</div>
</div>
</div>
i would like for it to update or create a new Modal when clicking on a new picture. do you guys have some suggestions?
Thanks in advance.
The problem is you have duplicate id so it would just work for the first one, your html is invalid right one because every element should have unique id, just give then unique id to make it work properly like:
<a id="#("modal-"+item.Id)" href="#("#modal-container-"+item.Id)" role="button"
class="btn" data-toggle="modal">
<img src="~/Images/#(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="#("modal-container-"+item.Id)" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
or this way:
<a id="modal-#(item.Id)" href="#modal-container-#(item.Id)" role="button"
class="btn" data-toggle="modal">
<img src="~/Images/#(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="modal-container-#item.Id)" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
I called that popup in a button click like this:
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I dont know why it is comming like that. I cant even close that.
I want it to be like this:
The code you have have works on my machine! There must be another problem outside of the code you have given. Paste this code into a blank .html document and run it then work back to what the difference is between it and yours.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have to write below code on close button event :
$('#myModal').modal('hide');
$('.modal-backdrop').removeClass('modal-backdrop');
$('.fade').removeClass('fade');
$('.in').removeClass('in');
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
Please use below code for trigger button event :
$.ajax({
url: '/test/test?id=' + id,
type: "Post",
async: false,
dataType: "html",
contentType: "application/json;charset=utf-8",
success: function (result) {
//Your div name where you want to show model popup data
$("#YourResultDivName").empty();
$("#YourResultDivName").html(result);
//your button click event trigger from here for open model popup
$("#btnhdnModelPopup").trigger('click');
}
});
Check Below HTML code for model popup :
<form id="ModelPopupForm" class="form-horizontal">
<button type="button" id="btnhdnModelPopup" style="display: none;" class="btn btn-info btn-lg" data-toggle="modal" data-target="#divModelPopup"></button>
<div class="modal fade" id="divModelPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-95" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Model Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
Your Data
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
it will work perfectly !!
I have a best practice question. I have a page with many chat rooms.
When you click on a chat room a modal prompts asking for a nickname and VIA post gets the information and takes you to the room.
The questions is, I have multiple rooms so I have one modal:
#using (Html.BeginForm("DebateV2", "Home", FormMethod.Post)){
#Html.AntiForgeryToken()
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modalTitle">
<span class="glyphicon glyphicon-lock pull-left"></span> #Resources.IngresoALaGrieta
</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="Nickname"><span class="glyphicon glyphicon-user"></span> #Resources.ElejiNombre</label>
<input type="text" class="form-control" id="Nickname" name="Nickname" placeholder="#Resources.ElejiNick">
</div>
<input type="hidden" id="Debate" name="Debate" />
<input type="hidden" id="Team" name="Team" />
<button type="submit" id="connect" disabled="disabled" class="btn btn-success btn-block"><span class="glyphicon glyphicon-fire"></span> #Resources.Entrar</button>
</form>
</div>
</div>
</div>
</div>
}
And when the button is clicked it appends some information about the chatroom to the modal form, like this:
$('.open-modal')
.each(function() {
var $this = $(this);
$this.on("click",
function() {
$("#Debate").val($(this).data('debate'));
$("#Team").val($(this).data('team'));
$("#modalTitle").val($(this).data('titulo'));
$('#myModal').modal('show');
});
});
Now I want to send some information via QUERYSTRING so I have in the browser address the name of the room like this:
www.debates.com/debate?debate=debate-name
what is the best practice to do that? I am really lost.