0

I'm developing an app using C# ASP.NET MVC 5 using Bootstrap and jquery. I'm very new to Javascript.

1. How can I change the javascript to allow only 'Quantity' number of coordinates? (Found a way and updated the code)

  1. How can I post the 'list' on 'Submit' to the Controller? I guess the corresponding Model will have a List of x & y to which I bind the list?

Thanks!

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

    });
});

user3453636
  • 77
  • 1
  • 9
  • "allow only 'Quantity' number of coordinates?" Can u elaborate on this; Plus also explain "@Html.TextBox"; i havent seen this before; – Rajkumar Somasundaram Nov 16 '17 at 05:56
  • Thanks for your response. What I meant was, I should be able to only those many coordinates as specified in the "Quantity" textbox. @Html.TextBox is Razor syntax. Anyways, I updated the code for the same. – user3453636 Nov 16 '17 at 06:03
  • could you add your controller code here – Jephren Naicker Nov 16 '17 at 11:02
  • @JephrenNaicker Added the code for Controller – user3453636 Nov 16 '17 at 18:34
  • here are a few links that could help [Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax](https://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method-using-jquery-ajax) , [How to pass List to controller in MVC 4](https://stackoverflow.com/questions/34221948/how-to-pass-listmodel-to-controller-in-mvc-4 ) although I do suggest saving x, y in a Parrell array [Post JavaScript array with AJAX to asp.net MVC controller](https://stackoverflow.com/questions/15782417/post-javascript-array-with-ajax-to-asp-net-mvc-controller) – Jephren Naicker Nov 16 '17 at 19:11

1 Answers1

1

In button click event get the content and send it to server.

Fiddle

$('#get').click(function(){
   alert( $('#list').text());
});

Post with 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 
        }  
    });  
});
Znaneswar
  • 3,329
  • 2
  • 16
  • 24