Click here to Skip to main content
15,881,089 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi!
I have problem with calling partialView which has boostrap modal form from controller .Controller returns full page view without any css .How can I fix this?

line from index.cshtml that calls controller
C#

<p><a  class="btn btn-outline-white btn-lg ftco-animate"asp-controller="Rezervacija" asp-action="Index"  >Reservation</a></p>



(Rezervacija:Controller Index:action) returnes modal as partialView

public IActionResult Index()
   {

       return PartialView("~/Views/Rezervacija/Rezervacija.cshtml");
   }




and here is modal form from reservation.cshtml

<div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-lg-4 bg-image" style="background-image: url(images/bg_3.jpg);"></div>
                <div class="col-lg-8 p-5">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <small>CLOSE </small><span aria-hidden="true"</span>
                    </button>
                    <h1 class="mb-4">Reserve A Table</h1>
                    <form action="#" method="post">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label asp-for="Ime">Ime</label>
                                <input type="text" class="form-control" asp-for="Ime">
                            </div>
                            <div class="col-md-6 form-group">
                                <label asp-for="Prezime">Last Name</label>
                                <input type="text" class="form-control" asp-for="Prezime">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label for="m_email">Email</label>
                                <input type="email" class="form-control" asp-for="Email">
                            </div>
                        </div>
                       

                       

                    </form>
                </div>
            </div>

        </div>
    </div>
</div>


What I have tried:

Tried calling it as view from controller,
included all libraries that are necessary,
and in Rezervacija.cshtml(partialView view) included
<script type="text/javascript">
    $(document).ready(function () {
        $("#reservationModal").modal('show');


    });
</script>



I appreciate any help!!!
Posted
Updated 9-Sep-20 6:49am

1 solution

You're creating a link to that controller action so when you click on it it navigates to the result of that action which is your partial view. If you want to show the partial view on the page then you'll need to load it via ajax and inject the results into the current DOM and trigger the modal to display.

This article shows you how to do something similar.

ASP.NET Core ajax modals with validation using Bootstrap - SoftDevPractice[^]
 
Share this answer
 
Comments
sasko1 9-Sep-20 19:09pm    
Thanks!
i solved it. Article was really helpfull

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900