Adding J query and bootstrap in MVC4

Question

I am adding template in MVC4 basic application and the problem is the when I converted my template into MVC4 my slide show ,slider and some other things stopped working.

BundleConfig.cs:

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

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

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

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/js/bootstrap.min.js"));

bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/css/bootstrap.css"));

_Layout.cshtml:

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
       @Styles.Render("~/Content/css")
       @Scripts.Render("~/bundles/modernizr")
       @Styles.Render("~/Content/bootstrap")
       @Scripts.Render("~/bundles/jquery")
       @Scripts.Render("~/bundles/jqueryui")
    </head>
    <body>
       @RenderBody()
           @Scripts.Render("~/bundles/jquery")
           @Scripts.Render("~/bundles/bootstrap")
           @RenderSection("scripts", required: false)
    </body>
    </html>

kindly help i am new to MVC folder structure for j query and js files are as follow

content->css->

          bootstrap.min.css
          templatemo_style.css
          camera.css

scripts->js->

          bootstrap.min.js
          jquery-ui.min.js
          jquery.min.js
          jquery.singlenav.min.js
          unslider.min.js

kindly help and guide me for further studing

I don't know much about mvc but I don't think you've made slider bundles and i cant see you calling them in your page. maybe this will help : bundles.Add(new ScriptBundle("~/bundles/unslider").Include( "~/Scripts/js/unslider.min.js")); and add this to your page @Scripts.Render("~/bundles/unslider") . Also, im not sure if this will automatically fix priorities but you gotta have jquery first then jquery ui and then bootstrap and then the rest of your libraries — Amin Gharavi
– Amin Gharavi, Commented May 20, 2016 at 3:08

Denys Wessels · Accepted Answer · 2016-05-20 05:04:15Z

First make sure you add all the required .js files to the BundleCollection here's an example of how I added slider.js and another file called common.jsto the bundles in one of my projects:
```
    bundles.Add(new ScriptBundle("~/bundles/serverManagerBundle").Include(
        "~/Scripts/jquery-1.10.2.js",
        "slider.js",
        "~/Scripts/Common/common.js"));
```
In _Layout.cshtml render your bundles in the <head> section only.If you're using a slider library chances are it needs jQuery to work so in your bundle make sure jQuery is added before the slider.js

Remember that you need to register your bundles in the Application_Start event of the Global.asax file:

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

Collectives™ on Stack Overflow

Adding J query and bootstrap in MVC4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related