Как получить всплывающее окно с частичным представлением в MVC 5

Question

Кажется, есть пара способов сделать это.Я действительно хотел, чтобы это видео работало на меня.https://www.youtube.com/watch?v=oHWEs8XWA2U

При поиске в Интернете мне было трудно найти этот вопрос в последнее время, поэтому мне интересно, были ли реализованы новые и улучшенные (более простые) способы.

Вот мойДомашний контроллер

   public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PartialViewTest()
        {
            return PartialView();
        }
        [HttpPost]
        public ActionResult PartialViewTest(Person person)
        {
            return View();
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Вот мой взгляд Я хочу всплывающее окно на

@{
    ViewBag.Title = "Contact";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="btn-block" style="width:225px">Modal </button>
<div class="modal fade" id="myModal" role="dialog" data-url='@Url.Action("PartialViewTest","Home")'></div>

<script type="text/javascript">
    $(document).ready(function () {

        $('.btn-block').click(function () {

            var url = $('#myModal').data('url');
            $.get(url, function (data) {

                $("#myModal").html(data);
                $("#myModal").modal('show');
            });
        });

    });
</script>

Вот мой частичный вид

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModal-label">Bootstrap Dialog</h4>
            <div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" placeholder="enter name" class="form-control" id="text" name="text" />
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="enter name id" class="form-control" id="text" name="text" />
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="adress" class="form-control" id="text" name="text" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="btnOK" onclick="">OK</button>
                    <button class="btn btn-default" data-dismiss="modal" id="btnCancel">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>

Когда я нажимаю кнопку, как показано на рисунке выше.Ничего не произошло.Почему не появляется всплывающее окно?

Если это не лучший способ сделать это, не могли бы вы предоставить ссылку на учебное пособие для наиболее профессионального, правильного и простого способа сделать это?

Answer 1

"Когда я нажимаю кнопку, как показано на рисунке выше. Ничего не происходит." -> Я только что попробовал ваш код, и он работает, модал открывается.Камило Теревинто прокомментировал, что вы должны нажать 12 в chrome и проверить ошибки на вкладке консоли.

После того, как модальное открытие, чего не хватает в вашем коде?Используйте модель "Персона" в модальном режиме, создайте форму сообщения и установите кнопку ОК, чтобы отправить

@model Person //Should contain person model namespace
@Html.BeginForm("PartialViewTest", "Home", FormMethod.Post)
{
<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModal-label">Bootstrap Dialog</h4>
                <div>

                    <div class="modal-body">
                        <div class="form-group">
                            @Html.TextBoxFor(p => p.name)
                        </div>
                        <div class="form-group">
                            @Html.TextBoxFor(p => p.adress)
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="btnOK" onclick="">OK</button>
                        <button class="btn btn-default" data-dismiss="modal" id="btnCancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

Ваше действие должно перенаправить на индекс.

[HttpPost]
public ActionResult PartialViewTest(Person person)
{
    /* do things */
    return RedirectToAction("Index");
}

Answer 2

Если это Bootstrap, то модальный HTML вашего частичного представления не работает.модальное тело и модальный нижний колонтитул находятся под модальным заголовком.Я почти уверен, что modal-header, modal-body и modal-footer должны быть прямыми потомками modal-content, и это должно быть потомком modal-dialog, и это должно быть потомком modal, и у тебя есть эти контейнерные дивы, оборачивающиеих.

Редактировать: Ваша проблема в том, что вы загружаете ваши jquery и начальную загрузку после того, как пытаетесь их использовать.Это <script> запускается до загрузки ваших сценариев.Вы должны поместить это в раздел scripts.

Камило Теревин, чтобы заметить, что вам нужно удалить тег jQuery script из вашего представления.У вас уже есть jQuery в комплекте.