Загрузить частичное представление внутри модального - PullRequest
Новая
       9

Загрузить частичное представление внутри модального

0 голосов
/ 24 января 2019

создать частичное представление, но оно не загружено в модальном режиме. Я пробовал так много способов, но все еще не повезло, чтобы загрузить частичное представление внутри модального то, что я попробовал, это вниз. Я хочу загрузить другой метод действия, такой как метод create внутри модального окна. https://www.youtube.com/watch?v=3he9CLXmASo Приведенная выше ссылка - пример, который я хочу сделать следующим образом.

Это мой модальный код 

<script>
$(document).ready(function() {
    $("#showGame").click(function() {
        var url = $("#gameModal").data("url");

        $.get(url, function(data) {
            $("#gameContainer").html(data);

            $("#gameModal").modal("show");
        });
    });
});


<div class="modal fade" id="gameModal" data-url="@Url.Action("Create")">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Default Modal</h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

Это мой частичный код просмотра 

@model Mvc.Models.Company
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Company</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.URL, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.URL, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.URL, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Active, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.Active)
                @Html.ValidationMessageFor(model => model.Active, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tstamp, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tstamp, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tstamp, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.IsDeleted, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.IsDeleted)
                @Html.ValidationMessageFor(model => model.IsDeleted, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>}
<div>
 @Html.ActionLink("Back to List", "Index")
            </div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Это мой код контроллера 

public ActionResult Create()
    {
        return View();
    }

    // POST: Companies/Create

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "CompanyID,Name,Address,PhoneNumber,URL,Email,Active,Tstamp,IsDeleted")] Company company)
    {
        if (ModelState.IsValid)
        {
            db.Companies.Add(company);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
   return View(company);
    }

1 Ответ

0 голосов
/ 25 января 2019

Сначала напишите свой модальный html-код следующим образом: 

// Button that will trigger the modal

 <button id="createCompanyButton" type="button" class="btn btn-info">Create Company</button>

// Your modal code

<div class="modal fade" role="dialog" id="createCompanyFormModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Default Modal</h4>
            </div>
            <div id="createCompanyFormModalbody" class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>

Тогда в JavaScript: 

$(document).ready(function() {
    $(document).on('click','#createCompanyButton', function(event) {
        event.preventDefault();
        event.stopImmediatePropagation();

        $.ajax({
           url: '/Companies/Create',
           type: 'GET',
           success: function(data) {
                $('#createCompanyFormModalbody').html(data);
                $('#createCompanyFormModal').modal('show');
           },
           error: function() {
               alert("There is some problem in the service!")
          }
       });
    });
});

Теперь при нажатии кнопки createCompanyButton она должна показывать форму в модал.

...