Hello guys i wanted to ask if there is a way to reload a single partial after a is clicked instead of loading the whole site new.
My code
This is how i load my partialview when i go to my main site.
<div>
@{
await Html.RenderPartialAsync("_ArticlePositonsPartial",Model.ArticlePositions, ViewData);
}
</div>
Model for the partial
model IList<Rechnungen.Models.Position>
Partial html
<form enctype="multipart/form-data">
<div class="tableFixHead">
<table class="table table-striped text-center table-sm " id="tablepost">
<thead class="table-dark ">
<tr>
<th style="width:72.5px" class="">Anzahl</th>
<th style="width:72.5px" class="">Einheit</th>
<th style="width:320px" class="">Nr + Bezeichnung</th>
<th style="width:135px" class="">Stk Preis.</th>
<th style="width:135px" class="">Ges Preis.</th>
<th style="width:75px" class=""></th>
</tr>
</thead>
<tbody id="tablebodypost">
@foreach (var item in Model)
{
<tr id="">
<td style="width:72.5px" class="pt-2 ">
<span class="TBarticleAmount">@item.ArticleAmount</span>
</td>
<td style="width:72.5px" class="pt-2 ">
<span class="TBarticleType">@item.ArticleId</span>
</td>
<td style="width:320px; font-size:12px;" class="pt-2 ">
<span class="TBarticleNumberAndName">test</span>
</td>
<td style="width:135px" class="pt-2 ">
<span class="TBarticlePrice">test </span>
</td>
<td style="width:135px;" class="pt-2 ">
<span class="TBarticleAmountPrice"> test</span>
</td>
<td style="width:75px" class=" ">
<a class="btn btn-outline-dark btn-sm delete-record" data-id="1" data-toggleToolTip="tooltip" data-placement="top" title="Entfernen">
<i class="fa-solid fa-trash-can"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
So after i Click on the button "Hinzufügen" i want to add something to a list and reload the tablePartial
<form mmethod="post" asp-page-handler="AddPosition">
<button class="btn btn-outline-secondary add-record" type="submit" data-added="0"><i class="fa-solid fa-plus"></i>Hinzufügen</button>
</form>
Method in codebehind:
public PartialViewResult OnPostAddPosition()
{
ArticlePositions.Add(new Position { ArticleAmount = 1, ArticleId = 2 });
return new PartialViewResult
{
ViewName = "_ArticlePositonsPartial",
ViewData = new ViewDataDictionary<IList<Position>>(ViewData, ArticlePositions),
};
}
After the PostMethod is called my site looks like this:
I have looked it up in the interned already and found nothing that helped me. Is there a way to only reload the TablePartial?
2
Answers
I have changed the code:
HTML:`
Javascript:
Try to remove form and use button to call js function,and use ajax to call handler,here is a demo:
cshtml:
js:
Update:
js: