Currently, I am in the process of developing an application using C# ASP.NET MVC 5 with Bootstrap and jQuery. My familiarity with JavaScript is limited at this time.
1. Initially, my question was how to modify the JavaScript to restrict input to a specific number of coordinates ('Quantity'). However, I have since found a solution and updated the code accordingly.
- I am now wondering how I can send the 'list' data to the Controller when the user clicks 'Submit'. I assume that the corresponding Model will need to include a List of x & y values to which I would bind the list?
Thank you!
Controller
[HttpGet]
public ActionResult Index() {
var plate = new Plate() {
Holes = new Holes() {
Coordinates = new List<Tuple<double, double>>()
},
};
return View(plate);
}
[HttpPost]
public ActionResult Index(Plate plate) {
try {
// access plate.Holes.Coordinates
DrawingGenerator drawingGenerator = new DrawingGenerator(plate);
string outputFileName = drawingGenerator.GenerateDrawing();
ViewBag.fileName = outputFileName;
return View("../Download/Success");
} catch (Exception) {
return View("ErrorPage");
throw;
}
}
cshtml file
<div class="tab-pane fade" id="tab2">
<div class="form-inline col-md-5">
@Html.TextBox("Quantity", null, new { @class = "form-control" })
@Html.TextBox("X", null, new { @class = "form-control" })
@Html.TextBox("Y", null, new { @class = "form-control" })
<input type="button" id="Add" class="button1" value="Add" />
</div>
<ul id="list"></ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
// list container
var listContainer = $('#list');
var count = 0;
$("#Add").click(function () {
// get x & y from tb
var qty = $("#Quantity").val();
if (count == qty)
{
alert("can't add more! update quantity");
return;
}
var x = $("#X").val();
var y = $("#Y").val();
// add new list item
listContainer.prepend('<li> (' + x + ', ' + y + ') </li>');
count = count + 1;
// clear value input
$('#X').val('');
$('#Y').val('');
});
});