在局部视图MVC中使用jquery / js

Question

我有一个局部视图，可以使用@Ajax.BeginForm调用，然后将其放入原始视图内的div 。

好吧，问题是我确实需要在局部视图中使用某些jquery库，而它们根本无法使用。 我尝试使用所有脚本/ css链接创建一个新的局部视图，并尝试使用@Html.Partial("_ScriptLinkView") ，但这没有用。

搜索了一些答案，找到了一些我尝试过的方法，但是仍然没有用。 有人知道该怎么做吗？

_Layoutview：

<!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>

我的主要观点：

@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>

我的偏见：

<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>

我的局部视图中的最后一个表单（项目列表）来自http://www.xsanisty.com/project/calx/ 。 那就是我想在我的局部视图中使用的库。 如果我在主视图中发布相同的示例，则效果很好。 但是在我的Partialview中却没有。

Answer 1

我对w / calx不熟悉，但我猜想是在加载文档时，jquery-calx-1.1.9.js中会运行一些初始化，因此可能需要将其移至脚本标签处。正文的结尾...因此@Ufuk关于脚本部分的问题，在所有dom都存在之后，该页面允许页面将脚本注入到文档正文的末尾...

        @RenderSection("scripts", false)
</body>
</html>

您可以将脚本引用放在此处以进行验证：

<script src="../../Scripts/jquery-calx-1.1.9.js" type="text/javascript"></script>
    </body>
    </html>

在局部视图MVC中使用jquery / js

问题描述

1 个解决方案

解决方案1
0 2014-03-13 15:25:50

在局部视图MVC中使用jquery / js

问题描述

1 个解决方案

解决方案1 0 2014-03-13 15:25:50

解决方案1
0 2014-03-13 15:25:50