![](/img/trans.png)
[英]ASP.NET Core 3.1 Razor pages - adding different child objects to header
[英]ASP.NET Core 3.1 - adding child item to razor partial view
我是新手,我已經為此苦苦掙扎了好幾天!
我想要做的只是將子項添加到父項,然后刷新局部視圖。 我的問題是,當代碼放入OnGetAddNewChildItem方法時,PageModel 類上的綁定屬性為空(它不是 null,只是其中沒有數據),因此我無法向其中添加子項。 為了嘗試解決這個問題,我試圖將數據傳遞到方法中,但這是 null。
奇怪的是,在我正在研究的實際解決方案中,我什至無法將它放入 PageModel 類,除非它是 PUT 或 POST - 但如果我能讓這個演示工作,我相信我會能夠使主要解決方案發揮作用。
我的 PageModel 類
public class IndexModel : PageModel { private readonly ILogger<IndexModel> _logger; [BindProperty] public Header MyHeader { get; set; } = new Header(); public IndexModel(ILogger<IndexModel> logger) { _logger = logger; } public void OnGet() { MyHeader.Id = 1; MyHeader.MyHeaderProperty = "HeaderTest1"; MyHeader.MyChildPropertiesList.AddRange( new List<Child> { new Child() { Id = 1, HeaderId = MyHeader.Id, MyChildProperty = "ChildTest1" }, new Child() { Id = 2, HeaderId = MyHeader.Id, MyChildProperty = "ChildTest2" }, new Child() { Id = 3, HeaderId = MyHeader.Id, MyChildProperty = "ChildTest3" } }); } public PartialViewResult OnGetAddNewChildItem([FromBody] Header myHeader) { if (myHeader.MyChildPropertiesList == null) myHeader.MyChildPropertiesList = new List<Child>(); myHeader.MyChildPropertiesList.Add(new Child { Id = 4, HeaderId = myHeader.Id, MyChildProperty = "ChildTest4" }); var partialView = "_ListItemPartial"; var myViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary()) { { partialView, myHeader.MyChildPropertiesList } }; myViewData.Model = myHeader; var partialViewResult = new PartialViewResult() { ViewName = partialView, ViewData = myViewData, }; return partialViewResult; } } public class Header { public int Id { get; set; } public string MyHeaderProperty { get; set; } public List<Child> MyChildPropertiesList { get; set; } = new List<Child>(); } public class Child { public int Id { get; set; } public int HeaderId { get; set; } public string MyChildProperty { get; set; } } }
我的頁面
@page @model IndexModel @{ ViewData["Title"] = "Home page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> <div> <a class="btn btn-sm btn-info text-white" onclick="AddItem()">Add Child Item</a> </div> <br /> <div> <div><b>MyHeaderProperty value:</b> @Model.MyHeader.MyHeaderProperty</div> <br /> <div class="font-weight-bold">Child Items</div> <br /> <div id="LineItemsPartial"> <partial name="_ListItemPartial" model="@Model" /> </div> </div> <script type="text/javascript"> function AddItem() { var model = @Json.Serialize(Model.MyHeader); alert(JSON.stringify(model)); $.ajax({ type: "GET", url: "?handler=AddNewChildItem", data: JSON.stringify(model), dataType: "json", success: function (result) { alert("Success"); $('#LineItemsPartial').html(result); }, failure: function (result) { alert("Failed"); } }); } </script>
我的部分觀點
@model IndexModel <table> @foreach (var myChildItem in Model.MyHeader.MyChildPropertiesList) { <tr> <td>@myChildItem.HeaderId</td> <td>@myChildItem.MyChildProperty</td> </tr> } </table>
任何幫助都非常感謝。
從您的代碼設計來看,您有以下一些錯誤:
1.在get方法中使用FromBody
不是一個好方法。如果你想通過get請求向后端發送數據,你需要通過url中的查詢字符串發送模型。你所做的應該是一種Post請求的方式。
參考:
https://stackoverflow.com/a/983458/11398810
2.局部視圖結果的ViewData是Header
類型。但是你的局部視圖需要IndexModel
類型
這是一個工作演示:
索引.cshtml:
@page
@model IndexModel
<div>
<a class="btn btn-sm btn-info text-white" onclick="AddItem()">Add Child Item</a>
</div>
<br />
<div>
<div><b>MyHeaderProperty value:</b> @Model.MyHeader.MyHeaderProperty</div>
<br />
<div class="font-weight-bold">Child Items</div>
<br />
<div id="LineItemsPartial">
<partial name="_ListItemPartial" model="@Model" />
</div>
@Html.AntiForgeryToken() @*add this*@
</div>
<script type="text/javascript">
function AddItem() {
var model = @Json.Serialize(Model.MyHeader);
$.ajax({
type: "Post", //change this...
url: "?handler=AddNewChildItem",
data: JSON.stringify(model),
//add the following contentType and headers..
contentType: "application/json",
headers: {
RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
},
dataType: "html", //midify this..
success: function (result) {
$('#LineItemsPartial').html(result);
},
failure: function (result) {
alert("Failed");
}
});
}
</script>
索引.cshtml.cs:
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
[BindProperty]
public Header MyHeader { get; set; } = new Header();
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
public PartialViewResult OnPostAddNewChildItem([FromBody] Header myHeader)
{
if (myHeader.MyChildPropertiesList == null)
myHeader.MyChildPropertiesList = new List<Child>();
myHeader.MyChildPropertiesList.Add(new Child
{
Id = 4,
HeaderId = myHeader.Id,
MyChildProperty = "ChildTest4"
});
//add this line....
var data = new IndexModel(_logger);
data.MyHeader = myHeader;
var partialView = "_ListItemPartial";
var myViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary()) { { partialView, myHeader.MyChildPropertiesList } };
myViewData.Model = data; //change here..
var partialViewResult = new PartialViewResult()
{
ViewName = partialView,
ViewData = myViewData,
};
return partialViewResult;
}
}
結果:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.