How to pass button value from a modal window (that uses partial view) to the parent view - razor

Question

here is the button on the partial view,
<button type="button" name="btnid" id="bparentid" value="#item.Itemid " class="btn btn-success" onclick="alert(#item.Itemid)">Select</button>
Just to check if it holds the value I put razor alert function, and I want the button value to be passed to the parent view on button click using this hidden input form in the parent view
<input asp-for="Itemid" type="hidden" value=" #item.Itemid" />
More detail:
I have two tables for recording children and their parents separately,
Here is the Model
public class Children
{
[Key]
public int ChildID { get; set; }
[Required] [StringLength(50)]
public string FirstName { get; set; }
[ForeignKey("Parentid")]
public virtual Parent Parent { get; set; }
}
public class Parent
{
[Key]
public int Parentid { get; set; }
public string FullName { get; set; }
public virtual IEnumerable<Children> Children { get; set; }
}
And here is the Create method controller for posting new children record with their parent information:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("ChildID,FirstName")] Children children, int existingParentid,
[Bind("Parentid,FullName")] Parent parent, bool existingparent)
{
if (ModelState.IsValid)
{
if (existingparent)
{
children.Parentid = existingParentid;
_context.Add(children);
await _context.SaveChangesAsync();
return View(children);
}else
_context.Add(children);
await _context.SaveChangesAsync();
_context.Add(parent);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(children);
}
Here is the controller method for the modal partial view
public async Task<IActionResult> ModalAction()
{
var MyDbContext = _context.Children.Include(C => C.Parent);
return PartialView(await MyDbContext.ToListAsync());
}
And here is the view for the Create method
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
#Html.ActionLink("Select Existing Parent", "ModalAction", "Children", null, new { #class = "btn btn-flat margin",
data_target = "#searchparent", data_toggle = "modal" })
<input asp-for="Parentid" type="hidden" value=" " />
<div class="modal fade" id="searchparent">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<div class="form-group">
<label asp-for="Parent.FullName" class="control-label"></label>
<input asp-for="Parent.FullName" class="form-control" />
<span asp-validation-for="Parent.FullName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
Here is the modal partial view
<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">Search for Parent data table </h4>
</div>
<div class="modal-body">
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
<button type="button" name="bparentid" id="bparentid" value="#item.ChildID" class="btn btn-block btn-success btn-xs"
onclick="alert(#item.ChildID)">
Select
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
The Question:
How can I pass the #item.ChildID value from the partial view to the Create view which will then pass it as hidden value to the create controller

Answer 1

Since you are trying to change the value of the input field after the page has loaded, this needs to happen inside the user's browser, so Razor which runs server-side can't help. But you can accomplish what you want using javascript:
//First add an ID to your hidden input
<input id="my-input" ... />
//Second add the following onclick to your button:
<button onclick="document.getElementById('my-input').value = this.value" ...></button>