[英]Is there a way to reload a single Partialview without loading the whole site? in asp.net Razorpages
大家好,我想問一下是否有一種方法可以在單擊 a 后重新加載單個部分,而不是重新加載整個站點。
我的代碼
當我將 go 加載到我的主站點時,這就是我加載局部視圖的方式。
<div>
@{
await Html.RenderPartialAsync("_ArticlePositonsPartial",Model.ArticlePositions, ViewData);
}
</div>
Model為部分
model IList<Rechnungen.Models.Position>
部分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>
因此,在我單擊“Hinzufügen”按鈕后,我想向列表中添加一些內容並重新加載 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>
代碼隱藏中的方法:
public PartialViewResult OnPostAddPosition()
{
ArticlePositions.Add(new Position { ArticleAmount = 1, ArticleId = 2 });
return new PartialViewResult
{
ViewName = "_ArticlePositonsPartial",
ViewData = new ViewDataDictionary<IList<Position>>(ViewData, ArticlePositions),
};
}
我已經在實習生中查找過它,但沒有發現任何對我有幫助的東西。 有沒有辦法只重新加載 TablePartial?
嘗試移除表單並使用按鈕調用js function,並使用ajax調用處理程序,這是一個演示:
cshtml:
<div id="MyPartialView">
@{
await Html.RenderPartialAsync("_ArticlePositonsPartial", Model.ArticlePositions, ViewData);
}
</div>
@Html.AntiForgeryToken()
<button class="btn btn-outline-secondary add-record"data-added="0" onclick="GetPartialView()"><i class="fa-solid fa-plus"></i>Hinzufügen</button>
js:
function GetPartialView() {
$.ajax({
type: "POST",
url: '?handler=AddPosition',
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function (data) {
$("#MyPartialView").html(data);
},
error: function (result) {
alert("fail");
}
})
}
更新:
js:
function GetPartialView() {
$.ajax({
type: "POST",
url: '?handler=AddPosition',
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function (data) {
document.getElementById("MyPartialView").innerHTML = document.getElementById("MyPartialView").innerHTML + data;
},
error: function (result) {
alert("fail");
}
})
}
我已經更改了代碼:
[BindProperty]
public List<Position> ArticlePositions { get; set; } = new List<Position>();
public PartialViewResult OnPostAddPosition([FromBody] List<Position> articlePositions)
{
Random myObject = new Random();
Random myObject1 = new Random();
articlePositions.Add(new Position
{
ArticleAmount = myObject1.Next(10, 100),
ArticleId = myObject.Next(10, 100)
});
var data = new NewInvoiceModel(_AddressRepository, _InvoiceNumberRangeRepository, _AddressTelephoneRepository, _ArticleRepository, _ITextsRepository, _HeaderDataRepository);
data.ArticlePositions = articlePositions;
var myViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary()) { { "_ArticlePositonsPartial", articlePositions } };
myViewData.Model = data;
return new PartialViewResult
{
ViewName = "_ArticlePositonsPartial",
ViewData = myViewData,
};
}
HTML:`
<div id="MyPartialView">
@{
await Html.RenderPartialAsync("_ArticlePositonsPartial", Model, ViewData);
}
</div>`
Javascript:
function GetPartialView() {
var model = @Json.Serialize(Model.ArticlePositions);
$.ajax({
type: "POST",
url: '?handler=AddPosition',
data: JSON.stringify(model),
dataType: "html",
contentType: "application/json",
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function(data) {
$("#MyPartialView").html(data);
},
error: function(result) {
alert("fail");
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.