Вызов функции JavaScript, содержащейся в _Layout.cshtml - PullRequest
Новая
       0

Вызов функции JavaScript, содержащейся в _Layout.cshtml

0 голосов
/ 31 августа 2018

Пожалуйста, помогите, новое предупреждение веб-разработчика!

MVC + JavaScript:)

У меня есть страница .cshtml с кнопкой отправки. Когда я нажимаю эту кнопку, я хочу вызвать функцию JavaScript, содержащуюся на моей странице _Layout.cshtml.

К сожалению, я получаю функцию не найдена ошибка. 'ReferenceError: validateCheckBoxesInForm не определен'

Вот страница cshtml ... 

@model FrontEnd.Web.Areas.PresentationToPolicy.ViewModels.CaseSummary.InsurersReferralViewModel
@{
    ViewBag.Title = "Refer To Insurers";
}
<div>
    <form asp-area="PresentationToPolicy" asp-controller="CaseSummary" asp-action="ReferToInsurers" method="POST" id="documentDownload">
        <div class="panel panel-danger">
            <div class="panel-body" style="padding-bottom: 15px">
                <div class="row">
                    <div class="col-md-12">
                        <input class="btn btn-success btn-lg" type="submit" value="Finish" onclick="validateCheckBoxesInForm(event, 'documentDownload', 'Whooops!', 'You Must Select At Least One Insurer For Referal')" style="max-width: 100%; width: 100%"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Здесь урезанная версия моего _Layout.cshtml (скрипт загружается сразу после начальной загрузки и т. Д., В начале тела) 

@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

</head>
<body style="background-color: #f6f8fa">
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/jquery-ui/jquery-ui.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

        <script src="~/js/dist/manifest.js"></script>
        <script src="~/js/dist/vendor.js"></script>
        <script src="~/js/dist/scripts.js" asp-append-version="true"></script>
    </environment>
<div class="container body-content">

    @RenderBody()
    <hr style="margin-bottom: 2px; padding-bottom: 2px" />
    <footer>
        <p style="vertical-align: baseline">&copy; 2017 - ABACUS Portfolio Portal</p>
    </footer>
</div>
    @RenderSection("Scripts", required: false)
</body>
</html>

Да, и скрипт, который содержит функцию! 

function validateCheckBoxesInForm(event, formId, title, message) {
    let validated = false;
    let form = $(`#${formId}`);
    let elements = form.elements;
    event.preventDefault();

    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type === 'checkbox') {
            if (elements[i].checked) {
                validated = true;
                form.submit();
                break;
            }
        }
    }

    if (validated === false) {
        $('<div></div>')
            .appendTo('body')
            .html(
                `<div id="validateModal" class="modal fade">
                            <div class="modal-dialog">
                                <div class="modal-content" style="border-color: #f00">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h3 class="modal-title">
                                            ${title}
                                        </h3>
                                    </div>
                                    <div class="modal-body">
                                        <h4>${message}</h4>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-dismiss="modal" style="width: 150px">Ok</button>
                                    </div>
                                </div>
                            </div>
                        </div>`
            );
        $('#validateModal').modal('show');
    }
}

И, наконец, урезанная версия 'View Source' 

<body style="background-color: #f6f8fa">

        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/jquery-ui/jquery-ui.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/dist/manifest.js"></script>
        <script src="/js/dist/vendor.js"></script>
        <script src="/js/dist/scripts.js?v=iHOVZCmLJ7F7ev0DnwzRmkZgp-zu74ZoPGBIra9EaIk"></script>


<div class="container body-content">
    <form method="POST" id="documentDownload" action="/PresentationToPolicy/CaseSummary/ReferToInsurers/43cffe87-2d8f-43eb-8ad2-e0b046fc8d20">
        <div class="panel panel-danger">
            <div class="panel-body" style="padding-bottom: 15px">
                <div class="row">
                    <div class="col-md-12">
                        <input class="btn btn-success btn-lg" type="submit" value="Finish" onclick="validateCheckBoxesInForm(event, 'documentDownload', 'Whooops!', 'You Must Select At Least One Insurer For Referal')" style="max-width: 100%; width: 100%"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Если я нажимаю на источник просмотра и нажимаю на ссылку скрипта, я получаю это ... 

webpackJsonp([19],{

/***/ 749:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(750);


/***/ }),

/***/ 750:
/***/ (function(module, exports, __webpack_require__) {

"use strict";


//Global Functions that will be run of every page
//Called via _Layout.cshtml
function validateCheckBoxesInForm(event, formId, title, message) {
    var validated = false;
    var form = $('#' + formId);
    var elements = form.elements;
    event.preventDefault();

    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type === 'checkbox') {
            if (elements[i].checked) {
                validated = true;
                form.submit();
                break;
            }
        }
    }

    if (validated === false) {
        $('<div></div>').appendTo('body').html('<div id="validateModal" class="modal fade">\n                            <div class="modal-dialog">\n                                <div class="modal-content" style="border-color: #f00">\n                                    <div class="modal-header">\n                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n                                        <h3 class="modal-title">\n                                            ' + title + '\n                                        </h3>\n                                    </div>\n                                    <div class="modal-body">\n                                        <h4>' + message + '</h4>\n                                    </div>\n                                    <div class="modal-footer">\n                                        <button type="button" class="btn btn-danger" data-dismiss="modal" style="width: 150px">Ok</button>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>');
        $('#validateModal').modal('show');
    }
}....

Итак, я предполагаю, что мой вопрос заключается в том, как вызвать функцию, содержащуюся на странице _Layout, со страницы дочернего cshtml?

Полагаю, я мог бы использовать раздел скриптов на странице, но эта функция используется несколькими местами. Поэтому мне нужно центральное расположение, чтобы код оставался сухим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...