我一直在寻找如何在vb.net项目的内容页面上使用jautocalc.js的stackoverflow。
在常规的aspx页面上可以正常工作，但是一旦我引用了母版页并实现了内容控件，表单就不再自动计算。
我正在使用sql server 2008和vs9。
下面是我的aspx内容页面
<%@ Page Title="Consultation" Language="VB" MasterPageFile="Site.Master" AutoEventWireup="true" CodeFile="Test.aspx.vb" Inherits="Test" %>
<asp:Content ID="Header" ContentPlaceHolderID="Header" runat="server">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/dist/jautocalc.js")%>"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart].ClientID').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items].ClientID').jAutoCalc({ keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true });
$('form[name=cart].ClientID').jAutoCalc({ decimalPlaces: 2 });
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
//-->
</script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
<h1>jQuery AutoCalc: Do Calculations On Fields Example</h1>
<form name="cart">
<table name="cart" class="table table-striped table-bordered">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove" class="btn btn-
danger">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value=""
jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove" class="btn btn-
danger">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value=""
jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove" class="btn btn-
danger">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value=""
jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value=""
jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value=""
jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value=""
jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add" class="btn btn-
primary">Add Row</button></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</asp:Content>
下面是我的母版页内容
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %>New Page with Form</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" style="width:10px; height:10px;" href="images/jkhfavicon.gif" type="image/gif" >
<script type="text/javascript" src="~/Scripts/jscripts/tabcontent.js">
</script>
<script type="text/javascript" src="
<%=ResolveUrl("~/dist/jautocalc.js")%>"></script>
<link rel="stylesheet" href="tabcontent.css" type="text/css" />
<script type="text/javascript">
$(function () {
$("#content").content({ active: 5, collapsible: true });
});
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see
http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
<asp:ScriptReference Name="jAutoCalc.js" Assembly="System.Web" Path="~/Scripts/jscripts/jautocalc.js" />
</Scripts>
</asp:ScriptManager>
注意：请注意，在Visual Studio中，jAutoCalc用绿色下划线
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} *
{price}"></td>
鼠标悬停时出现以下警告
Validation (XHTML 1.0 Transitional): Attribute 'jAutoCalc' is not
a valid attribute of element input
任何指向解决方案的指针或发现者都将得到高度评价和尊重。