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

  • 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

    Friday, July 3, 2020 7:27 AM

All replies

  • 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.

    Friday, July 3, 2020 10:08 AM
  • 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

    Friday, July 3, 2020 10:32 AM
  • 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?

    Friday, July 3, 2020 11:40 AM
  • 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

    Monday, July 6, 2020 8:47 AM
  • 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

    Monday, July 6, 2020 9:17 AM