Question

我创建了下面的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);

Answer 1

您缺少对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学习文档中的“Basic Overview: Using jQuery UI on a Web Page”部分。

jquery文件的Razor技术

为了让您的视图模板更轻松，您可以使用脚本渲染功能：

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

本身并不太令人印象深刻：语法稍微有点表现力，5个字符更短，这就是全部。

但是它引导你进入捆绑（最后的引用），这正是你应该使用的。

捆绑很棒

Bundles允许您：

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

示例：

// 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.UseCdn方法中的1}}和BundleTable.EnableOptimizations。通过在web.config中使用它和AppSettings，您可以非常接近控制，这样您甚至可以在实际站点上为某些用户发送调试脚本。

另请注意在捆绑配置中使用RegisterBundles。

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

{version}

此razor命令现在将为您发送两个文件：

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

你可以使用bundle for css：

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

参考文献：

www.asp.net - Bundling and Minification

Answer 2

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

<script src="~/Scripts/path/to/jquery"></script
<script src="~/Scripts/jquery-ui-1.10.0.min.js"></script

Answer 3

我遇到了客户端验证无法正常工作的问题。我在Chrome中启动了JavaScript控制台，看到我收到一条错误，指出“JQuery未定义。”。

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

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

jQuery没有定义+ MVC4

3 个答案:

jquery文件的Razor技术

捆绑很棒

捆绑详情