title: Calling Web API not working the first time in Blazor server side app
body: <p>When I launch my ASP.Net Core Blazor Server Side app, the first time I click the Save button, nothing happens. The post to the controller/API fires but the PostListing function in my controller/API never gets called. However if  I click the Save button a second time right after, it works as expected. What's going on? Thank you to anyone who can help.</p>
  <p>Here's my page:</p>
  <pre><code>@page &quot;/fetchdata&quot;
  @using SellEverywhere.Data
  @using SellEverywhere.Models
  @using System.Net.Http.Json
  @inject HttpClient Http
  
  
  &lt;h1&gt;Your Listings&lt;/h1&gt;
  
  &lt;table width=&quot;100%&quot; style=&quot;background:#05163D;color:honeydew&quot;&gt;
      &lt;tr&gt;
          &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
          &lt;td&gt;
              &lt;h2&gt; Add New Listing Details&lt;/h2&gt;
          &lt;/td&gt;
          &lt;td&gt; &lt;/td&gt;
          &lt;td align=&quot;right&quot;&gt;
              &lt;button class=&quot;btn btn-info&quot; @onclick=&quot;AddNewListing&quot;&gt;Add New Listing&lt;/button&gt;
          &lt;/td&gt;
          &lt;td width=&quot;10&quot;&gt; &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan=&quot;2&quot;&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;hr /&gt;
  &lt;form&gt;
      &lt;table class=&quot;form-group&quot;&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;ID&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Id&quot; readonly /&gt;
              &lt;/td&gt;
              &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;Title&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Title&quot; /&gt;
              &lt;/td&gt;
              &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Description&quot; class=&quot;control-label&quot;&gt;Description&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Description&quot; /&gt;
              &lt;/td&gt;
              &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;Brand&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Brand&quot; /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;Size&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Size&quot; /&gt;
              &lt;/td&gt;
              &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;Color&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Color&quot; /&gt;
              &lt;/td&gt;
              &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
              &lt;td&gt;
                  &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;Condition&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; @bind=&quot;@lsts.Condition&quot; /&gt;
              &lt;/td&gt;
              &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot; @onclick=&quot;(async () =&gt; await AddListing())&quot; style=&quot;width:220px;&quot;&gt;Save&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;table width=&quot;100%&quot; style=&quot;background:#0A2464;color:honeydew&quot;&gt;
      &lt;tr&gt;
          &lt;td width=&quot;20&quot;&gt; &lt;/td&gt;
          &lt;td&gt;
              &lt;h2&gt;Listing Details&lt;/h2&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan=&quot;2&quot;&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  @if (listing == null)
  {
      &lt;p&gt;&lt;em&gt;No listing found...&lt;/em&gt;&lt;/p&gt;
  }
  else
  {
      &lt;table class=&quot;table&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Id&lt;/th&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Brand&lt;/th&gt;
                  &lt;th&gt;Color&lt;/th&gt;
                  &lt;th&gt;Condition&lt;/th&gt;
                  &lt;th&gt;Size&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Tag1&lt;/th&gt;
                  &lt;th&gt;Tag2&lt;/th&gt;
                  &lt;th&gt;Tag3&lt;/th&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;th&gt;Lowest Price&lt;/th&gt;
                  &lt;th&gt;Shipping Price&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach (var lst in listing)
              {
              &lt;tr&gt;
                  &lt;td&gt;@lst.Id&lt;/td&gt;
                  &lt;td&gt;@lst.Title&lt;/td&gt;
                  &lt;td&gt;@lst.Brand&lt;/td&gt;
                  &lt;td&gt;@lst.Color&lt;/td&gt;
                  &lt;td&gt;@lst.Condition&lt;/td&gt;
                  &lt;td&gt;@lst.Size&lt;/td&gt;
                  &lt;td&gt;@lst.Description&lt;/td&gt;
                  &lt;td&gt;@lst.Tag1&lt;/td&gt;
                  &lt;td&gt;@lst.Tag2&lt;/td&gt;
                  &lt;td&gt;@lst.Tag3&lt;/td&gt;
                  &lt;td&gt;@lst.Price&lt;/td&gt;
                  &lt;td&gt;@lst.LowestPrice&lt;/td&gt;
                  &lt;td&gt;@lst.ShippingPrice&lt;/td&gt;
                  &lt;td&gt;&lt;button class=&quot;btn btn-primary&quot; @onclick=&quot;@(async () =&gt; await EditListing(@lst.Id))&quot; style=&quot;width:110px;&quot;&gt;Edit&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button class=&quot;btn btn-danger&quot; @onclick=&quot;@(async () =&gt; await DeleteListing(@lst.Id))&quot;&gt;Delete&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  }
  
  @code {
      Listing[] listing;
      Listing lsts = new Listing();
      string ids = &quot;0&quot;;
      //bool showAddrow = false;
      protected override async Task OnInitializedAsync()
      {
          listing = await Http.GetFromJsonAsync&lt;Listing[]&gt;(&quot;https://localhost:44324/api/Listings/&quot;);
      }
  
      void AddNewListing()
      {
          lsts = new Listing();
      }
      // Add New Listings Details Method
      protected async Task AddListing()
      {
          if (lsts.Id == 0)
  
          {
              await Http.PostAsJsonAsync(&quot;https://localhost:44324/api/Listings/&quot;, lsts);
          }
          else
          {
              await Http.PutAsJsonAsync(&quot;https://localhost:44324/api/Listings/&quot; + lsts.Id, lsts);
          }
          lsts = new Listing();
          listing = await Http.GetFromJsonAsync&lt;Listing[]&gt;(&quot;https://localhost:44324/api/Listings/&quot;);
      }
      // Edit Method
      protected async Task EditListing(int listingID)
      {
          ids = listingID.ToString();
          lsts = await Http.GetFromJsonAsync&lt;Listing&gt;(&quot;https://localhost:44324/api/Listings/&quot; + Convert.ToInt32(listingID));
      }
      // Delete Method
      protected async Task DeleteListing(int listingID)
      {
          ids = listingID.ToString();
          await Http.DeleteAsync(&quot;https://localhost:44324/api/Listings/&quot; + Convert.ToInt32(listingID));
          listing = await Http.GetFromJsonAsync&lt;Listing[]&gt;(&quot;https://localhost:44324/api/Listings/&quot;);
      }
  
  }
  </code></pre>
  <p>And here's my Controller/API:</p>
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Security.Claims;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.EntityFrameworkCore;
  using SellEverywhere.Data;
  using SellEverywhere.Models;
  
  namespace SellEverywhere.Controllers
  {   [Produces(&quot;application/json&quot;)]
      [Route(&quot;api/[controller]&quot;)]
      [ApiController]
      public class ListingsController : ControllerBase
      {
          private readonly ApplicationDbContext _context;
  
          public ListingsController(ApplicationDbContext context)
          {
              _context = context;
          }
  
          // GET: api/Listings
          [HttpGet]
          public async Task&lt;ActionResult&lt;IEnumerable&lt;Listing&gt;&gt;&gt; GetListing()
          {
              return await _context.Listing.ToListAsync();
          }
  
          // GET: api/Listings/5
          [HttpGet(&quot;{id}&quot;)]
          public async Task&lt;ActionResult&lt;Listing&gt;&gt; GetListing(int id)
          {
              var listing = await _context.Listing.FindAsync(id);
  
              if (listing == null)
              {
                  return NotFound();
              }
  
              return listing;
          }
  
          // PUT: api/Listings/5
          // To protect from overposting attacks, enable the specific properties you want to bind to, for
          // more details, see https://go.microsoft.com/fwlink/?linkid=2123754.
          [HttpPut(&quot;{id}&quot;)]
          public async Task&lt;IActionResult&gt; PutListing(int id, Listing listing)
          {
              if (id != listing.Id)
              {
                  return BadRequest();
              }
  
              _context.Entry(listing).State = EntityState.Modified;
  
              try
              {
                  await _context.SaveChangesAsync();
              }
              catch (DbUpdateConcurrencyException)
              {
                  if (!ListingExists(id))
                  {
                      return NotFound();
                  }
                  else
                  {
                      throw;
                  }
              }
  
              return NoContent();
          }
  
          // POST: api/Listings
          // To protect from overposting attacks, enable the specific properties you want to bind to, for
          // more details, see https://go.microsoft.com/fwlink/?linkid=2123754.
          [HttpPost]
          public async Task&lt;ActionResult&lt;Listing&gt;&gt; PostListing(Listing listing)
          {
              listing.UserId = User.FindFirstValue(ClaimTypes.NameIdentifier);
              _context.Listing.Add(listing);
              await _context.SaveChangesAsync();
  
              return CreatedAtAction(&quot;GetListing&quot;, new { id = listing.Id }, listing);
          }
  
          // DELETE: api/Listings/5
          [HttpDelete(&quot;{id}&quot;)]
          public async Task&lt;ActionResult&lt;Listing&gt;&gt; DeleteListing(int id)
          {
              var listing = await _context.Listing.FindAsync(id);
              if (listing == null)
              {
                  return NotFound();
              }
  
              _context.Listing.Remove(listing);
              await _context.SaveChangesAsync();
  
              return listing;
          }
  
          private bool ListingExists(int id)
          {
              return _context.Listing.Any(e =&gt; e.Id == id);
          }
      }
  }
  
  </code></pre>
  <p>Here's my model:</p>
  <pre><code>using System.Collections.Generic;
  using System.ComponentModel.DataAnnotations;
  using System.ComponentModel.DataAnnotations.Schema;
  
  
  namespace SellEverywhere.Models
  {
      public class Listing
      {
          [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
          [Key]
          public int Id { get; set; }
          public string UserId { get; set; }
          public string Title { get; set; }
          public string Description { get; set; }
          public string Color { get; set; }
          public string Condition { get; set; }
          public string Brand { get; set; }
          public string Type { get; set; }
          public string Size { get; set; }
          public string Tag1 { get; set; }
          public string Tag2 { get; set; }
          public string Tag3 { get; set; }
          public int Price { get; set; }
          public int LowestPrice { get; set; }
          public int ShippingPrice { get; set; }
          public ICollection&lt;Photos&gt; Photos { get; set; }
      }
      public class Photos
      {
          [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
          [Key]
          public int Id { get; set; }
          //[ForeignKey(&quot;Listing&quot;)]
          public int ListingId { get; set; }
          public byte[] Image { get; set; }
          public virtual Listing Listing { get; set; }
      }
  }
  
  </code></pre>