Javascript 在部分视图MVC中使用jquery/js
我使用Javascript 在部分视图MVC中使用jquery/js,javascript,jquery,asp.net-mvc,partial-views,Javascript,Jquery,Asp.net Mvc,Partial Views,我使用@Ajax.BeginForm调用了一个局部视图,然后将其放入原始视图中的div 好吧,问题是我有一些jquery库,我真的需要在我的局部视图中使用,但它们根本不起作用。我尝试用所有脚本/css链接创建一个新的局部视图,并尝试了@Html.partial(“\u ScriptLinkView”),但没有成功 搜索了一些答案,找到了一些我尝试过的答案,但仍然不起作用。有人知道怎么做吗 _布局视图: <!DOCTYPE Html> <html> <head>
@Ajax.BeginForm
调用了一个局部视图,然后将其放入原始视图中的div
好吧,问题是我有一些jquery库,我真的需要在我的局部视图中使用,但它们根本不起作用。我尝试用所有脚本/css链接创建一个新的局部视图,并尝试了@Html.partial(“\u ScriptLinkView”)
,但没有成功
搜索了一些答案,找到了一些我尝试过的答案,但仍然不起作用。有人知道怎么做吗
_布局视图:
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<link href="../../Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../Content/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="../../Content/samples.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"> </script>
<script src="../../Scripts/script.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/date.js"></script>
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-calx-1.1.9.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="container">
<!-- Header -->
<div id="header">
<img id="calcfactorylogo" src="../../Images/CalcFactory.png" alt="Calcfactory logo" />
</div>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<div id="footer">
<img id="telloxlogo" src="../../Images/telloxlogo.png">
</div>
</div>
</body>
</html>
@渲染部分(“特色”,必填项:false)
@RenderBody()
@Scripts.Render(“~/bundles/jquery”)
@RenderSection(“脚本”,必需:false)
我的主要观点是:
@model CalcFactory.Models.Calculation
<!-- Container for whole page -->
<div id="container">
<!-- Menu nav -->
<div class="navbar-inner">
<div class="navbar">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li class="active">@Html.ActionLink("Create Calculation", "CreateCalculation", "Home")</li>
<li>@Html.ActionLink("Compare Calculation", "CompareCalculation", "Home")</li>
<li>@Html.ActionLink("Get Calculation", "GetCalculation", "Home")</li>
</ul>
</div>
</div>
<!-- Content -->
<div class="content">
<!-- Menu buttons for annuity and amortization -->
<div id="createCalcMenu">
@Ajax.ActionLink("Annuity", "Annuity", "Calculation", new AjaxOptions
{
UpdateTargetId = "calcDiv",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
})
<br />
@Ajax.ActionLink("Amortization", "Amortization", "Calculation", new AjaxOptions
{
UpdateTargetId = "calcDiv",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
})
</div>
<div id="calcDiv"></div>
@model CalcFactory.Models.Calculation
- @ActionLink(“主页”、“索引”、“主页”)
- @Html.ActionLink(“创建计算”、“创建计算”、“主页”)
- @ActionLink(“比较计算”、“比较计算”、“主页”)
- @ActionLink(“获取计算”、“获取计算”、“主页”)
@ActionLink(“年金”、“年金”、“计算”,新的AjaxOptions
{
UpdateTargetId=“calcDiv”,
InsertionMode=InsertionMode.Replace,
HttpMethod=“POST”
})
@ActionLink(“摊销”、“摊销”、“计算”,新的AjaxOptions
{
UpdateTargetId=“calcDiv”,
InsertionMode=InsertionMode.Replace,
HttpMethod=“POST”
})
我的观点是:
<div id="annuityCalc">
<legend id="legendWidth"><h1>Annuity calculation
<div class="row" id="saveAndPrintImage">
<a href="#" title="Save"><img src="../../Images/glyphicons_446_floppy_save.png" alt="save"></a>
<a href="#"><img title="Print" src="../../Images/glyphicons_015_print.png" alt="print"></a>
</div>
</h1>
</legend>
<!-- Contains forms and input for annuity calculation -->
<div class="calcInput" id="calcInput">
@using (Ajax.BeginForm("ShowDetail", "Calculation", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "anCalcDetail",
LoadingElementId = "Loader"
}))
{
//Form here
}
</div>
<form id="itemlist">
Item : <input type="text" id="A1" value="HDD Baracuda Black 2TB" /><br>
Price : <input type="text" id="B1" data-format="$ 0,0[.]00" /><br>
Qty : <input type="text" id="C1" data-format="0" /><br>
Disc. : <input type="text" id="D1" data-format="0[.]00 %" /><br>
Total : <input type="text" id="E1" data-formula="($B1*$C1)*(1-$D1)" /><br>
</form>
<script type="text/javascript">
$('#itemlist').calx();
</script>
<div class="calcGraph">
</div>
<div class="calcDetail" id="anCalcDetail">
</div>
</div>
年金计算
@使用(Ajax.BeginForm(“ShowDetail”,“Calculation”),新的AjaxOptions
{
InsertionMode=InsertionMode.Replace,
UpdateTargetId=“anCalcDetail”,
LoadingElementId=“Loader”
}))
{
//从这里开始
}
项目:
价格:
数量:
光盘:
总计:
$('#itemlist').calx();
我的partialview中的最后一个表单(itemlist)取自。这就是我想在我的局部视图中使用的库。如果我在我的主视图中发布相同的示例,那么效果会非常好。但在我的部分观点中,它不是。我不熟悉w/calx,但我猜测jquery-calx-1.1.9.js中有一些初始化,在加载文档时运行,因此可能需要将其移动到正文末尾的脚本标记处……因此@Ufuk提出了关于脚本部分的问题,它允许页面在所有dom都存在之后,将脚本注入到文档体的末尾
@RenderSection("scripts", false)
</body>
</html>
@RenderSection(“脚本”,false)
您可以将脚本ref放在那里以验证这一点:
<script src="../../Scripts/jquery-calx-1.1.9.js" type="text/javascript"></script>
</body>
</html>
您是否尝试过将脚本引用放在主视图中,以便部分视图可以使用它们?是的,我尝试过,但没有成功。您的布局中是否有脚本部分?是的,在my _layout.cshtml(类似于我的母版页或其他内容)中,我在标记内有脚本标记,用于显示主视图和部分视图的代码。