How can I load page content's onto another page's popup?

Issue

This is the html code for the main page with the popup

<div class="box">
  <a class="button" href="#divOne">
    <img src="~/images/usericon.png" alt="user" width="30" height="30" />
  </a>
</div>

<div class="overlay" id="divOne">
  <div class="wrapper">
    <div id="container">
      <div class="btn" id="btn-1" data-showbutton="1">Login</div>
      <div data-button="1">
        <a href="#" class="close" onclick="clearData()">&times;</a>
        <div class="content">
          <div class="container text-active">
            @* load page content here*@
            <form id="login">
              <label>Username</label>
              <input type="text" placeholder="Username" />

              <label>Password</label>
              <input type="text" placeholder="Password" />
            </form>
          </div>
        </div>
        <button>Login</button>
      </div>

      <div class="btn" id="btn-2" data-showbutton="2">Register</div>
      <div id="is-hidden" data-button="2">
        <a href="#" class="close" onclick="clearData()">&times;</a>
        <div class="content">
          <div class="container">

            <div class="container text-active">
              @* load page content here*@
              <form id="register">
                <label>Username</label>
                <input type="text" placeholder="Username" />

                <label>Password</label>
                <input type="text" placeholder="Password" />

                <label>Confirm Password</label>
                <input type="text" placeholder="Confirm Password" />
              </form>
            </div>
          </div>
        </div>
        <button>Register</button>
      </div>
    </div>
  </div>

</div>

This is the page content I want to display inside the popup

 @model Store.Models.CustomerModel

@{
    ViewData["Title"] = "Register";
}
@* this part is what I need*@
<div class="row">
    <div class="col-md-4">
        <form asp-action="Register">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="CustomerEmail" class="control-label"></label>
                <input asp-for="CustomerEmail" class="form-control" />
                <span asp-validation-for="CustomerEmail" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CustomerPassword" class="control-label"></label>
                <input asp-for="CustomerPassword" class="form-control" />
                <span asp-validation-for="CustomerPassword" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
@* this part is what I need*@

I’ve tried in including the model and pasting the code and it works, but I want to have that separation between the main page and the login and register form.

This is how it looks, if it is even needed

Solution

Move the duplicated code to a partial, with its @model set to CustomerModel:

@model CustomerModel
<div class="row">
    <div class="col-md-4">
        <form asp-action="Register">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="CustomerEmail" class="control-label"></label>
                <input asp-for="CustomerEmail" class="form-control" />
                <span asp-validation-for="CustomerEmail" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CustomerPassword" class="control-label"></label>
                <input asp-for="CustomerPassword" class="form-control" />
                <span asp-validation-for="CustomerPassword" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

In the main page, you need to add a CustomerModel property e.g.

public CustomerModel Customer { get; set; }

and then pass it to the partial, which you can do using a partial tag helper:

 <div class="overlay" id="divOne">
    <div class="wrapper">
        <div id="container">
            <div class="btn" id="btn-1" data-showbutton="1">Login</div>
            <div data-button="1">
                <a href="#" class="close" onclick="clearData()">&times;</a>
                <div class="content">
                    <div class="container text-active">
                        @* load page content here*@
                        <partial name="_RegisterForm" for="Customer" />
                        @* load page content here*@
                    </div>
                </div>
            </div>
            <button>Register</button>
        </div>
    </div>
</div>

In the Customer page, you include the partial again, but you don’t need to specify a model via the for attribute in the partial because the host page’s model will be passed by default:

@page
@model WebApplication4.Pages.CustomerModel
@{
    ViewData["Title"] = "Register";
}
@* this part is what I need*@
<partial name="_RegisterForm" />
@* this part is what I need*@

Answered By – Mike Brind

Answer Checked By – Jay B. (AngularFixing Admin)