We Keep Coding

pass the data out of #Model to a form in the same razor page

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>
}

Partial View Does not render correctly with dynamic id?

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>

Jquery Modal not showing on button click ASP.NET

I have a multi step form on a web page using ASP.NET. I have two features on a form I would like to use. Autosuggest on a textbox which works fine. Also when you click on a button I want it to show a modal which shows data from a gridview. Everytime I try and click on the button, the modal does not appear.
I have a button which calls a method in the back end this calls the gridview bind method and ClientScript.RegisterStartupScript to Open the Modal. When I debug it steps through but nothing happens. And no errors in the console.
I have an update panel wrapped around my button to prevent auto-postback on the button click as I dont want the page to refresh and start the form from the beginning again.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Create Template</li>
<li>Add Recipients</li>
<li>Select Content</li>
<li>Add Style</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create new Template</h2>
<h3 class="fs-subtitle">Provide following information</h3>
<div id="applicationselectdiv" runat="server">
</div>
<input type="text" name="tempname" placeholder="Template Name"/>
<input type="text" name="subname" placeholder="Subject Line"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Recipients</h2>
<h3 class="fs-subtitle">Add multiple recipients</h3>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="viewrecpbutton" runat="server" class="btn btn-primary" Text="View Recipients" OnClick="ViewRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<div id="recipienttypediv" runat="server">
</div>
<input type="text" id="SearchInput" class="autosuggest" name="initialname" placeholder="Initials"/>
<div id="subteamdiv" runat="server">
</div>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="addbtn" runat="server" Text="Add" OnClick="AddRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal fade" id="myModal" 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">Recipients</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" runat="server">
<asp:GridView ID="gvCurrentRecipients" runat="server" AutoGenerateColumns="true">
</asp:GridView>
</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>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Select Content</h2>
<h3 class="fs-subtitle">This is what will appear in the email</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Style</h2>
<h3 class="fs-subtitle">Colour scheme</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="submit" name="submit" class="submit action-button" value="Submit"/>
</fieldset>
</div>
</div>
</div>
</form>
protected void ViewRecipient_Click(object sender, EventArgs e)
{
GetgvRecipients();
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Order of my libraries:
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom styles for this template-->
<link href="css/cr-admin.css" rel="stylesheet"/>
<link href="NewTemplate.css" rel="stylesheet" />
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<script src="NewTemplate.js"></script>

MVC - Multiple Modals of Dynamyc Content?

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.

MVC bootstrap popup opens multiple times

When I click in a button to open my popup form, it seems that it is being opened multiple times and in the browser console I get the error "(3) Uncaught TypeError: Cannot read property 'find' of null". What am I missing?
View containing the button:
<script src="~/Scripts/myscripts/JobOffers/JobOfferPopup.js"></script>
<div id="createJobOfferModal"></div>
<div id="jobOfferButtonsBar">
<div style="float:left; padding: 0px 5px 5px 5px;">
<a class="btn btn-default" id="createJobOfferBtn" href="" data-url="#Url.Action("CreateOrUpdate", "JobOffers", new { jobOfferId = 0 })">Create</a>
</div>
</div>
Popup View Code:
<div class="modal fade bs-example-modal-lg jobOfferForm" tabindex="-1" role="dialog" aria-labelledby="createJobOffer" aria-hidden="true">
<div class="modal-dialog modal-lg" style="overflow-y:auto; max-height:70vh">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="createJobOfferLabel"> #Model.PopupTitle </h4>
</div>
<div class="modal-body" data-val="5">
<form class="form-horizontal" role="form">
<div class="form-group" style="display:none;">
<label class="col-sm-2 control-label">#Html.LabelFor(model => model.Id)</label>
<div class="col-sm-10">
#Html.HiddenFor(model => model.Id, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">#Html.LabelFor(model => model.Client) </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Client" value="#Model.Client" style="width:25%;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveJobOfferBtn" data-url="#Url.Action("CreateOrUpdate", "JobOffers" )">Save changes</button>
</div>
</div>
</div>
</div>
Jquery Code:
$(document).ready(function () {
$('#createJobOfferBtn').click(function () {
$.ajax({
url: $(this).data("url"),
type: 'GET',
cache: false,
success: function (result) {
console.log("opened");
$("#createJobOfferModal").html(result).find('.modal').modal({
show: true
});
}
});
return false;
});
});