Question

我正在使用C＃ASP.NET MVC 5使用Bootstrap和jquery开发一个应用程序。我对Javascript很新。

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

如何将'提交'上的'列表'发布到控制器？我想相应的模型将有一个x＆amp;列表我绑定列表的那个？

谢谢！

控制器

[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 
        }  
    });  
});

Bootstrap将文本框值添加到列表

1 个答案: