My project has page to manage armors. So far page allows user to show table from DB, create new armor and delete. Unfortunately, I was unable to implement editing/updating.
When user first open page what is seen is table with items and each item have 2 buttons (edit and delete). Above table lays button making DIV containing table disappear and showing DIV containing form. Edit button does this same. This is handled by JavaScript.
I want to use this same form to update armors. But to do it, first need to assign selected armor to Armor property in PageModel. So far, I was able to do it with IActionResult OnPost method, but page then is reloaded losing all my effort. When I tried to return Page() then my page was reloaded with empty table, if I use RedirectToPage(“PageName”) then I still lose selected item and by default table is shown, not the form with selected armor data. How can I do it? It is possible without using additional JavaScript but OnPost metod/s? If not, what can I change and how?
I am using asp.net core 3.1, Entity Framework and Razor Pages.
GitHub: https://github.com/Mlorism/LastTemple/tree/master/LastTemple/Pages/Manage
CSHTML:
<div class="col-7 pl-5 pr-5">
<div id="armourTable" class="text-center">
<button class="btn btn-outline-light mb-2" onclick="ToggleColumn(1)">Stwórz pancerz</button>
<table class="table text-light text-center">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Nazwa</th>
<th scope="col">Odp. fiz.</th>
<th scope="col">Odp. mag.</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Armors)
{
<tr id="[email protected]">
<th scope="row">@item.Id</th>
<td>@item.Name</td>
<td>@item.DamageResistance</td>
<td>@item.MagicResistance</td>
<td><form method="post"><button class="btn btn-outline-warning" type="submit" onclick="Edit(@item.Id)" asp-page-handler="LoadArmor" asp-route-id="@item.Id">Edytuj</button></form></td>
<td><form method="post"><button class="btn btn-outline-warning" type="submit" asp-page-handler="Delete" asp-route-id="@item.Id">Usuń</button></form></td>
</tr>
}
</tbody>
</table>
</div>
<div id="armourForm" class="p-5">
<form id="manipulateArmor" method="post" onreset="resetSliders()">
<div class="form-group">
<label>Nazwa</label>
<input type="text" class="form-control bg-secondary text-light" minlength="5" maxlength="20" required="required" asp-for="Armor.Name" />
<small>D?ugo?? od 5 do 20 znaków</small>
</div>
<div class="form-group">
<label>Odporno?? na obra?enia</label>
<input id="physical" class="mySlider" type="range" value="10" min="0" max="100" step="5" asp-for="Armor.DamageResistance" />
<output>10</output>
</div>
<div class="form-text">
<label>Odporno?? na magi?</label>
<input id="magic" class="mySlider" type="range" value="10" min="0" max="50" step="5" asp-for="Armor.MagicResistance" />
<output>10</output>
</div>
<div class="text-center">
<button type="submit" asp-page-handler="Create" class="btn btn-outline-success m-2">Zapisz</button>
<button id="resetBtn" type="reset" class="btn btn-outline-warning m-2">Resetuj</button>
<button type="button" class="btn btn-outline-danger m-2" onclick="ToggleColumn(0)">Anuluj</button>
</div>
</form>
</div>
</div>
PageModel cs:
private readonly ApplicationDbContext _ctx;
public ArmourModel(ApplicationDbContext ctx)
{
_ctx = ctx;
}
[BindProperty]
public Armor Armor { get; set; }
[BindProperty]
public IEnumerable<Armor> Armors { get; set; }
public void OnGet()
{
Armors = new GetArmors(_ctx).Get();
}
public async Task<IActionResult> OnPostCreateAsync()
{
await new CreateArmor(_ctx).Create(Armor);
return RedirectToPage("Armor");
}
public IActionResult OnPostLoadArmor(int id)
{
Armor item = _ctx.Armors.Find(id);
if (item == null)
{
RedirectToPage("Armor");
}
Armor.Id = item.Id;
Armor.Name = item.Name;
Armor.DamageResistance = item.DamageResistance;
Armor.MagicResistance = item.MagicResistance;
return RedirectToPage("Armor");
}
JS:
function ToggleColumn(type) {
var armourTable = document.getElementById("armourTable");
var armourForm = document.getElementById("armourForm");
var resetBtn = document.getElementById("resetBtn");
if (type == 0) {
armourTable.style.display = "block";
armourForm.style.display = "none";
resetBtn.style.display = "inline-block";
}
else {
armourForm.style.display = "block";
armourTable.style.display = "none";
setSlider("physical");
setSlider("magic");
if (type == 2) {
resetBtn.style.display = "none";
}
}
} // ToggleColumn()
question from:
https://stackoverflow.com/questions/65928695/how-to-assign-property-in-pagemodel-by-button-for-form-maintaining-selected-p 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…