Using Jquery UI Tab control in ASP.NET MVC
I am new to jquery and am trying out UI plugins. For some reaso开发者_Go百科n this following code does not work, in the sense, it does not render the tabs and it's just a bunch of text. But when I copy the page source and paste it in the html page, and put it in the views folder, everything looks great, so , I assume all the js paths are good. Any ideas?
<!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>
<title>Details</title>
<link href="../../Scripts/themes/base/ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../Scripts/ui/ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/ui/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Text 1</a></li>
<li><a href="#tabs-2">Text 2</a></li>
<li><a href="#tabs-3">Text 3</a></li>
</ul>
<div id="tabs-1">
<div>tab1 content - adsfadfadsf</div>
</div>
<div id="tabs-2">
<div>tab 2 content -adfadfadf </div>
</div>
<div id="tabs-3">
<div>tab 3 content -adfadfadfadf</div>
</div>
</div>
</div>
</body>
</html>
first of all always the "~/" notation for relative path, that will avoid you problem when deploying to a virtual folder. Also you could write a helper yourself to encapsulate this :
<script src="<%= Url.Content("~/Scripts/script.js") %>"></script>
You have very nice Helpers in MvcContrib such as
Html.Script("~/Script/js-debug.js", "~/Script/js-prod.js");
Same problem will arise with your css :
Html.Css("~/Content/style.css");
I'm using it in my latest project and I cant see a programming mistake there, so I suppose it's in the script path that you have an issue, effectively.
Also it's very easy to use Firebug and check what are the js error you get, if the scripts are all loaded, etc...
Finally, it's probably better to put all your js code at the end of your html page (just after the tag. that's not necessary, but helps loading the page faster as the script will be downloaded after the page is parsed by the browser.
I can't see anything wrong with your code other than the paths to these script files. In an ASP.NET MVC View it is a good practice to use html helpers when working with urls:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"></script>
So I assume all the js paths are good
Your assumptions is mostly wrong. If /Action is rendered and uses /Views/Action/Index.aspx view, action's relative paths are different than if you directly show /Views/Action/Index.html.
So use something like
<script src="<%= Url.Content("~/Content/js/jquery-1.2.3.min.js") %>" type="text/javascript"></script>
加载中,请稍侯......
精彩评论