自定义JQuery捆绑包，MVC5

本文介绍了自定义JQuery捆绑包，MVC5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个简单的MVC表单，为此我尝试纠正一小段JQuery以确定是否选中了一个复选框.我已经在捆绑包中注册了我的JS(Sender.js)，如下所示:

I have a simple MVC form, for which I am trying to right a small piece of JQuery to determine if a check box is selected or not. I've registered my JS (Sender.js) in the bundle as such:

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/Sender").Include(
            "~/Scripts/Sender.js"));
    }

我将它注册为这样的视图:

and I have it registered in my view as such:

<body>
   @Scripts.Render("~/bundles/Sender")
</body>

现在，有两件事，1)脚本根本不起作用，2)脚本似乎正在div中注册自身:

Now, two things, 1) the scripts isn't working at all, and 2) the script seems to be registering itself inside a div:

这是我第一次尝试MVC，我确定我缺少明显的东西，但是可以看到.

This is my first attempt at MVC, and i'm sure i'm missing something obvious, but can see it.

有人可以指出我正确的思路以使我的js文件正常工作. Basicall，如果选中了"AML"复选框，它应该做的就是隐藏或显示一个文本框.

Can someone point me in the right driect to get my js file to work. Basicall, all it should do is hide or show a text box if the check box AML is selected.

编辑

这是整个视图

@model BTSanctions.UserAdmin.Models.EditSenderViewModel
@{
   ViewBag.Title = "Edit";
}

@Scripts.Render("~/bundles/Sender")


<h2>Edit</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Add a new Sender</h4>
        <hr />
        @Html.ValidationSummary(true)


        <div class="form-group">
            @Html.LabelFor(model => model.AML, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AML)
                @*@Html.ValidationMessageFor(model => model.MatchPercentage)*@
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.MatchPercentage, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.MatchPercentage)
                @Html.ValidationMessageFor(model => model.MatchPercentage)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

推荐答案

脚本"一词由于某种原因经常与浏览器混淆，我也遇到了同样的问题.所以我打F12来看看是否正在调用特定的js.如果有

The Word "Scripts" often messed around with browser for some reason i had the same issue.so i hit F12 to actually see if the particular js is being called. if there is

〜Script/example.js ---> 404 html错误代码，则表示JavaScript不在浏览器中呈现.

~Script/example.js ---> 404 html error code then it means the javascript is not being rendered in the browser.

这就是我为解决这个问题所做的事情

so this is what I did to get around with this problem

**************************解决方案*************

将Scripts文件夹重命名为Js
Virtaul Jquery Bundle中的路径名"Sender"必须不与实际文件名"Sender.Js"匹配，因为这样做会使编译器困惑以呈现javascript.

Rename Scripts folder to Js
Virtaul Path name "Sender" in Jquery Bundle must NOT match the actual File name "Sender.Js" as doing so will make compiler confused to render the javascript.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Js/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Js/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/Senderval").Include(
                        "~/Js/Sender.js"));

所有脚本都必须在Jquery Bundle之后放在head标记内.

All you scripts must be inside head tag after Jquery Bundle to be renders fist..

< ---头--->

<--- head--->

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   @Scripts.Render("~/bundles/Senderval")

< ----/head ----->

<----/head----->

这篇关于自定义JQuery捆绑包，MVC5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！