razor core.net don't render to table onpost but does render ongetasync

Reply

Member

1 Points

razor core.net don't render to table onpost but does render ongetasync

Jul 13, 2020 05:21 PM|barnonline|LINK

Edited: I have now included ALL the code. 
It is probably very straight forward, but I have not been able to google this, probably because I'm new to Razor, and I don't know the term to search for. 
It is a simple page with at dropdownlist for teams, and when you have selected the team, it shows the players for that team. 
<ol> 
<li>The ddl with teams renders fine </li><li>The table with the players renders fine, when called from OnGetAsync() </li><li>But when I try to do it on the OnPost(), I get a result from the database, and the player list gets populated, and in the view in the foreach
loop I can see the values being assigend, but the browser does not show this change,&nbsp; 
</li><li>I noticed that all the examples for OnPost usually redirects to another page, instead of &quot;reloading&quot; the same page, -have I missed something here? 
 
In the view:&nbsp; </li></ol> 
<pre class="default prettyprint prettyprinted"><code></code></pre> 
<pre class="prettyprint lang-auto">@page 
@model rd.Pages.p2.p2Model 
@{ 
ViewData[&quot;Title&quot;] = &quot;p2&quot;; 
} 
 
&lt;h1&gt;Index&lt;/h1&gt; 
 
&lt;form&gt; 
@Html.AntiForgeryToken() 
&lt;p&gt; 
 
&lt;select id=&quot;myDropdown&quot; asp-for=&quot;selectedFilter&quot; asp-items=&quot;Model.team&quot; onchange=&quot;sendData()&quot;&gt; 
&lt;option value=&quot;&quot;&gt;Choose a team&lt;/option&gt; 
&lt;/select&gt; 
 
&lt;/p&gt; 
 
@if (Model.player != null) 
{ 
&lt;table class=&quot;table&quot;&gt; 
&lt;thead&gt; 
&lt;tr&gt; 
&lt;th&gt; 
@Html.DisplayNameFor(model =&gt; model.player[0].PlayerName) 
&lt;/th&gt; 
&lt;th&gt; 
@Html.DisplayNameFor(model =&gt; model.player[0].PlayerNumber) 
&lt;/th&gt; 
&lt;th&gt; 
@Html.DisplayNameFor(model =&gt; model.player[0].PlayerActive) 
&lt;/th&gt; 
&lt;th&gt; 
@Html.DisplayNameFor(model =&gt; model.player[0].SortOrder) 
&lt;/th&gt; 
&lt;th&gt; 
@Html.DisplayNameFor(model =&gt; model.player[0].Team) 
&lt;/th&gt; 
&lt;th&gt;&lt;/th&gt; 
&lt;/tr&gt; 
&lt;/thead&gt; 
&lt;tbody&gt; 
@foreach (var item in Model.player) 
{ 
&lt;tr&gt; 
&lt;td&gt; @*This is being hit on both the OnGet and the OnPost and is assigned value both times but only seen in browser on OnGet*@ 
@Html.DisplayFor(modelItem =&gt; item.PlayerName) 
&lt;/td&gt; 
&lt;td&gt; 
@Html.DisplayFor(modelItem =&gt; item.PlayerNumber) 
&lt;/td&gt; 
&lt;td&gt; 
@Html.DisplayFor(modelItem =&gt; item.PlayerActive) 
&lt;/td&gt; 
&lt;td&gt; 
@Html.DisplayFor(modelItem =&gt; item.SortOrder) 
&lt;/td&gt; 
&lt;td&gt; 
@Html.DisplayFor(modelItem =&gt; item.Team.TeamName) 
&lt;/td&gt; 
&lt;td&gt; 
&lt;a asp-page=&quot;./Edit&quot; asp-route-id=&quot;@item.Id&quot;&gt;Edit&lt;/a&gt; | 
&lt;a asp-page=&quot;./Details&quot; asp-route-id=&quot;@item.Id&quot;&gt;Details&lt;/a&gt; | 
&lt;a asp-page=&quot;./Delete&quot; asp-route-id=&quot;@item.Id&quot;&gt;Delete&lt;/a&gt; 
&lt;/td&gt; 
&lt;/tr&gt; 
} 
 
&lt;/tbody&gt; 
 
&lt;/table&gt; 
} 
 
&lt;/form&gt; 
 
 
@section Scripts{ 
&lt;script&gt; 
function sendData() { 
var selectedFilter = &#36;(&quot;#myDropdown&quot;).val(); 
&#36;.ajax({ 
type: &quot;POST&quot;, 
url: &quot;/p2/p2&quot;, 
data: { selectedFilter: selectedFilter }, 
headers: { 
RequestVerificationToken: &#36;('input:hidden[name=&quot;__RequestVerificationToken&quot;]').val() 
}, 
 
error: function() { 
alert(&quot;there was an error&quot;); 
} 
}); 
} 
&lt;/script&gt; 
} 
</pre> 
<pre class="default prettyprint prettyprinted"><code>&nbsp;</code></pre> 
<code></code><code></code> 
In the controller 
<pre class="prettyprint lang-auto">using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Security.Cryptography.Xml; 
using System.Threading.Tasks; 
using Microsoft.AspNetCore.Mvc; 
using Microsoft.AspNetCore.Mvc.RazorPages; 
using Microsoft.AspNetCore.Mvc.Rendering; 
using Microsoft.EntityFrameworkCore; 
using rd.Models; 
 
namespace rd.Pages.p2 
{ 
public class p2Model : PageModel 
{ 
public List&lt;Models.Player&gt; player { get; set; } 
public List&lt;SelectListItem&gt; team { get; set; } 
 
 
private readonly rd.Models.rdnewContext _context; 
 
public p2Model(rd.Models.rdnewContext context) 
{ 
_context = context; 
} 
 
public async Task OnGetAsync() 
 
{ 
team = await _context.Team.Select(a =&gt; 
new SelectListItem 
{ 
Text = a.TeamName.ToString(), 
Value = a.Id.ToString() 
}).ToListAsync(); //Should not really be bound here, just to prove that it CAN be bound 
player = (from pl in _context.Player where pl.TeamId == 2 select pl).ToList(); 
 
 
} 
 
[BindProperty] public string selectedFilter { get; set; } 
 
public async Task OnPost() 
{ 
int teamid = int.Parse(selectedFilter); 
 
//This works in the sense that player IS populated with the desired data 
player = await (from pl in _context.Player where pl.TeamId == teamid select pl).ToListAsync(); 
 
} 
} 
}</pre>

Reply

mgebhard

All-Star

53751 Points

24069 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 13, 2020 05:54 PM|mgebhard|LINK

We cannot see all the code. Are you making an AJAX request? Also, the way the code is written it should cause an error because you do not repopulate the team select.

Reply

bruce (sqlwo...

All-Star

58484 Points

15810 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 13, 2020 05:54 PM|bruce (sqlwork.com)|LINK

you should use OnPostAsync, but how do you call it? via a form.submit()? ajax?

bruce (sqlwork.com)

Reply

barnonline

Member

1 Points

7 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 13, 2020 11:32 PM|barnonline|LINK

All code is included, yes I'm using AJAX, and that part works just fine.

Actually good point regarding the dropdownlist, after the post, I would expect the dropdownlist to be empty, but it is unchanged, -as in the entire page is unchanged.

There is now more comments in the code where I have put breakpoints, and where I can see that I do get the desired values and it is assigned where it should, except the only time I can see data in the table in the browser is on the OnGet, even if I can see that data is assigend in the view on both the OnGet AND OnPost, it is ONLY the values from the OnGet I can see in the browser

It is like the assignment on the OnPost, does not "take", or have any effect

Reply

barnonline

Member

1 Points

7 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 13, 2020 11:33 PM|barnonline|LINK

Yeah I have also tried OnPostAsync, no difference. Yes I used AJAX

Reply

Evern

Member

80 Points

32 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 14, 2020 07:09 AM|Evern|LINK

HI,

The Razor page is rendered by the razor engine, but the ajax request doesn't make razor re-render it, so one way to do this is to render the page in jquery as an ajax request to the data.

<form>
    @Html.AntiForgeryToken()
    <p>

        <select id="myDropdown" asp-items="Model.team" data-bind="@Model.selectedFilter"  onchange="sendData()">
            <option value="">Choose a team</option>
        </select>
        @Model.player.Count
    </p>
    <div id="playershow">
        
    </div>
    @if (Model.player != null)
    {
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.player[0].PlayerName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.player[0].PlayerNumber)
                    </th>
                    @*<th>
                        @Html.DisplayNameFor(model => model.player[0].PlayerActive)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.player[0].SortOrder)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.player[0].Team)
                    </th>*@
                    <th></th>
                </tr>
            </thead>
            <tbody id="originShow">
                @foreach (var item in Model.player)
                {
                    <tr>
                        <td>
                            @*This is being hit on both the OnGet and the OnPost and is assigned value both times but only seen in browser on OnGet*@
                            @Html.DisplayFor(modelItem => item.PlayerName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.PlayerNumber)
                        </td>
                        @*<td>
                            @Html.DisplayFor(modelItem => item.PlayerActive)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.SortOrder)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Team.TeamName)
                        </td>*@
                        <td>
                            <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
                            <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
                            <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
                        </td>
                    </tr>
                }

            </tbody>
            <tbody id="changeShow">
                
            </tbody>

        </table>
    }

</form>


@section Scripts{
    <script>
        function sendData() {
            var selectedFilter = $("#myDropdown").val(); console.log(selectedFilter)
            $.ajax({
                type: "POST",
                url: "/p2",
                data: { selectedFilter: selectedFilter },
                headers: {
                    RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
                },
                success: function (data) {
                    $("#changeShow").empty();
                    var players = JSON.parse(data);
                    console.log(players)
                    $("#originShow").hide();
                    $("#changeShow").show();
                    
                    for (var i = 0; i < players.length; i++) {
                        $("#changeShow").append('<tr><td>' + players[i].PlayerName + '</td><td>' + players[i].PlayerNumber +'</td></tr>');
                    }
                },
                error: function(e) {
                    alert("there was an error--");
                }
            });
        }
    </script>
}

At the same time, OnPost needs to respond with a string in json format.

public async Task OnPost()
        {
            int teamid = int.Parse(selectedFilter);
            //This works in the sense that player IS populated with the desired data
            player = await (from pl in _context.Player where pl.TeamId == teamid select pl).ToListAsync();
            Response.WriteAsync(System.Text.Json.JsonSerializer.Serialize(player));
        }

Best Regards,

Evern

Reply

barnonline

Member

1 Points

7 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 14, 2020 08:04 AM|barnonline|LINK

Well that essentially did the trick, but not exactly the way I had wanted.

1) The original rendered html is still there, is is just hidden.

2) The data is "brute force directly appended" by javascript, and not "bound by the system", as I know it can do on the OnGet

If you look at my OnGet method, you can see that player list is being populated, and subsequently the view is looping through the list, and values are assigned, and I can see the resulting html just as expected.

The exactly same happens in the OnPost method, a player list is being populated with different values, and the view is looping through the new values.
(And that lead me to believe that this was razor re-render the page, but apparently that is not the case. I have a feeling that I'm missing something important here)

But the resulting HTML is not changed at all on the OnPost

        public async Task OnGetAsync()
        {
            team = await _context.Team.Select(a =>
                new SelectListItem
                {
                    Text = a.TeamName.ToString(),
                    Value = a.Id.ToString()
                }).ToListAsync();

            player = (from pl in _context.Player where pl.TeamId == 2 select pl).ToList();
        }

Reply

mgebhard

All-Star

53751 Points

24069 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 14, 2020 10:26 AM|mgebhard|LINK

barnonline
2) The data is "brute force directly appended" by javascript, and not "bound by the system", as I know it can do on the OnGet

The POST response is returned to the AJAX function. It is up to you to design JavaScript that writes the POST response to the page. This is a well known and fundamental concept.

Reply

barnonline

Member

1 Points

7 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 19, 2020 05:07 PM|barnonline|LINK

But I would prefer NOT to get the respose returned to the Ajax function. As in my original code posted.

I would like the controller to ( re-)render the page, just as it does on the OnGet.

This is the usual approach with Asp.mvc, is it very different with core & razor

And it SEEMS like it is rendered, it loop through the view again, with the new values from the database.

But there is no change in the resulting HTML.

Reply

mgebhard

All-Star

53751 Points

24069 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 19, 2020 05:37 PM|mgebhard|LINK

barnonline
But I would prefer NOT to get the respose returned to the Ajax function. As in my original code posted.

I would like the controller to ( re-)render the page, just as it does on the OnGet.

This is the usual approach with Asp.mvc, is it very different with core & razor

And it SEEMS like it is rendered, it loop through the view again, with the new values from the database.

But there is no change in the resulting HTML.

My best guess is you're asking how to return partial content. See the following blog to understand how to return partial page in Razor Pages.

https://www.learnrazorpages.com/razor-pages/partial-pages

Reply

bruce (sqlwo...

All-Star

58484 Points

15810 Posts

Re: razor core.net don't render to table onpost but does render ongetasync

Jul 20, 2020 02:53 AM|bruce (sqlwork.com)|LINK

If you want the server to render the page, don’t use Ajax. If you make an Ajax call, then then JavaScript gets the response and must update the dom.

bruce (sqlwork.com)

razor core.net don't render to table onpost but does render ongetasync[Answered] RSS

10 replies

Shortcuts

Related Links

razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

barnonline

Re: razor core.net don't render to table onpost but does render ongetasync

Re: razor core.net don't render to table onpost but does render ongetasync

barnonline

Re: razor core.net don't render to table onpost but does render ongetasync