If my button is in the form, it does not send any data back to the view

Question

I am trying to get some more information about Razor Pages with core 2.0 and I am having some issues with the post. Please note, this is not production worthy, its just code to try and getting a better understanding of what you can do in razor pages.

The issue is, if my button is in the form, it does not send any data back to the view. So, computedURL in OnPostConcatURL() is never getting to the view.

If the button is outside the form, the form data does not get to the post controller OnPostEdit23 but I can send back ComputedURL to the view. Clearly I am missing something or a lot. And I cannot find an example to fix this.

@page
@model VisibilityTest
@{ ViewData["Title"] = "Visibility Test Site"; }
<form id="frmVisibility" method="post">
  <div class="container">
    <div class="row form-group">
      <div class="col-md-1"> Select Portal: </div>
      <div class="col-md-1"><select id="ddlEnvironment" asp-for="selectedEnvironment" asp-items="Model.Environments"></select></div>
      <div class="col-md-2"><select id="ddlPortalName" asp-for="selectedPortalName" asp-items="Model.portalNames"></select></div>
      <div class="col-md-3"><input asp-for="@Model.ComputedURL" /></div>
    </div>
    <div class="row form-group">
      <div class="col-md-1"><button id="btnConcatURL" asp-page-handler="ConcatURL" type="submit" class="btn btn-primary">Submit23</button></div>
    </div>
  </div>
</form>
<form method="post">
  <button asp-page-handler="edit23" class="btn btn-default">Edit2</button>
</form>

   [BindProperty]
   public string ComputedURL { get; set; }

   public void OnGet()
    {
        config = GetConfigFile();
        PopulatedEnvironmentSelectList();
        PopulatePortalNameSelectList(config);           
    }

    public IActionResult OnPost()
    {          
        ComputedURL = selectedEnvironment + selectedPortalName;
        return RedirectToPage("./VisibilityTest");
    }

    public void OnPostConcatURL()
    {         
        ComputedURL = "this is a test";                       
    }

    public void OnPostEdit23()
    {                
        ComputedURL = "this is a test";
    }

Answer 1

I'm still figuring out Razorpages as well but I noticed a couple of points about your example:

1. The Model should be the code behind page class not some other object.
2. The BindProperty should probably be to an object and not just a string (or you can bind to multiple properties on the code-behind object)
3. If you want to pass back just a message (string) you can use temp data.'
4. You definitely want the button inside the form as it will populate the model properties with form values (but as with #2 the binding property should be more than a simple string).

So your example modified example below seems to do what you are looking for (I simplified the dropdowns to text fields for easy testing).

.cshtml page

@page
@model VisibilityTestModel

@{ 
    ViewData["Title"] = "Visibility Test Site"; 
}
<hr />
<form id="frmVisibility" method="post">
    <div class="container">
        <div class="row form-group">
            <div class="col-md-1"> Select Portal: </div>            
            <div class="col-md-3"><input asp-for="@Model.Portal.Environment" /></div>
            <div class="col-md-3"><input asp-for="@Model.Portal.Name" /></div>
            <div class="col-md-3">@Model.Portal.ComputedURL</div>
        </div>
        <div class="row form-group">
            <div class="col-md-1"><button id="btnConcatURL" asp-page-handler="ConcatURL" type="submit" class="btn btn-primary">Submit23</button></div>
        </div>
    </div>
</form>
<h3>Msg: @Model.Message</h3>

.cshtml.cs page:

public class VisibilityTestModel : PageModel  {

    [BindProperty]
    public PortalInfo Portal { get; set; }

    [TempData]
    public string Message { get; set; }

    public void OnGet() {
        Portal = new PortalInfo {
            Environment = "www.example.com",
            Name = "test"
        };
    }

    public void OnPostConcatURL() {
        Portal.ComputedURL = Portal.Environment + " " + Portal.Name;
        Message = "URL concat";
    }       
}

public class PortalInfo {
    public string Environment { get; set; }
    public string Name { get; set; }
    public string ComputedURL { get; set; }
}