jquery Chosen plugin in Asp.net MVC 4 does not show in the view

问题

Trying to use chosen plugin for MultiSelectList, but I am having a problem even showing the plugin in my view. Can you guys figure it out why?

View:

@model test.Models.Employee
....
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/chosen.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(document).ready(function () {
        $('.chzn-select').chosen();
    });
</script>

@using (Html.BeginForm())
{
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)

    @Html.LabelFor(model => model.Services) 
    @Html.ListBoxFor(model => model.Services, ViewBag.serviceList as MultiSelectList, 
        new { @class = "chzn-select", id="service", data_placeholder = "Choose  Services..." })
    @Html.ValidationMessageFor(model => model.Services)

    <input type="submit" value="Create" class="btn btn-default" />
}

<script>
    $(".chzn-select").chosen();
</script>

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

And if I want to properly bind data from services field when the user submits the form, and save it into MYSQL table, do I need to fix my model for public string Services { get; set; } to public IEnumerable>string> Services { get; set; }? When I used the IEnumerable one, and migrated it, I don't see the column for Services which worries me about saving services data.

Model:

public class Employee
{
    [Key]
    public string EmpId { get; set; }
    public string Name { get; set; }
    public string Services { get; set; }
}

回答1:

Figured it out myself. Checked my network tab and found that some of the files were not loaded. You need to replace some codes to proper section like below.

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")      
    <script src="@Url.Content("~/Scripts/chosen.jquery.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/chosen.min.css")" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function () {
            $('.chzn-select').chosen();
        });
    </script> 
}

来源：https://stackoverflow.com/questions/37769761/jquery-chosen-plugin-in-asp-net-mvc-4-does-not-show-in-the-view

标签

asp.net-mvc-4

jquery-chosen