Как загрузить Partial View в Bootstrap 4 модально

Question

Раньше я использовал другую библиотеку jquery под названием jquery modal. Однако я решил вернуться к использованию модального загрузчика.

Я не уверен, как открыть модал через URL с помощью начальной загрузки. Вот как я делал это с помощью jquery modal:

@Html.ActionLink("Add", "RoleDetails", @ViewContext.RouteData.Values["controller"].ToString(), new { Id = "", ApplicationId = Model.Id }, new { @class = "btn btn-primary", @rel = "modal:open" })

Это мой контроллер:

public ActionResult RoleDetails(string Id, string ApplicationId)
{
    ApplicationRoleDetailsViewModel role = new ApplicationRoleDetailsViewModel();
    if (Id == null)
    {
        role = new ApplicationRoleDetailsViewModel
        {
            ApplicationId = null,
            Id = Id,
            RoleName = null
        };
    }
    else
    {
        var result = rolesData.Get(Id);
        role = new ApplicationRoleDetailsViewModel
        {
            ApplicationId = result.ApplicationId,
            Id = Id,
            RoleName = result.Name
        };
    }
    return View("~/Areas/Applications/Views/Applications/Modals/RoleDetails.cshtml", role);
}

Это вид:

@model APPDATA.Data.ViewModels.ApplicationRoleDetailsViewModel
<script>
    $(document).ready(function () {

    });
    $(document).on("submit","#modal",function (e) {
        e.preventDefault();
        var form_data = $(this).serialize();
        $.ajax({
            url: "@Url.Action("SaveRole", @ViewContext.RouteData.Values["controller"].ToString())",
            method: "POST",
            data: form_data,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (result) {
                if (result.success) {
                    $(document).off("submit");
                    $(document).off("submit", "#save");
                    $('#modal').off('#save');
                    $.modal.close();
                    return;
                }
                $.each(result.errors, function (index, item) {
                    // Get message placeholder
                    var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                    element.empty();
                    // Update message
                    element.append($('<span></span>').text(item.errorMessage));
                    // Update class names
                    element.removeClass('field-validation-valid').addClass('field-validation-error');
                    $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
                });
            }
        });
        return false;
    });
</script>
<div class="col-sm-12">
    @if (Model.Id == null)
    {
        <h2>Add Role</h2>
    }
    else
    {
        <h2>Edit Role</h2>
    }
    <hr />
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "modal" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.HiddenFor(m => m.Id)
                    @Html.HiddenFor(m => m.ApplicationId)
                    @Html.LabelFor(m => m.RoleName)
                    @Html.TextBoxFor(m => m.RoleName, new { @class = "form-control col-sm-12" })
                    @Html.ValidationMessageFor(m => m.RoleName)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="clearfix">
                        <div class="pull-right">
                            <input type="submit" id="save" value="Save" class="btn btn-primary" />
                            <a href="#" id="close" class="btn btn-outline-secondary" rel="modal:close">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

Как бы я посмотрел на модал, который выглядит следующим образом?

<div class="modal" id="modal">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content">

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

Answer 1

Если вы хотите загрузить свой «RoleDetails.cshtml» в ваш модальный контент, тогда используйте вызов ajax вместо ActionLink.

Вместо того, чтобы передавать вид, вернуть частичный вид из контроллера.

, поэтому при вызове ajax вы получите весь вид в виде данных, которые вы можете добавить в содержимое модели.

Когда вы нажимаете на ссылку, выполняете ajax-вызов и после получения успешного ответа откройте модель, как показано ниже.

<a href="#" id='btnAdd'>Add</a>

<script>

$('#btnAdd').on('click',function(){

$.ajax({
  url : '@Url.action("action","controller")',
  data : data,
  success : function(data){
    $('#model-content').html(data);
    $.modal.open();
}
});

});
</script>