0

我正在创建下面的 MVC 视图,其中包含一些 jquery 脚本。但是这个脚本没有被执行。获取 jQuery 未定义错误。

我想直接在视图中编写包含脚本,而不是使用布局页面。

有人可以告诉我我在这里做错了什么吗?

@{
ViewBag.Title = "FileUpload";
}

<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - What up boyeez!</title>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>

<h2>FileUpload</h2>


@using (Html.BeginForm("UploadFile", "FileUpload", FormMethod.Post, new { enctype =         "multipart/form-data" }))
{
@Html.ValidationSummary();
<ol>
    <li class="lifile">
        <input type="file" id="fileToUpload" name="file" />
        <span class="field-validation-error" id="spanfile"></span>
    </li>
</ol>
<input type="submit" id="btnSubmit"  value="Upload" />
}
</body> 
</html>

   <script type="text/jscript">
   (function ($) {
       function GetFileSize(fileid) {
        try {
            var fileSize = 0;

            if ($.browser.msie) {
                var objFSO = new ActiveXObject("Scripting.FileSystemObject");
                var filePath = $("#" + fileid)[0].value;

                var objFile = objFSO.getFile(filePath);

                var fileSize = objFile.size;
                fileSize = fileSize / 1048576;

            }
            else {
                fileSize = $("#", fileid)[0].files[0].size
                fileSize = file / 1048576;
            }

            return fileSize;

        }
        catch (e) {
            alter("Error is: " + e);
        }
    }

    function getNameFromPath(strFilepath) {
        debugger;

        var objRE = new RegExp(/([^\/\\]+)$/);
        var strName = objRE.exec(strFilepath);

        if (strName == null) {
            return null;
        }
        else {
            return strName[0];
        }
    }

    $("#btnSubmit").live("click", function () {
        debugger;
        if ($('#fileToUpload').val == "") {
            $("#spanfile").html("Please upload file");
            return false;
        }
        else {
            return checkfile();
        }
    });

    function checkfile() {
        var file = getNameFromPath($("#fileToUpload").val());

        if (file != null) {
            var extension = file.subst((file.last('.') + 1));

            switch (extension) {

                case 'jpg':
                case 'png':
                case 'gif':
                case 'pdf':
                    flag = true;
                    break;

                default:
                    flag = false;
            }
        }

        if (flag == false) {
            $("#spanfile").text("You can upload only jpg, png, gif, pdf extension file");
            return false;
        }
        else {
            var size = GetFileSize('fileToUpload');

            if (size > 3) {
                $("#spanfile").text("You can upload file up to 3 MB");
                return false;
            }
            else {
                $("#spanfile").text("");
            }
        }
    }

    $(function () {
        debugger;
        $("#fileToUpload").change(function () {
            checkfile();
        });
    });
   })(jQuery);

4

3 回答 3

4

您缺少对 jquery 本身的引用。您可能还需要一个用于 jquery ui 的 css 文件:

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.custom.min.js"></script> 

有关如何使用和自定义 jquery ui 的完整详细信息,请参阅 jquery-ui 学习文档中的“基本概述:在网页上使用 jQuery UI ”部分。

用于 jquery 文件的 Razor 技术

为了让您在视图模板中的生活更轻松,您可以使用脚本渲染功能:

@Scripts.Render("~/Scripts/jquery-1.9.1.min.js")
@Scripts.Render("~/Scripts/jquery-ui-1.10.0.min.js")

就其本身而言,并不太令人印象深刻:语法更具表现力,并且缩短了 5 个字符,仅此而已。

但它会引导您进入捆绑包(最后的引用),这确实是您应该使用的。

捆绑包很棒

捆绑包允许您:

  • 将依赖文件分组:将 js 和/或 css 文件分组在一起可以减少发生这种情况的机会,也意味着您可以将自己的脚本“模块化”到一个文件夹中的多个文件中。
  • 提高性能:在单个文件中发送单个 Bundle 中的所有内容 - 通过减少来自浏览器的 http 请求数量来加快客户端的加载时间
  • 帮助开发:在开发过程中使用非缩小的 javascript(和 css)进行调试
  • 发布而不更改代码:使用缩小的脚本进行实时部署
    • 为您自己的脚本使用内置缩小
  • 优化客户端体验:将 CDN 用于 jquery 等标准脚本(这对您的用户来说更好)
  • 轻松升级:使用通配符通过 NuGet 更新 jquery 等版本号时,无需更改代码{version}(如下所示)

例子:

// This is usually in your MVC 4 App_Start folder at App_Start\BundleConfig
public class BundleConfig {
  public static void RegisterBundles(BundleCollection bundles) {
    // Example with full use of CDNs in release builds
    var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js";
    bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));

在你的剃须刀文件中,你只需要一个微小的改变:

@Scripts.Render("~/bundles/jquery");

这会:

  • 在调试期间发送完整的 jquery 脚本
  • 为发布构建发送缩小的脚本
  • 甚至缩小您自己的捆绑包,例如@Scripts.Render("~/bundles/myScripts");用于实时构建

捆绑详情

在引擎盖下,捆绑包将使用 CDN,或者也缩小您自己的脚本,或者在发布构建期间发送已经缩小的文件(如 jquery-1.9.1.min.js),但您可以通过使用bundles.UseCdnBundleTable.EnableOptimizations在您的RegisterBundles方法内部来控制它。通过在 web.config 中将其与 AppSettings 一起使用,您可以进行非常严格的控制,以便您甚至可以为实时站点上的某些用户发送调试脚本。

还要注意{version}在捆绑配置中的使用。

您也可以在一个包中包含多个脚本:

bundles.Add(new ScriptBundle("~/bundles/jqueryWithUi")
  .Include(
    "~/Scripts/jquery-{version}.js", 
    "~/Scripts/jquery-ui-{version}.js"
  ));

这个 razor 命令现在将为您发送两个文件:

@Scripts.Render("~/bundles/jquery");

您可以将包用于 css:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.css",
            "~/Content/themes/base/jquery.ui.tabs.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.progressbar.css",
            "~/Content/themes/base/jquery.ui.theme.css"));

参考:

于 2013-06-18T09:22:40.940 回答
1

您正在加载 jQuery UI 库而不加载 jQuery 库。

<script src="~/Scripts/path/to/jquery"></script
<script src="~/Scripts/jquery-ui-1.10.0.min.js"></script
于 2013-06-18T07:57:45.473 回答
0

我遇到了客户端验证不起作用的相同问题。我在 Chrome 中打开了 JavaScript 控制台,看到我收到一条错误消息,指出“未定义 JQuery。”。

原来我的视图中有一些代码导致 jQuery 无法加载。

建议遇到此问题的其他人,在浏览器中检查您的 JS 控制台,以确保您没有收到 JQuery 错误。

于 2013-12-07T20:00:26.803 回答