在局部視圖中使用jquery/js MVC

我有一個局部視圖，我打電話給@Ajax.BeginForm，然後將它放在原始視圖內的div中。在局部視圖中使用jquery/js MVC

嗯，問題是，我有一些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>

而且我partialview：

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

最後一種形式（ITEMLIST）在我partialview取從http://www.xsanisty.com/project/calx/。那是我想在我的偏見中使用的圖書館。如果我在我的主視圖中發佈相同的示例，它可以很好地工作。但在我的部分視圖中卻沒有。

來源

2014-03-13 MrProgram

您是否嘗試將腳本引用放入主Vi新聞，以便它們可用於部分？ – JeffSahol

是的，我試過了，沒有工作枯萎。 – MrProgram

你的佈局中是否有腳本部分？ –

我不熟悉瓦特/ 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>

來源

2014-03-13 15:25:50 JeffSahol

在局部視圖中使用jquery/js MVC

回答

相關問題