Bootstrap 将文本框值添加到列表

Question

我正在使用 C# ASP.NET MVC 5 使用 Bootstrap 和 jquery 开发应用程序。我对 Javascript 很陌生。

1。如何更改 javascript 以仅允许“数量”坐标数？ （找到方法并更新了代码）

1. 如何将“提交”上的“列表”发布给控制器？我猜相应的模型会有一个 x 和 y 的列表，我将列表绑定到该列表？

谢谢！

控制器

[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('');

    });
});

Answer 1

在按钮单击事件中获取内容并将其发送到服务器。

Fiddle

$('#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 
        }  
    });  
});