Hi
I got a list of data and each data got one modal popup button which record the average value that user insert.
After save in modal popup, the average should display in the textbox next to popup modal.
my issue is how to make each average belongs to its data? like data A will display the average A
model
public class dataModel
{
//got some other data
public List<MoldingModel> MoldingList { get; set; }
}
public class MoldingModel
{
public string data{ get; set; }
public decimal average{ get; set; }
public decimal reading1{ get; set; }
public decimal reading2{ get; set; }
public decimal reading3{ get; set; }
public decimal reading4{ get; set; }
public decimal reading5{ get; set; }
public decimal reading6{ get; set; }
}
View
<table>
<tr>
<td>Data</td>
<td>Average</td>
</tr>
@for(int i = 0; i < Model.MoldingList.Count; i++)
{
<tr>
<td style="text-align:center">@Model.MoldingList[i].data</td>
<td style="vertical-align:middle; width:10%; padding-right: 5px; padding-left:5px">
@Html.TextBoxFor(m => m.MoldingList[i].average, new { @class = "form-control", @id = "txtAverage", @style = "height: 30px" })
@Html.ValidationMessageFor(m => m.MoldingList[i].average, "", new { @class = "red", @style = "color:red" })
<button type="button" class="btn btn-info" data-toggle="modal" data-id="@Model.MoldingList[i].data" data-target="#MachineResult" style="margin: 0; margin-left:1rem;">....</button>
</td>
</tr>
}
</table>
//modal popup
<div class="modal" id="MachineResult">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
@*@using (Html.BeginForm("MoldReading", "Entry"))
{*@
<div class="modal-body">
<table class="table table-striped" id="example">
<tr>
<td style="width: 200px">
@Html.Label("*", new { style = "color:red" })
@Html.Label("Reading#1")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.Reading1, new { @class = "form-control", @id = "Reading1", @style = "height: 30px", @onkeyup = "getAverageMold()" })
@Html.ValidationMessageFor(a => a.Reading1, "", new { @class = "red", @style = "color:red" })
</div>
</td>
<td style="width: 200px">
@Html.Label("Reading#4")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.Reading4, new { @class = "form-control", @id = "Reading4", @style = "height: 30px", @onkeyup = "getAverageMold()" })
@Html.ValidationMessageFor(a => a.Reading4, "", new { @class = "red", @style = "color:red" })
</div>
</td>
</tr>
<tr>
<td style="width: 200px">
@Html.Label("Reading#2")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.Reading2, new { @class = "form-control", @id = "Reading2", @style = "height: 30px", @onkeyup = "getAverageMold()" })
@Html.ValidationMessageFor(a => a.Reading2, "", new { @class = "red", @style = "color:red" })
</div>
</td>
<td style="width: 200px">
@Html.Label("Reading#5")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.Reading5, new { @class = "form-control", @id = "Reading5", @style = "height: 30px", @onkeyup = "getAverageMold()" })
@Html.ValidationMessageFor(a => a.Reading5, "", new { @class = "red", @style = "color:red" })
</div>
</td>
</tr>
<tr>
<td style="width: 200px">
@Html.Label("Reading#3")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.Reading3, new { @class = "form-control", @id = "Reading3", @style = "height: 30px", @onkeyup = "getAverageMold()" })
@Html.ValidationMessageFor(a => a.Reading3, "", new { @class = "red", @style = "color:red" })
</div>
</td>
<td style="width: 200px">
@Html.Label("Reading#6")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.Reading6, new { @class = "form-control", @id = "Reading6", @style = "height: 30px", @onkeyup = "getAverageMold()" })
@Html.ValidationMessageFor(a => a.Reading5, "", new { @class = "red", @style = "color:red" })
</div>
</td>
</tr>
<tr>
<td style="width: 200px">
@Html.Label("Average")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:40%">
@Html.TextBoxFor(a => a.averageMold, new { @class = "form-control", @id = "AverageMold", @style = "height: 30px" })
@Html.ValidationMessageFor(a => a.averageMold, "", new { @class = "red", @style = "color:red" })
</div>
</td>
</tr>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal" id="confirm">Confirm</button>
<input id="Reset" type="reset" name="ActionType" value="Reset" class="btn btn-primary" />
<button type="button" class="btn btn-primary" data-dismiss="modal">Exit</button>
</div>
@*}*@
</div>
</div>
</div>
///javascript
function getAverageMold() {
var r1 = document.getElementById("Reading1").value;
var r2 = document.getElementById("Reading2").value;
var r3 = document.getElementById("Reading3").value;
var r4 = document.getElementById("Reading4").value;
var r5 = document.getElementById("Reading5").value;
var r6 = document.getElementById("Reading6").value;
var avgval =0;
var chk = 0;
if (r1 != '') { chk += 1; avgval = avgval + parseFloat(r1) }
if (r2 != '') { chk += 1; avgval = avgval + parseFloat(r2) }
if (r3 != '') { chk += 1; avgval = avgval + parseFloat(r3) }
if (r4 != '') { chk += 1; avgval = avgval + parseFloat(r4) }
if (r5 != '') { chk += 1; avgval = avgval + parseFloat(r5) }
if (r6 != '') { chk += 1; avgval = avgval + parseFloat(r6) }
if (avgval != 0) { avgval = avgval / parseFloat(chk); }
document.getElementById('AverageMold').value = avgval.toFixed(2);
}
<script>
$('#MachineResult').on('show.bs.modal', function (event) {
var myVal = $(event.relatedTarget).data('id');
$(this).find(".modal-title").text(myVal);
console.log(myVal);
});
</script>
