我是mvc的初学者,正在开发一个电子商务网站。 在我的购物车清单中,我需要输入特定数量来计算总页数,而不用页面刷新。 我在foreach语句中使用了一个java脚本调用,它就像我输入数量并单击" TotalPrice "字段价格将自动计算并显示。
但是,当我点击" TotalPrice "时,我需要使用新输入的数量和总价更新我的数据库。领域
我正在尝试ajax,但我不熟悉它
我的观点
<table class="table">
@{
int i = 0;
foreach (var item in lscart)
{
i = i + 1;
<tr>
<td>@Html.HiddenFor(modelItem => item.CProductID, new { htmlAttributes = new { @class = "form-control", @id = "pid" + @i } })</td>
<td>
@{
var base64 = Convert.ToBase64String(item.CImage);
var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
<img src='@imgSrc' style="width:100px; height:100px;" />
}
</td>
<td>@Html.DisplayFor(modelItem => item.CProductName)</td>
<td>Rs.</td>
<td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id = "cprice" + @i } })</td>
<td>
<div class="col-md-6">
@Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id = "qt" + @i } })
</div>
</td>
<td>
<div>
@Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total" + @i, @onclick = "edValueKeyPress(" + @i + ")", @onkeyup = "edValueKeyPress(" + @i + ")" } })
</div>
</td>
<td><a href="#"><i class="fa fa-close"></i></a></td>
</tr>
}
}
</table>
我的javascript总计价格计算没有页面刷新
<script>
function edValueKeyPress(i) {
//alert(i);
var edValue = document.getElementById("qt" + i);
var edValue1 = document.getElementById("cprice" + i);
var s = edValue.value * edValue1.value;
var t = document.getElementById("total" + i);
t.value = s;
}
</script>
我的ajax代码(这个没有完成,我不知道在我看来在哪里调用这个ajax函数)
<script type="text/javascript">
$(document).ready(function () {
alert('ready');
var quantity = document.getElementById("qt" + i);
var proid = document.getElementById("pid" + i);
var price = document.getElementById("cprice" + i);
$.ajax({
url: '/Products/Cartup',
type: "GET",
data: { quantity: quantity, proid: proid, price: price },
dataType: "JSON",
success: function (rslt) {
},
error: function (rslt) {
}
});
})
</script>
我的控制器动作方法
public ActionResult Cartup(int quantity, int proid,float price)
{
var Cert = (from cert in db.TBL_Cart where cert.CProductID == proid select cert).FirstOrDefault();
if (Cert != null)
{
int priceint= Convert.ToInt32(price);
Cert.Cquantity = quantity;
Cert.CTotalPrice = quantity * priceint;
db.Entry(Cert).State = EntityState.Modified;
db.SaveChanges();
}
return View();
}
我的数据库表设计
https://i.stack.imgur.com/mh9F7.png
我的完整源代码与db
https://www.dropbox.com/s/4iegq4kpsoqoue1/backup%20of%20indianhub.zip?dl=0
控制器:ProductsController, 视图:cartlist
答案 0 :(得分:1)
不是添加id
,而是为每个td
添加一个唯一的类。例如:
@Html.EditorFor(modelItem => item.Cquantity,
new { htmlAttributes = new { @class = "quantity form-control", @placeholder = "Qty" } })
然后,您可以将change
处理程序附加到quantity
输入。
$(document).ready(function () {
$(".quantity").change(function () {
var $tr = $(this).closest("tr"); // get the tr for that row
var productId = $tr.find('.productID').val(); // get the productID for that row
var price = $tr.find('.price').val();
$.ajax({
url: '/Products/Cartup',
type: "GET",
data: { quantity: $(this).val(), proid: productId , price: price },
dataType: "JSON",
success: function (data) { alert("success"); },
error: function (err) { }
});
});
});
需要考虑的一些事项:
CTotalPrice
是readonly
。您无需将任何键事件附加到该输入。 HiddenFor
元素赋予td
。您可以将其移至价格td
db.TBL_Cart where cert.CProductID == proid
:您不应该通过CartId
获取购物车吗?我不知道你的数据库结构,但看起来你正在购买第一款具有特定产品的推车?不一定是您要更新的购物车。cartId
,productId
和quantity
发布到服务器。在控制器中按productId
获取产品价格。使用总价更新购物车表(我希望你这是一个学习的个人项目。因为否则会有很多设计缺陷,你的客户会免费购买所有东西并让你破产:D)
答案 1 :(得分:0)
因此,根据您的问题,您希望向服务器端代码发送基于AJAX的请求以更新数据库,正如我在您的ajax代码中看到的那样,您正在Jquery中执行AJAX请求。
我不了解Jquery,但请按照我的简单示例获取基于AJAX的请求。
<body>
<input type="text" name="quantity" id="totalQuant">
<input type="text" name="total Amount" id="totalAmt">
<input type="button" value="TotalPrice" onclick="sendData()">
</body>
<script>
var req;
// initialize request object
function initReq(){
if(window.XMLHttpRequest){
req= new XMLHttpRequest;
}
else if(window.ActiveXObject){
req= new ActiveXObject("Microsoft.XMLHTTP);
}
}
//sendData() function defifnation
function sendData(){
initReq();
var amt= document.getElementById("totalAmt").value;
var qty= document.getElementById("totalQuant").value;
//creat your url // use escape() if you want encode that field
var url= "yourURL.abc?totalAmt="+escape(amt)+"&totalQuant="+escape(qty);
req.open("GET",url);
// ignore this if you are not sending any response for this request from server
req.onreadystatechange= processResponse;
req.send();
// example with "POST" type request
var url= "yourURL.abc"
req.open("POST",url);
// add this header if you want encode your fields
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send("totalAmt="+amt+"&totalQuant="+qty);
}
</script>
答案 2 :(得分:0)
我只是合并了两个脚本,如
<script type="text/javascript">
function edValueKeyPress(i) {
//debugger;
//alert(i);
var edValue = document.getElementById("qt" + i);
var edValue1 = document.getElementById("cprice" + i);
var s = edValue.value * edValue1.value;
var t = document.getElementById("total" + i);
t.value = s;
var quantity = document.getElementById("qt" + i).value; //alert("quantity" + quantity);
var proid = document.getElementById("pid" + i).value; //alert(proid);
var price = document.getElementById("cprice" + i).value; //alert(price);
//debugger;
$.ajax({
async: false,
cache: false,
url: '/Products/Cartup',
type: "GET",
data: { quantity: quantity, proid: proid, price: price },
dataType: "JSON",
success: function (data) { alert("success"); },
error: function (err) { }
});
}
</script>
我只是改变视图中的一些代码
@{
int i = 0;
foreach (var item in lscart)
{
i = i + 1;
<tr>
<td>@Html.TextBoxFor(modelItem => item.CProductID, new { @style = "display: none", @id = "pid" + @i })</td>
<td>
...................rest of the code is same as in the question