如何调用模态局部视图。它无法显示 [英] How can I call the modal partial view. It can't be shown

问题描述

在模态中检索并填充数据。但是模式不会显示是否单击了按钮。我该如何展示模态。 :(帮助。谢谢



我尝试过：

data are retrieved and populated in the modal. but the modal wont show if the button is clicked. how can i show the modal. :( help. thanks

What I have tried:

$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.

推荐答案

scope.ButtonClick = function（）{
var post =

scope.ButtonClick = function () { var post =

http（{
method：GET，
url：/ Catalogs / CurrencyMarkUps，
dataType：' json'，
params：{currencyCode：

http({ method: "GET", url: "/Catalogs/CurrencyMarkUps", dataType: 'json', params: { currencyCode:

（＃currency-code）。val（）}，
headers：{Content-Type： application / json}，

成功：函数（结果）{
//刷新部分视图

("#currency-code").val() }, headers: { "Content-Type": "application/json" }, success: function (result) { // refreshes partial view

这篇关于如何调用模态局部视图。它无法显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！