after OnPost values of variables reset to null in razor pages - asp.net-core

Question

I wanted to add simple functionality to like on my page (that only displays data).
I've page with methods in PageModel behind (this is only example, becouse my page is soo more complicated):
(..)getting DB context and stuff
public string bookName {get;set;}
public string someVariable1 {get;set;}
public List<string> _bookTags {get;set;}
public int LikeCounter {get;set;}
public void OnGet(){
someVariable1 = (from u in _context.table
where something==something
select u.x);
_bookTags= (from u in _context.bookTags
where something==something
select u.y).ToList();
LikeCounter = (from u in _context.likes
where u.book==bookName
select u).Count();
}
public void OnPost(){
likes newLike = new likes();
newLike.userName = HttpContext.User.Identity.Name.Split("\\")[1];
newLike.book = bookName;
_context.likes.add(newLike);
_context.SaveChanges();
}
Page looks like this:
(..)
<div class="col-lg-4">
<form method="post">
<button class="btn btn-reddit" type="submit">LikeThisBook</button>
</form>
Current likes: #Model.LikeCounter
</div>
(..)
#foreach(string x in Model._bookTags){
<div class="border">
#x
</div>
}
(..)
so the problem is when I display page - everything works, but when I click "LikeThisBook" - OnPost method fires, adding the like for this book with userName in it... then page display error:
ArgumentNullException: Value cannot be null. (Parameter 'source')
and in stacktrace:
SomeProjectName.Pages.SomeBookStore.Pages_SomeBookStore_ShowBook.ExecuteAsync() in ShowBook.cshtml
#foreach(string x in Model._bookTags){ <- this is colored red
So it looks like that every variable that was filled in "OnGet" method is now null...
please help :)

Answer 1

For you do not want to reload the page and want to update the counter.The common way is using ajax.
Here is a working demo:
Index.cshtml:
#page
#model IndexModel
<div class="col-lg-4">
<form method="post">
<input name="bookName" />
<button type="button" class="btn btn-reddit" onclick="Add()">LikeThisBook</button>
</form>
Current likes: <label>#Model.LikeCounter</label> #*add this*#
</div>
#foreach (string x in Model._bookTags)
{
<div class="border">
#x
</div>
}
#section Scripts
{
<script>
function Add() {
$.ajax({
type: "post",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function (data) {
$("label").html(data);
},
error: function () {
alert("Fail to add");
}
});
}
</script>
}
Index.cshtml.cs:
public class IndexModel : PageModel
{
private readonly RazorProj3_1Context _context;
public IndexModel(RazorProj3_1Context context)
{
_context = context;
}
[BindProperty]
public string bookName { get; set; }
public string someVariable1 { get; set; }
public List<string> _bookTags { get; set; }
public int LikeCounter { get; set; }
public void OnGet()
{
someVariable1 = (from u in _context.table
where u.Id == 1
select u.x).FirstOrDefault();
_bookTags = (from u in _context.bookTags
select u.y).ToList();
LikeCounter = (from u in _context.likes
//where u.book == bookName
select u).Count();
}
public ActionResult OnPost()
{
like newLike = new like();
newLike.book = bookName;
_context.likes.Add(newLike);
_context.SaveChanges();
LikeCounter = (from u in _context.likes
//where u.book == bookName
select u).Count();
return new JsonResult(LikeCounter);
}
}
Startup.cs:
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
My testing models:
public class likes
{
public int Id { get; set; }
public string book { get; set; }
}
public class BookTag
{
public int Id { get; set; }
public string y { get; set; }
}
public class Table
{
public int Id { get; set; }
public string x { get; set; }
}
Result: