CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazor
user5731805
user5731805

Reputation:

Can't run any jQuery plugin inside my ASP.NET MVC application, what would be the cause?

These days I went through difficult times, I tried to implement a jQuery plugin called elevate zoom but couldn't succeed thought this might be the problem with jQuery plugin and switched to implement Cloud Zoom but had no luck yet. I placed all the scripts needed by this plugin into my view and also the CSS as you can see my view code:

@{
    ViewBag.Title = "Zoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



    <title>Cloud Zoom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Include jQuery. -->
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="~/Content/cloudzoom.css" />

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="~/Scripts/cloudzoom.js"></script>

    <!-- Call quick start function. -->
    <script type="text/javascript">
        $(function(){CloudZoom.quickStart();})
    </script>

    <!-- Setup the zoomImage property to point to the big image. -->
    <img class="cloudzoom" src="~/images/small/image1.jpg"
         data-cloudzoom="zoomImage: '~/images/large/image1.jpg'" />

Layout code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Final Generated HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">






    <title>Cloud Zoom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Include jQuery. -->
    <script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>

    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="/Content/cloudzoom.css" />

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="/Scripts/cloudzoom.js"></script>

    <!-- Call quick start function. -->
    <script type="text/javascript">
        $(function(){CloudZoom.quickStart();})
    </script>

    <!-- Setup the zoomImage property to point to the big image. -->
    <img class="cloudzoom" src="/images/small/image1.jpg"
         data-cloudzoom="zoomImage: '~/images/large/image1.jpg'" />





        <hr />
        <footer>
            <p>&copy; 2016 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"c6cb955b8169466e9a82c8082a334502"}
</script>
<script type="text/javascript" src="http://localhost:6214/1d36907a16cf4beea1f3582a362b6719/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Upvotes: 0

Views: 568

Answers (2)

Heemanshu Bhalla
Heemanshu Bhalla

Reputation: 3765

Solution :

_Layout.cshtml Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="~/Content/js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0px;padding:0;list-style-type:none;}
body{background:#E9F0F5;font-family:Arial, Helvetica, sans-serif;font-    size:13px;margin:0px;padding:0px;}
html{background-color:#E9F0F5;}
img{border:none;}
h3{font-family:Tahoma, Geneva, sans-serif;font-size:14px;color:#333;letter-    spacing:1px;margin-top:10px;margin-bottom:10px;}
p{margin-bottom:10px;margin-top:10px;line-height:22px;}
.demo{margin:0 auto;width:600px;}
.tickul li{line-height:24px;}
/* zoom-section */
.zoom-section{clear:both;margin-top:20px;}
*html .zoom-section{display:inline;clear:both;}
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
</style>

<link href="~/Content/css/cloud-zoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="~/Content/js/cloud-zoom.1.0.2.min.js"></script>
    <div class="demo">


                @RenderBody()
     </div>
</body>

Zoom.cshtml View Code

@{
    ViewBag.Title = "Zoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="zoom-section">        
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4"><img src="~/Content/images/smallimage.jpg" alt='' title="Optional title display" /></a></div>
    <div class="zoom-desc">
        <h3></h3>       
        <p><a href='~/Content/images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: '~/Content/images/smallimage.jpg' "><img class="zoom-tiny-image" src="~/Content/images/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='~/Content/images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' ~/Content/images/smallimage-1.jpg'"><img class="zoom-tiny-image" src="~/Content/images/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
        <a href='~/Content/images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: '~/Content/images/smallimage-2.jpg' "><img class="zoom-tiny-image" src="~/Content/images/tinyimage-2.jpg" alt = "Thumbnail 3"/></a></p>

</div>
</div><!--zoom-section end-->
  <div class="zoom-section">
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage03.jpg' class='cloud-zoom' rel="tint:'#ff0000',tintOpacity:0.5,smoothMove:5,zoomWidth:480,adjustY:-4,adjustX:10"><img src="~/Content/images/smallimage-3.jpg" title="Optional Title Text" alt='' /></a>
    </div>
    <div class="zoom-desc">


<div class="zoom-section">
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage04.jpg' class='cloud-zoom' rel="position:'inside',showTitle:false,adjustX:-4,adjustY:-4"><img src="~/Content/images/smallimage-4.jpg" title="Your caption here" alt=''/></a>
    </div>
    <div class="zoom-desc">

</div>
</div><!--zoom-section end-->

<div class="zoom-section">
    <div class="zoom-small-image">
        <a href='~/Content/images/bigimage01.jpg' class='cloud-zoom' title="Your caption here" rel="softFocus: true, position:'anypos', smoothMove:2"><img src="~/Content/images/smallimage-1.jpg" alt='' /></a>
    </div>
    <div class="zoom-desc" style="position:relative">
        <div id="anypos" style="position:absolute;top:-128px; left: 128px;width:356px;height:256px;"></div>

</div>
</div>

HomeController.cs Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Cloudzoom.Controllers
{
 public class HomeController : Controller
{

       public ActionResult Zoom()
    {
        return View();
    }




    }
}

CloudZoom Function is called in cloud-zoom.1.0.2.min.js File 

$(document).ready(function(){$('.cloud-zoom, .cloud-zoom-    gallery').CloudZoom()});

Upvotes: 0

Anton
Anton

Reputation: 2656

Well, at first look it occurs to me that you actually nested <html> inside of the <body> tag. That is simply wrong.

Also look at this part of your code:

data-cloudzoom="zoomImage: '~/images/large/image1.jpg'"

The image URL remains untranslated, the tilda charcter ~ stays in the final generated HTML which is wrong. It should be probably:

<img class="cloudzoom" src="@Url.Content("~/images/small/image1.jpg")"
         data-cloudzoom="zoomImage: '@Url.Content(~/images/large/image1.jpg")'" />

Layout should look like this: Please, notice the @RenderSection calls.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("stylesheets", required: false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

View should look like this: Please, notice the sections.

@{
    ViewBag.Title = "Zoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section stylesheets {
    <!-- Include Cloud Zoom CSS. -->
    <link rel="stylesheet" type="text/css" href="~/Content/cloudzoom.css" />
}

@section scripts {
    <!-- Include jQuery. -->
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

    <!-- Include Cloud Zoom script. -->
    <script type="text/javascript" src="~/Scripts/cloudzoom.js"></script>
}

<!-- Call quick start function. -->
<script type="text/javascript">
    CloudZoom.quickStart();
</script>

<!-- Setup the zoomImage property to point to the big image. -->
<img class="cloudzoom" src="@Url.Content("~/images/small/image1.jpg")"
         data-cloudzoom="zoomImage: '@Url.Content("~/images/large/image1.jpg")'" />

Upvotes: 1

Related Questions