如何在mvc中使用数据库中的jquery,点击表中的复选框,用数据填充文本框
本文关键字:复选框 数据 文本 填充 jquery mvc 数据库 | 更新日期: 2023-09-27 17:57:53
我有这样的情况,在一个表中,我有多个复选框,而如果它的复选框数据将从数据库中提取并填充相应的文本框。。。我可以获得数据,但无法填写文本框,请在这个中帮助我
我做了什么:
在我看来:
<script type="text/javascript">
$(document).ready(function () {
$('input:checkbox[name=adicheck]:checked').each(function () {
var empCode = $('#hdnEmp').val();
var chckid = $(this).val();
debugger;
$.get('/Employee/GetSalary',
{
empCode: empCode, ID: chckid
},
function (data,status) {
var $row = $(this).closest("tr");
$row.find('.textfield2').val(data.Monthly);
$row.find('.textfield3').val(data.Annualy);
});
});
});
@using KerelaGold.Models;
@{
kerelagoldloanEntities db = new kerelagoldloanEntities();
var empsalary = Convert.ToString(Session["empsalary"]);
var emps = db.SetSalaries.Where(e => e.EmployeeId == empsalary).FirstOrDefault();
List<SetSalaryDetail> emp = new List<SetSalaryDetail>();
if (emps != null)
{
var empsd = db.SetSalaryDetails.Where(e => e.SetSalaryId == emps.SetSalaryId).ToList();
emp = empsd;
}
var empsalaryd = emp.Select(e => e.PayName).ToArray();
var i = 0;
<div class="table-section">
<table id="tbl" width="100%" border="0" cellspacing="0" cellpadding="0" class="table-style">
<thead>
<tr>
<th>
<input type="checkbox" id="chkAll" class="SelectAll" /><label> All</label>
</th>
<th>
Name
</th>
<th>
Monthly
</th>
<th>
Annualy
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr id='@i++'>
<td>
@if (emp.Count > 0)
{
if (empsalaryd.Contains(item.Name))
{
<input type="checkbox" class="checkedItem" checked="checked" name="adicheck" value="@item.SalaryComponentId" />
<input type="hidden" id="@String.Concat("B", item.SalaryComponentId)" value="@item.SalaryComponentId" />
}
else
{
<input type="checkbox" class="checkedItem" name="adicheck" value="@item.SalaryComponentId" />
<input type="hidden" id="@String.Concat("B", item.SalaryComponentId)" value="@item.SalaryComponentId" />
}
}
else
{
<input type="checkbox" class="checkedItem" name="adicheck" value="@item.SalaryComponentId" />
<input type="hidden" id="@String.Concat("B", item.SalaryComponentId)" value="@item.SalaryComponentId" />
}
</td>
<td>
@Html.DisplayFor(modelItem => item.Name, new { @class = "textfield" })
</td>
<td>
@Html.TextBoxFor(modelItem => item.Monthly, new { @class = "textfield2", @readonly = "readonly", @onkeypress = "return isDecimalNumber(event);" })
</td>
<td>
@Html.TextBoxFor(modelItem => item.Annualy, new { @class = "textfield3", @readonly = "readonly", @onkeypress = "return isDecimalNumber(event);" })
</td>
</tr>
}
</tbody>
</table>
</div>
}@*
在我的控制器中:
public JsonResult GetSalary(string empCode, int ID)
{
var salID = db.SetSalaries.Where(s => s.EmployeeId == empCode).Select(s => s.SetSalaryId).FirstOrDefault();
var salDet = db.SetSalaryDetails.Where(s => s.SetSalaryId == salID && s.SalaryCompID == ID).Select(s => new { s.Monthly,s.Annualy }).FirstOrDefault();
return Json(salDet, JsonRequestBehavior.AllowGet);
}
所以情况是这样的,我也上传了一张图片来显示的问题
![i need different values in monthly and annualy with chechked][1]
请帮我处理这个
$(函数(){$(document).ready(function(){
$('input:checkbox[name=adicheck]:checked').each(function () {
var empCode = $('#hdnEmp').val();
var chckid = $(this).val();
$.ajax({
url: "/Employee/GetSalary",
data: "{}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
//debugger;
response($.map(data.d, function (item) {
return {
value: item.Monthly
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
});
});
}
希望这会有所帮助。
这里我所做的,只更改了jquery部分。。
$(document).ready(function () {
$(".checkedItem").each(function () {
if ($(this).is(":checked")) {
var empCode = $('#hdnEmp').val();
var chckid = $(this).val();
var $row = $(this).closest("tr");
$.get('/Employee/GetSalary',
{
empCode: empCode, ID: chckid
},
function (data, status) {
$row.find('.textfield2').val(data.Monthly);
$row.find('.textfield3').val(data.Annualy);
});
}
});
});