Jayson Angelo Adriano Ответов: 1

Как я могу назвать модальное частичное представление? Это не может быть показано


данные извлекаются и заполняются в модальном режиме. но модальный режим не будет отображаться, если нажать на кнопку. как я могу показать модальный. :( помощь. спасибо

Что я уже пробовал:

$scope.ButtonClick = function () {
        var post = $http({
            method: "GET",
            url: "/Catalogs/CurrencyMarkUps",
            dataType: 'json',
            params: { currencyCode: $("#currency-code").val() },
            headers: { "Content-Type": "application/json" },

            success: function (result) {
                // refreshes partial view
                $('#modalMarkup').html(result);
            }
        });
    }; //THIS IS THE JS FILE

@model CurrencyManager.ViewModels.CurrencyMarksUpsViewModel

<div id="modalMarkup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 class="modal-title">Currency Markup</h3>
            </div>
                <div class="modal-body">
                    <div class="currencyList">
                        <div class="table border">
                            <div>
                                <div>Currency</div>
                                <div>Carrier</div>
                                <div>Start date</div>
                                <div>End date</div>
                                <div>Markup</div>
                            </div>
                            @foreach (var currencyMarkUp in Model)
                            {
                                <div ng-click="">
                                    <div>@currencyMarkUp.CurrencyCode</div>
                                    <div>@currencyMarkUp.CarrierCode</div>
                                    <div class="startDate">
                                        <div>@currencyMarkUp.StartDate</div>
                                        <input type="text" class="textbox calerdar" value="@currencyMarkUp.StartDate" />
                                    </div>
                                    <div class="endDate">
                                        <div>@currencyMarkUp.EndDate</div>
                                        <input type="text" class="textbox calerdar" value="@currencyMarkUp.EndDate" />
                                    </div>
                                    <div class="currentMarkup">
                                        <div>@currencyMarkUp.MarkUpRate</div>
                                        <input type="text" class="textbox" value="@currencyMarkUp.MarkUpRate" />
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-button">
                        <input class="btn btn-green pull-right btnUpdateMarkup" type="button" name="" value="UPDATE" />
                    </div>
                </div>
        </div>
    </div>
</div> // THIS IS THE MODAL PARTIAL VIEW

<input class="btn btn-green" type="button" name="" value="MARKUP" ng-click="ButtonClick()" /> //THIS IS THE BUTTON IN THE MAIN VIEW



public ActionResult CurrencyMarkUps(string currencyCode)
        {
            var currencyMarkUpList = _currencyServiceModel.RetrieveCurrenciesMarkUp(currencyCode);

            CurrencyMarksUpsViewModel currencyMarkUpViewModel = new CurrencyMarksUpsViewModel();

            if (currencyMarkUpList != null && currencyMarkUpList.Count > 0)
            {
                foreach (var currencyMarkUp in currencyMarkUpList)
                {
                    DateTime endDate;
                    DateTime startDate;
                    DateTime.TryParse(currencyMarkUp.EndDate, out endDate);
                    DateTime.TryParse(currencyMarkUp.StartDate, out startDate);
                    currencyMarkUpViewModel.Add(new CurrencyMarkUpViewModel
                    {
                        CurrencyMarkupID = currencyMarkUp.CurrencyMarkupID,
                        EndDate = endDate,
                        StartDate = startDate,
                        CarrierCode = currencyMarkUp.CarrierCode,
                        CurrencyCode = currencyMarkUp.CurrencyCode,
                        MarkUpRate = currencyMarkUp.MarkUpRate
                    });
                }
            }
            return PartialView("~/Views/Catalogs/PartialViews/_CurrencyMarkUp.cshtml",currencyMarkUpViewModel);
        } //I HAVE THIS PARTIAL VIEW CONTROLLER TO BE CALLED.

1 Ответов

Рейтинг:
2

sachin.vishwa90

ваш код завершен на 99%. остается только одно.
если вы используете bootstrap (я считаю, что это так), то после помещения HTML в ваш контейнер div вы должны вызвать метод .modal.

success: function (result) {
                // refreshes partial view
                $('#modalMarkup').html(result);
                $('#modalMarkup').modal('show'); // invoke the modal
            }

Если приведенный выше код не работает, то попробуйте поместить html-код #modalMarkup в контейнер Moda-body, а не в родительский div.


Jayson Angelo Adriano

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

sachin.vishwa90

как и советовали, попробуйте поместить конечный html-код в div и сохранить свой контент только там.

я полагаю, что у вас есть эта кнопка на той же странице

после нажатия этой кнопки вы хотите
частичное представление появится в modalpopup.
и вы также дали код частичного представления.

если это так, то в методе успеха вы должны вызвать только модальную функцию. Я думаю, что вам не нужно обновлять модальный
попробуйте удалить приведенный ниже код
// обновляет частичный вид
$('#modalMarkup'). html (результат);

и возвращать false;

кроме того, вам придется использовать функцию $scope.apply после обновления http://jimhoskins.com/2012/12/17/angularjs-and-apply.html обратитесь к этому.

$('#modalMarkup'). html (результат);
$('#modalMarkup'). modal ('show');
$область действия.применить();