我正在使用 Bootstrap 和 jquery 使用 C# ASP.NET MVC 5 开发一个应用程序。我对 Javascript 很陌生。
<罢工>1。如何更改 javascript 以仅允许“数量”坐标? (找到方法并更新代码)
- 如何将“提交”上的“列表”发布到 Controller ?我猜相应的模型将有一个 x 和 y 列表,我将列表绑定(bind)到该列表?
谢谢!
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 文件
<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('');
});
});
最佳答案
在按钮单击事件中获取内容并将其发送到服务器。
$('#get').click(function(){
alert( $('#list').text());
});
使用ajax发帖
$('#get').click(function(){
console.log( $('#list').text());
$.ajax({
type: "POST",
url: "/path to controller file",
data: $('#list').text(),
success: function(data) {
console.log(data); //post successfully done
}
});
});
关于javascript - Bootstrap 将文本框值添加到列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47322564/