Question

请帮助，新的Web开发人员警报！

MVC + JavaScript：）

我有一个带有提交按钮的.cshtml页面。当我按下该按钮时，我想调用_Layout.cshtml页面上包含的JavaScript函数。

不幸的是，我收到一个函数未找到错误。 “ 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');
    }
}

最后是“查看源代码”的精简版

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

如果我按view source并单击脚本链接，我会得到这个...

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');
    }
}....

所以我想我的问题是如何从子cshtml页面调用_Layout页面上包含的函数？

我想我可以在页面上使用脚本部分，但是此功能由多个地方共享。所以我有点需要一个中心位置来保持代码干燥。

调用_Layout.cshtml中包含的JavaScript函数

0 个答案: