CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3header
iHelios
iHelios

Reputation: 51

MVC 3 jquery renderbody <=> Header(_layout)

So this is my issue: I have in my MVC 3 project my layout with all my js script included:

<link runat="server" rel="shortcut icon" href="@Url.Content("~/Content/favicone/favicon.ico")" type="image/x-icon"/>
<link runat="server" rel="icon" href="@Url.Content("~/Content/favicone/favicon.ico")" type="image/ico"/>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jcarousel.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.dimension.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.culture." + CurriculumVitae.Helpers.CultureHelper.GetCurrentCulture() + ".js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.17.custom.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    function mycarousel_initCallback(carousel) {....}</script>

But only my default View can used these scripts, when I go in another view(in renderbody) and I need to use some jquery I need to RE-IMPLEMENT the script to make it work:

@{ViewBag.Title = "Index";}
@section header{
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.17.custom.min.js")" type="text/javascript"></script>
    <script>
        $.fx.speeds._default = 1000;
        $(function () {
            $("#dialog").dialog({
                autoOpen: true,
                show: "blind",
                hide: "explode"
            });
            $("#opener").click(function () {
                $("#dialog").dialog("open");
                return false;
            });
        });
 </script>
}

<a id="opener" href="javascript:void();">test </a>
<div id="dialog" title="Basic modal dialog">
    <p>terst nmsdfnms dfds fsd f JQUERYYYYYYYYYYYYYY</p>
</div>

And this is just the beginning ... I have other issue with my Theme/Culture..

The thing is in the source code of my web page, I found all the scripts from the _layout (and the "view") but without the @section header, even a simple js call would not work if it has to used a script from my header(_layout)

thank you

Upvotes: 4

Views: 891

Answers (2)

iHelios
iHelios

Reputation: 51

I found my problem:

  1. Never re-implement or overide jquery-1.7.1.min.js within the same web page as it will create a conflict between each jquery call.

  2. One of my scripts using (jcarousel.js) was not correctly setup (the initCallback param).

Thank you everyone ;)

Upvotes: 1

Jesse
Jesse

Reputation: 8393

As you are not specifying a layout in your view there are two things you could try.

Ensure that your "default" layout is properly configured within "~Views/_ViewStart.cshtml":

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

Of you could explicitly set the desired layout your view:

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

Upvotes: 0

Related Questions