The Intern
The Intern

Reputation: 73

ASP.Net Core view as popupbox

I am currently working on a form. In the form, if there is not an item needed you can click the add button and it takes you to a new form where you can add the item. Instead of my view going to another page, I want it to pop up above the form so that the user can just quickly add the item and not have to travel pages.

Here is a snipit from my Create.cshtml

<div class="form-group">
    <label asp-for="INT_CertificationsID" class="col-md-2 control-label"></label>
    <div class="col-md-3">
        <select asp-for="INT_CertificationsID" class ="form-control" asp-items="ViewBag.INT_CertificationsID"></select>
    </div>
    <a class="btn btn-default" asp-area="" asp-controller="INT_Certifications" asp-action="Create">Add Certification</></a>
</div> 

When the add certification attribute is clicked I would like a box to pop up to the Create.cshtml for the certification. So that they may quickly add it to the list and continue to fill out the form.

I have looked up several examples to do this but most of them are either too old, too long, or don't work in .netcore due to nuget package errors with JqueryUI.

Upvotes: 1

Views: 4441

Answers (2)

Dominik Holland
Dominik Holland

Reputation: 418

You need to make a controller method that returns the page you want in the popup as a PartialView.

I think you mean modal and not "popup"... you need to use a modal mechanism to create a modal window and get (or post) your partial via AJAX and use the result to display in the modal window.

I like bootbox which is a wrapper for bootstraps modal functionality.

Upvotes: 2

calingasan
calingasan

Reputation: 1005

I would load partial view in a hidden div together with the pages that needs them and dynamically display them with JavaScript when needed. Don't use forms to send http request, instead use AJAX.

Using pop-ups can work against you because browsers comes by default with pop-up blockers. Might work on your devbox but it could have a completely different behaviour somewhere else.

Using forms to send request requires the page to be reloaded which does not provide a good user experience.

Fix your solution, don't use nugget for client side script. Use bower instead. Here's a link https://learn.microsoft.com/en-us/aspnet/core/client-side/

Upvotes: 1

Related Questions