为什么jQuery插件(标签输入)不起作用?

时间:2017-11-12 12:48:27

标签: jquery asp.net-mvc

我有一个带有一些文本框的ASP.NET MVC表单。我想添加jQuery插件来创建标签。我将它添加到我的项目中,并使用我的jQuery选择器选择了其中一个文本框(“关键字”)。

我使用了这个插件的一个功能(“tagsinput”)。

正如您所猜测的,我想在用户按回车键时创建标签。

我发现jQuery文件已经完美添加,但为什么这个插件不起作用?

这是我的表格:

@model MvcInternetShopp.ViewModels.Admin.ProductVm

@{
     ViewBag.Title = "AddProduct";
}

<h2>AddProduct</h2>

<div class="block grid12">
    <div class="breadcrumb">
        <a href="index-2.html">صفحه اصلی</a><span>›</span><a 
href="#">افزودن گروه</a>
    </div>
</div>
<div class="full9">
    <div class="block grid9">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

           <h1 class="block-header">افزودن گروه</h1>
           <div class="separator"></div>

           <div class="block-standard">
                <div class="form inline">
                    <fieldset>
                        <legend>Product</legend>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Name, new 
{ @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
model.product.Name, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
model.product.Name)
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.GroupId, 
new { @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
    model.product.GroupId, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
model.product.GroupId)
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => 
model.product.Description, new { @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
model.product.Description, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
model.product.Description)
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Keyword, 
new { @class = "label" })
                            <div class="controls">
                                <div id="t">
                                    @Html.TextBoxFor(model => 
model.product.Keyword, new { @class = "text",id="Keyword" })
                                    @*<input type="text" name="tags" 
placeholder="Tags" class="tm-input" />*@
                                </div>
                               </div>
                            </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Like, new 
{ @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
 model.product.Like, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
   model.product.Like)
                              </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.DisLike, 
new { @class = "label" })
                        <div class="controls">
                                @Html.TextBoxFor(model => 
model.product.DisLike, new { @class = "text" })
                                 @Html.ValidationMessageFor(model => 
model.product.DisLike)
                            </div>
                         </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.URL, new { 
@class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => model.product.URL, 
   new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
    model.product.URL)
                            </div>
                        </div>

                        <div class="group">
                             @Html.LabelFor(model => model.product.Enable, 
new { @class = "label" })
                            <div class="controls">

                                @Html.CheckBoxFor(model => 
model.product.Enable, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
model.product.Enable)
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Mojood, 
new { @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
model.product.Mojood, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
model.product.Mojood)
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Tags, new 
{ @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
model.product.Tags, new { @class = "text" })
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Image, new 
{ @class = "label" })
                            <div class="controls">
                                @Html.TextBoxFor(model => 
model.product.Image, new { @class = "text" })
                                @Html.ValidationMessageFor(model => 
model.product.Image)
                            </div>
                        </div>
                        <div class="group">
                           @Html.LabelFor(model => model.product.Summery, 
new { @class = "label" })
                            <div class="controls">

                                @Html.TextAreaFor(model => 
model.product.Summery, new { @class = "text", id = "txtSum" })
                                @Html.ValidationMessageFor(model => 
model.product.Summery) 
                            </div>
                        </div>
                        <div class="group">
                            @Html.LabelFor(model => model.product.Price, new 
{ @class = "label" })
                            <div class="controls">

                               @Html.TextBoxFor(model => 
model.product.Price, new { @class = "text", id = "txtPrice" })
                                @Html.ValidationMessageFor(model => 
 model.product.Price)
                            </div>
                        </div>
                        <p>
                            <input type="submit" value="Create" />
                        </p>
                        <textarea id="e">jg</textarea>
                    </fieldset>
                </div>
            </div>
        }
    </div>
</div>

@section Styles{
<link href="~/Scripts/TagsInput/bootstrap-tagsinput.css" rel="stylesheet" />
<link href="~/Scripts/Powerful-Lightweight-jQuery-Tag-Management-Plugin-
tagEditor/jquery.tag-editor.css" rel="stylesheet" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>

    <script src="~/scripts/ckeditor/styles.js"></script>
    <script src="~/scripts/ckeditor/ckeditor.js"></script>
    <script src="~/Scripts/CkEditor/adapters/jquery.js"></script>
    <script src="~/scripts/autonumeric/jquery-price.js"></script>
    <script src="~/Scripts/TagsInput/bootstrap-tagsinput.min.js"></script>
    <script src="~/Scripts/bootstrap-tagsinput-latest/dist/bootstrap-
tagsinput.min.js"></script>
    <script>
    //
        CKEDITOR.replace('txtSum');
        $(function () {
            $("#Keyword").keypress(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                }
            }).tagsinput();
        });
    </script>
    }

请帮帮我

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。

我在我的布局中使用了bundle(“〜/ bundles / jquery”),我也在表单页面中使用了jQuery-3.2.1。

我删除了我的捆绑包并且它有效