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

How to create new form when clicking button in asp.net mvc or jquery?

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>

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>

On After Render a Modal razor component start a JavaScript

I have a blazor app with an razor component as modal open by
Open the modal.razor
<ModalScan #ref="ModalScan"><p>Scanner</p></ModalScan>
<button class="btn btn-primary" #onclick="ScanStart">Start Scann</button>
#code{
ModalScan ModalScan;
void ScanStart()
{
ModalScan.Show();
}
}
the modal.razor
#if (_Show)
{
<div class="modal fade show" style="display: block;">
<div class="modal-dialog" style="width: 90%;" #>
<div id="modal_fullscreen" class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Scanner</h5>
<button type="button" class="close" data-dismiss="modal" #onclick="Show">×</button>
</div>
<div class="modal-body">
<form>
<div class="container">
<div class="form-row">
<div id="loadingMessage">Unable to access video stream </div>
<canvas style="width: 100%;" id="canvas" hidden></canvas>
<div id="output" hidden>
<div id="outputMessage">No detected.</div>
<div hidden>
<input type="text" id="outputData" value="#CurrentValue"
#onchange="#((ChangeEventArgs __e) => CurrentValue = __e.Value.ToString())" />
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-dark" #onclick="ScanResume">Scan</button>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" #onclick="Show">Abort</button>
<button type="button" class="btn btn-primary" #onclick="saveChanges">Ok</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade show"></div>
}
After this modal.razor is load, i will start a js-Script.
I can only start with a button, then the DOM is not loading when
i invoke the Javascript on the Show() void.
On a razor page works it with:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("startScanner");
}
}
public async void Show()
{
_Show = !_Show;
if (_Show)
{
}
}
but not on the modal.
Is there any event to check if modal is load complete from razor componetes in my modal?

ASP.NET MVC Post data from view using controller method

Hope you peeps can help ill start with my problem.
Code Problem:
Passing data entered from a completed user form, to a method in controller which posts values back to api, at same time a modal is loaded containing the submitted data.
My Issue:
Ive attempted to come up with a solution to the above problem but I don't think the post request is being sent after checking with firebug in firefox but I don't know why. The modal is displayed and values are shown within the body correctly.
Here is what i have so far:
Bootstrap Form:
<form action="/Home/PostData" method="post" class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2" for="imei">IMEI:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="imei" name="formpart" placeholder="IMEI">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="phoneNumber">Phone Number:</label>
<div class="col-xs-9">
<input type="tel" class="form-control" id="phoneNumber" name="formpart" placeholder="Phone Number">
</div>
</div>
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Policy Organisation:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<span id="dropdown_title1">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">TMT Internals</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="policyNumber" class="control-label col-xs-2">Policy Number:</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="policyNumber" name="formpart" placeholder="Policy Number">
</div>
</div>
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default" id="dropdownMenu2" data-toggle="dropdown">
<span id="dropdown_title2">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropdownMenu2">
<li><a tabindex="-1" href="#">Android</a></li>
<li><a tabindex="-1" href="#">IOS</a></li>
<li><a tabindex="-1" href="#">Windows Phone</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="diagnosticMode" class="control-label col-xs-2">Diagnostic Mode:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
<span id="dropdown_title3">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Simple</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Advanced</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Mannual</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Complete</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" id="SendRequest" class="btn btn-success">Create New Request</button>
<button class="btn btn-primary">Back to List</button>
</div>
</div>
</form>
Controller Method:
public ActionResult PostData()
{
using (WebClient client = new WebClient())
{
System.Collections.Specialized.NameValueCollection reqparm = new System.Collections.Specialized.NameValueCollection();
reqparm.Add("IMEI", Request["#imei"].ToString());
reqparm.Add("PhoneNumber", Request["#phoneNumber"].ToString());
reqparm.Add("PolicyNumber", Request["#policyNumber"].ToString());
reqparm.Add("SupportUserId", Session["UserId"].ToString());
reqparm.Add("PolicyOrganisationId", Request["#dropdown_title1"].ToString());
reqparm.Add("PlatformFamilyInfoId", Request["#dropdown_title2"].ToString());
reqparm.Add("AppModeId", Request["#dropdown_title3"].ToString());
byte[] responsebytes = client.UploadValues("**removed url for security purposes**", "POST", reqparm);
string responsebody = Encoding.UTF8.GetString(responsebytes);
}
return View("something");
}
Jquery (passes values to modal)
// captures user entered data
$("#SendRequest").click(function () {
var imei = ("IMEI: " + $("#imei").val());
$('#printImei').html(imei);
var phonenumber = ("Phone Number: " + $("#phoneNumber").val());
$('#printPhoneNumber').html(phonenumber);
var policyorganisation = ("Organisation: " + $("#dropdown_title1").text());
$('#printPolicyOrg').html(policyorganisation);
var policynumber = ("Policy Number: " + $("#policyNumber").val());
$('#printPolicyNumber').html(policynumber);
var platform = ("Platform: " + $("#dropdown_title2").text());
$('#printPlatform').html(platform);
var diagmode = ("Diagnostic Mode: " + $("#dropdown_title3").text());
$('#printDiagnosticMode').html(diagmode);
});
Modal shown after "Create new Request" is clicked:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">&times;</button>
<h4 class="modal-title" id="myModalLabel">Summary</h4>
</div>
<div class="modal-body">
<span id="printImei"></span><br />
<span id="printPhoneNumber"></span><br />
<span id="printPolicyOrg"></span><br />
<span id="printPolicyNumber"></span><br />
<span id="printPlatform"></span><br />
<span id="printDiagnosticMode"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>