ASP.NET Core 101 - Introducing Blazor: Structure and Debugging [11 of 13]

debug

I'm not even ensure if these products are getting selected because when I click the buttons nothing happens. Yeah and because we have this code that looks like just typical CS,I think we might be able to debug this.We should exactly.So Visual Studio lets you debug Razor components,and let's do that, let's set a break-point.Because like you said it's just C sharp.

modal
if we've got a product selected,do some stuff and in this case,if the product is selected the modal would just appear on the page,the Div would be there when there's the selected product and it wouldn't be there if there's not.so this is going to require some Divs.

@if(selectedProduct != null)
{
  <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="productTitle">@selectedProduct.Title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="card">
            <div class="card-img" style="background-image: url('@selectedProduct.Image');">
            </div>
            <div class="card-body">
                <p class="card-text">@selectedProduct.Description</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
}

we've got the Div for the modal that has the fade,again all of these CSS classes are coming in from Bootstrap.

we click "More Info",it sets the selected product,and then if the selected product is not null,we show the modal.