asp.net core 2.2 or 3 and bootstrap > 4.x.x modal working sample

Question

User-344050069 posted

Hi,

I try to upgrade my web solution to support bootstrap 4 and I can't find a working sample. I know v4 is a complete rewrite but anyway...

All my crud edit and delete modal views are not working anymore.

the only samples I found from the community are removing the "asp-action" and work with javascript and ajax api.

For a new solution from scratch, I could accept it but to my opinion, it's a regression because it would oblige me to modify tons of code and forget the partial "_Modal" views and all the good things asp.net bring in the table.

Can somebody have fund a way to keep the asp-action + partial views with Bootstrap 4 ?

If yes, I would appreciate to have a working sample.

Thanks in advance

-Vince

Answer 1

User475983607 posted

We cannot see your code and have no idea what is "not working" means.

The Bootstrap site has a migration guide which is helpful.  Another option is creating a new 3.1 project then copying the layout page or parts of the layout page to your project.

Answer 2

User-344050069 posted

Hi didn't provide any code because the people who already played with the topic I mention know about what I talking about.

Now, if you want to see by yourself, take a sample repo like https://github.com/iffat12328/ddac

Steps:

1- Run it like is it. In http://localhost:57260/product -> Click 'Add'  -> "ADD PRODUCT modal pops .

2- Upgrade Bootstrap with version 4

3- Repeat #1.   nothing happened when click on "Add" -> modal is not working anymore

As I said on my first post, some people in this post recommend to do some modifications :

https://stackoverflow.com/questions/58546721/asp-net-core-mvc-bootstrap-4-modal-form-submit-not-working

but doing that, I'd loose asp-action + partialviews and aspnet tags helper...

ex: to delete a product:

In Index.cshtml

<a id="deleteUserModal" data-toggle="modal" asp-action="DeleteProduct" asp-route-id="@item.Id" data-target="#modal-popUP" class="btn btn-danger">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>

@Html.Partial("_Modal", new BootstrapModel { ID = "modal-popUP", AreaLabeledId = "modal-popUP-label", Size = ModalSize.Large })

in _DeleteProduct.cshtml

<form asp-action="DeleteProduct" role="form">
@Html.Partial("_ModalHeader", new ModalHeader { Heading = "Are you sure?" })

<div class="modal-body form-horizontal">
Are you want to delete <strong>@Model?</strong>
</div>

@Html.Partial("_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" })
</form>

https://stackoverflow.com/questions/58546721/asp-net-core-mvc-bootstrap-4-modal-form-submit-not-working

txs

-vince

Answer 3

User475983607 posted

The loaded.bs.modal event is deprecated in Bootstrap 4.  Your code uses this event in theModelPopup.js file. The migration documentation recommends is using jQuery.load();

The remote option (which could be used to automatically load and inject external content into a modal) and the corresponding loaded.bs.modal event were removed. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

Also, the code is confusing.  You have two copies of bootstrap.  One for an Admin and one for a user.  Can you explain how you are upgrading bootstrap?  Lastly, did you create this project or did it come from a template you downloaded from the internet?  If the source HTML came from a template, which one did you use and is there an update for Bootstrap 4?

Answer 4

User711641945 posted

Hi vRTHNER_ASPNET,

How did you migrate from bootstrap v3 to v4?

Here is a working demo like below:

https://forums.asp.net/t/2164963.aspx?Razor+table+add+remove+data

For how to use partial view in bootstrap modal:

https://stackoverflow.com/a/58655887/11398810

Best Regards,

Rena

Answer 5

User-344050069 posted

Hi, thanks for trying to help but please read carefully what I have said in my previous post ;-)

It's easy to migrate from v3 to v4 for standard pages navigation.

The struggle concerns the MODAL stuff.

The demo you mention does standard page navigation.

If you can do the same job with all in modal partial views, it would be great :-)

Cheers

-Vince