c# - ASP.NET Razor Page Render Page in Modal Popup

i am new to ASP.NET Razor Pages and need to implement a Modal Popup which should display another Razor Page.

So i have something like an Overview Page (Index.cshtml) where i see some data which i can edit in a seperate popup dialog.

My Question is what (Sections, PartialViews, ViewComponents, ...) should i use to display a Dialog Page in a popup modal besides the MainPage which gets displayed via the @RenderBody() in the _Layout.cshtml

I hope this is possible with purely C# / Razor Pages, so i don't want to use some extra javascript / jquery and so on.

Thanks for your help!

_Layout.cshtml:

<body>
  <header>
    <div class="container">
      <main role="main" class="pb-3">
        @RenderBody()
      </main>
    </div>

    <div class="modal-popup">
      <!-- render edit name page -->
    </div>
</body>

Index.cshtml:

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>

  <div>
    Name
    <a href="/EditName">Edit</a>
  </div>
  <div>
    BirthDate
    <a href="/EditBirthDate">Edit</a>
  </div>
</div>

EditName.cshtml:

@page
@model WebApplication2.Pages.EditNameModel

<h1>Edit Name</h1>

input your name:
<input type="text" />

<button type="submit">save</button>

i am new to ASP.NET Razor Pages and need to implement a Modal Popup which should display another Razor Page.

So i have something like an Overview Page (Index.cshtml) where i see some data which i can edit in a seperate popup dialog.

I hope this is possible with purely C# / Razor Pages, so i don't want to use some extra javascript / jquery and so on.

Thanks for your help!

_Layout.cshtml:

<body>
  <header>
    <div class="container">
      <main role="main" class="pb-3">
        @RenderBody()
      </main>
    </div>

    <div class="modal-popup">
      <!-- render edit name page -->
    </div>
</body>

Index.cshtml:

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>

  <div>
    Name
    <a href="/EditName">Edit</a>
  </div>
  <div>
    BirthDate
    <a href="/EditBirthDate">Edit</a>
  </div>
</div>

EditName.cshtml:

@page
@model WebApplication2.Pages.EditNameModel

<h1>Edit Name</h1>

input your name:
<input type="text" />

<button type="submit">save</button>

Share Improve this question edited Mar 4 at 20:42 TylerH 21.1k79 gold badges79 silver badges114 bronze badges asked Mar 4 at 20:20 Morf Michael 12 bronze badges

1) Can you check if your project is already using bootstrap.css and bootstrap.js? – Jerdine Sabio Commented Mar 4 at 21:18
2) EditName.cshtml - do you already have the code for OnPost? – Jerdine Sabio Commented Mar 4 at 21:18
1) bootstrap is there in my sample app, but currently not in the main application (but i will not come around i think ^^) 2) onpost will be a REST service call to a asp web api which saves the data. – Morf Michael Commented Mar 4 at 21:29

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

If you just want to show the popup inside the page with a edit input, I suggest you could try below codes:

1.Create a partial view:

@model BootstrapPopup.Pages.IndexModel

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editNameModal">
    Launch editNameModal popup
</button>




<div class="modal fade" id="editNameModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" asp-page-handler="EditName">
        <div class="modal-header">
          <h5 class="modal-title">Edit Name</h5>
        </div>
        <div class="modal-body">
          <input asp-for="Name" type="text" class="form-control" />
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

2.Modify the index page as below:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>


<partial name="_EditNameModal" model="Model" />

Backend:

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

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


    public void OnGet(  )
    {
 
    }

    public IActionResult OnPostEditName()
    {
        // Save data and redirect back to Index
        return RedirectToPage();
    }
}

Result:

You could modify the partial view as below and directly use it inside the layout

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editNameModal">
    Launch editNameModal popup
</button>
 

    <div class="modal fade" id="editNameModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" asp-page-handler="EditName">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Name</h5>
                    </div>
                    <div class="modal-body">
                        <input name="name" type="text" class="form-control" />
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Layout:

<partial name="_EditNameModal"/>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

c# - ASP.NET Razor Page Render Page in Modal Popup - Stack Overflow

_Layout.cshtml:

Index.cshtml:

EditName.cshtml:

_Layout.cshtml:

Index.cshtml:

EditName.cshtml:

1 Answer 1

与本文相关的文章

评论列表(0)