Модальное окно не работает

107
31 октября 2021, 11:30

Создал модальное окно по примеру отсюда :Метанит, модальные окна . Мое модальное окно принимает значения и выводит их в виде таблицы. но работает не правильно.

Пример:

Контроллер:(смотри GetKarmanDetails)

    public class HomeController : ControllerInitializer
{
    public HomeController(IServiceLayer serviceLayer) : base(serviceLayer) { }
    /// <summary>
    /// Метод загружается при старте страницы
    /// </summary>
    /// <returns></returns>
    public ActionResult Index()
    {
        var systems = GlobalCache.GetMnemoObjModel.Mnemos;
        ViewBag.SystemList = new SelectList(systems, "MNEMO_NAME", "MNEMO_NAME");
        return View();
    }
    /// <summary>
    /// Метод формирует отчет по выбранному штабелю
    /// Отчет формируется из системы АСПТП -> Складские объекты ТЭСЦ-3 (пономерной учет)
    /// </summary>
    /// <param name="id">Идентфикатор штабеля, поле ID таблицы TESC3.SPR_ALL_STACKS</param>
    /// <returns></returns>
    public ActionResult GetReport(int id)
    {
        // ссылка на отчет в системе АСПТП берем из web.config
        string pathValue = ConfigurationManager.AppSettings["ReportByShtabel"].ToString();
        return Redirect(pathValue+"?Shtab=" +id);
    }
    public ActionResult GetKarmanDetails(string _mnemoName, string _stackName, int? _pocketNum)
    {
        new Mapper().LoadDataKarman(_mnemoName, _stackName, Convert.ToInt32(_pocketNum));
        return PartialView(GlobalCache.GetKarmanDetails);
    }

Вызов частичного представления происходит следующим образом: @Html.ActionLink(@item_noms.DIAMETER, "GetKarmanDetails", new { _stackName = item_karman.STACK_NAME, _pocketNum = item_karman.POCKET_NUM, _mnemoName = Model.MNEMO_NAME }, new { @class = "karmanItem" })</div>

Отображаться оно должно как я понял на той же странице, откуда и вызываю : <div id="modDialog" class="modal fade"> <div id="dialogContent" class="modal-dialog"></div> </div>

файл ClickPlain.js :

; (function (win, $) {
    win.Plain = function () {
        $(".karmanItem").on('click', function () {
            AJAXGlobals({
                url: this.href,
                data: {
                    _mnemoName: $(this).data('_mnemoName'),
                    _stackName: $(this).data('_stackName'),
                    _pocketNum: $(this).data('_pocketNum')
                },
                success: function (data) {
                    $('#dialogContent').html(data.resultHtml);
                    $('.table-custom').tableHover();
                    $('#modDialog').modal('show');
                }
            });
        });
    };
})(this, jQuery);

ну и само частичное представление:

<div class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" modal-header="close" aria-hidden="true">&times;</button>
    <h4>Данные о сортаменте кармана</h4>
</div>
    <div class="modal-body">
        <table class="table table-custom">
            <thead>
            <tr>
                <th>Диаметр</th>
                <th>Толщина</th>
                <th>Марка стали</th>
                <th>НТД</th>
                <th>Количество труб</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var element in Model.Karmans)
            {
                <tr>
                    <td>@Html.DisplayFor(model => element.DIAMETER)</td>
                    <td>@Html.DisplayFor(model => element.THICKNESS)</td>
                    <td>@Html.DisplayFor(model => element.STAL)</td>
                    <td>@Html.DisplayFor(model => element.GOST)</td>
                    <td>@Html.DisplayFor(model => element.COUNT_PIPES)</td>
                </tr>
            }
            </tbody>
        </table>
    </div>
</div>

Скорее всего, что я неверно его вызываю, и ссылка на частичное представление принимается как редирект на страницу, не пойму в чем дело

Answer 1

По вашей ссылке e.preventDefault() защищает от перехода на новый url. У вас этого метода не видно. Добавьте e.preventDefault() в обработчик кликов.

Answer 2

Мое решение такое:

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

мой файл .js выглядит следующим образом:

    $("body").on('click', '.karmanItem', function (e) {
    e.preventDefault();
    var href = $(this).attr('href');
    AJAXGlobals({
        url: href,
        data: {
            _mnemoName: $(this).data('plainMnemo'),
            _stackName: $(this).data('plainStack'),
            _pocketNum: $(this).data('plainPocket')
        },
        success: function (data) {
            $('#dialogContent').html(data.resultHtml);
            $('#modDialog').modal('show');
        }
    });
});