我有一个由foreach循环填充的视图。表中的每一行都有一个下拉列表，我想使用该下拉列表的值来计算视图中同一行的另一个值。
我是Jquery的新手，已尝试过所有内容，但它只适用于表格的第一行。
任何建议都将受到赞赏。
查看代码
@model PagedList.IPagedList<VmShoppingCartCatalogue>
@using Mojito.Domain.ViewModels
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
@section Scripts {
<script>
$(document).ready(function () {
updatePrice();
});
function updatePrice() {
$('#TypeOfSubscription').each(function (e) {
$('#TypeOfSubscription').change(function () {
var subscriptionType = $('#TypeOfSubscription').val();
var name = $('#Name').val();
var price = $('#Price').val();
var totalUsers = $('#NoOfUsers').val();
$.ajax({
url: "@Url.Action("GetSubscriptionPrice", "ShoppingCartCatalogue", new {Area = "ECommerce"})",
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'text',
data: { 'subscriptionType': subscriptionType, 'name': name, 'price': price, 'totalUsers': totalUsers }
})
.success(function (result) {
$('#Price').val(result);
$('#price').text(result);
})
.error(function (xhr, textStatus, errorThrown) {
if (xhr.status == 500) {
alert('Internal error: ' + xhr.responseText);
} else {
alert('Unexpected error.');
};
});
});
});
}
</script>
}
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Mojito Products</h2>
<div class="col-md-9"></div>
<div class="col-md-3">
@using (Html.BeginForm("ShoppingCartCatalogue", "ShoppingCartCatalogue", FormMethod.Get))
{
<p>
@Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
</div>
<div class="container col-md-12">
<table class="table col-md-12">
<tr>
<th>
@Html.DisplayNameFor(model => model.FirstOrDefault().ImageData)
</th>
<th>
@Html.ActionLink("Category", "ShoppingCartCatalogue", new { sortOrder = ViewBag.SortByCategory, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
@Html.ActionLink("Product", "ShoppingCartCatalogue", new { sortOrder = ViewBag.SortByProduct, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
@Html.DisplayNameFor(model => model.FirstOrDefault().Description)
</th>
<th>
@Html.DisplayNameFor(model => model.FirstOrDefault().TypeOfSubscription)
</th>
<th>
@Html.ActionLink("Price per user", "ShoppingCartCatalogue", new { sortOrder = ViewBag.SortByPrice, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
@Html.DisplayNameFor(model => model.FirstOrDefault().NoOfUsers)
</th>
<th>
@Html.DisplayNameFor(model => model.FirstOrDefault().TotalPrice)
</th>
<th>
</th>
</tr>
@foreach (VmShoppingCartCatalogue t in Model)
{
using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post))
{
<tr>
<td>
@if (t.ImageData != null)
{
<div class="pull-left" style="margin-right: 10px">
<img class="img-thumbnail" width="60" height="75"
src="@Url.Action("GetImage", "ShoppingCartCatalogue",
new { t.MojitoProductId })" />
</div>
}
</td>
<td>
@Html.DisplayFor(modelItem => t.Category, new { Name = "Category", id = "Category" })
</td>
<td>
@Html.DisplayFor(modelItem => t.Name, new { Name = "Name", id = "Name" })
</td>
<td>
@Html.DisplayFor(modelItem => t.Description, new { Name = "Description", id = "Description" })
</td>
<td>
@Html.EnumDropDownListFor(modelItem => t.TypeOfSubscription, new { Name = "TypeOfSubscription", id = "TypeOfSubscription", align = "left" })
</td>
<td>
<div id="price">@Html.DisplayFor(modelItem => t.Price, new { Name = "Price", id = "Price" })</div>
</td>
<td>
@Html.TextBoxFor(modelItem => t.NoOfUsers, new { Name = "NoOfUsers", id = "NoOfUsers", type = "number", min = "1", width = "10" })
</td>
<td>
@Html.DisplayFor(modelItem => t.TotalPrice, new { Name = "TotalPrice", id = "TotalPrice" })
</td>
<td>
@if (Request.Url != null)
{
@Html.HiddenFor(modelItem => t.TypeOfSubscription, new { Name = "TypeOfSubscription", id = "TypeOfSubscription" })
@Html.HiddenFor(modelItem => t.NoOfUsers, new { Name = "NoOfUsers", id = "NoOfUsers" })
@Html.HiddenFor(modelItem => t.MojitoProductId, new { Name = "MojitoProductId", id = "MojitoProductId" })
@Html.HiddenFor(modelItem => t.Category, new { Name = "Category", id = "Category" })
@Html.HiddenFor(modelItem => t.Name, new { Name = "Name", id = "Name" })
@Html.HiddenFor(modelItem => t.Description, new { Name = "Description", id = "Description" })
@Html.HiddenFor(modelItem => t.Price, new { Name = "Price", id = "Price" })
@Html.HiddenFor(modelItem => t.TotalPrice, new { Name = "TotalPrice", id = "TotalPrice" })
@Html.Hidden("returnUrl", Request.Url.PathAndQuery)
<input type="submit" class="btn btn-success" value="Add to cart" />
}
</td>
</tr>
}
}
</table>
</div>
<div class="col-md-12">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
</div>
@Html.PagedListPager(Model, page => Url.Action("ShoppingCartCatalogue",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
答案 0 :(得分：1)
问题是您要为每行中的元素呈现重复的ID，因此var subscriptionType = $('#TypeOfSubscription').val();将获得带有id="TypeOfSubscription"的第一个元素的值（第一行中的元素）。
为TypeOfSubscription添加一个类名，然后使用相对选择器获取行中的关联元素。例如
$('.TypeOfSubscription').change(function () {
var columns = $(this).closest('tr').children('td');
var subscriptionType = $(this).val();
var price = columns.eq(8).find('input').eq(6).val(); // assume you want the hidden input value but again you have 2 duplicate ID's within the same row!
var totalUsers = columns.eq(6).find('input').val();
注意：无需使用@Html.HiddenFor(modelItem => t.TypeOfSubscription, new { Name = "TypeOfSubscription", id = "TypeOfSubscription" })设置id和name属性。这两个属性都基于属性名称（TypeOfSubscription），因此它们都是＆＃34; TypeOfSubscription＆＃34;无论如何，html帮助器都会忽略任何手动设置name属性的尝试。
注意2：除了因为重复的ID而无效的html，<form>元素不能是<table>的子元素