There is an asp.net web api project. In which there is an apicontroller.

// GET api/values public IQueryable<Contact> Get() { return repository.Contacts; } // GET api/values/5 public Contact Get(string id) { var tempcontact = repository.SearchContact(id); return tempcontact; } // POST api/values [HttpPost] public void Post(Contact value) { if (ModelState.IsValid && value!=null) { repository.SaveContact(value); } } // PUT api/values/5 [HttpPut] public void Put(int id, Contact value) { if (ModelState.IsValid) { repository.SaveContact(value); } } // DELETE api/values/5 [HttpDelete] public void Delete(int id) { repository.DeleteContact(id); } }

There is also a View and javascript functions that access api.

 $(document).ready(function () { $.ajax({ url: 'http://localhost:55285/api/values/', type: 'Get', dataType: 'json', success: function (dataContacts) { WriteResponse(dataContacts); }, error: function (x, y, z) { alert(x + '\n' + y + '\n' + z); } }); });

The same function draws a table in which there are buttons. And these buttons do not work. These buttons also have js functions that are called when pressed. If you create buttons not js, but in view, then everything works. The database has about 500+ records and a button is needed for each record. Which way to go and what to look for? Google can not help because I do not know what to look for.

 function WriteResponse(contacts) { var strResult = ""; var iio = 0; $.each(contacts, function (index, contact) { strResult += "<div class=\"row\">"; strResult += "<input class=\"form-control\" value=\"" + contact.ContactID + "\"/><input class=\"form-control\" value=\"" + contact.first_name + "\"/> strResult += "<div class=\"col-md-1\"><button id=\"DeleteBtn\" data-action=\"Delete\" class=\"btn btn-default\"><span class=\"glyphicon glyphicon-floppy-disk\"></span></button><button id=\"SaveBtn\" data-action=\"Save\" class=\"btn btn-default\"><span class=\"glyphicon glyphicon glyphicon-remove\"></span></button></div></div>"; }); $("#divResult").html(strResult); }

One of the handlers.

 $(document).ready(function () { jQuery.support.cors = true; $("#SaveBtn").click(function () { var contact = { first_name: $("#first_name").val(), }; $.ajax({ url: 'http://localhost:55285/api/values/', type: 'POST', data: JSON.stringify(contact), contentType: 'application/json; charset=utf-8', success: function (data) { }, error: function (x, y, z) { alert(x + '\n' + y + '\n' + z); } }); }); });
  • tried to look at a debugger in the browser? maybe something goes to the console with an error, and in the JS processing of the click on the button that was presented there is no, maybe this is the problem? - MasterAlex
  • No errors. Rearranged js only loads and make a table when the page loads. Handlers on the button are different. Added one handler, he sketchy. There is also a question how to change the id of each element first_name. - 2felix
  • Something weird is going on in AJAX, how do you determine whether you delete items or edit them? - MasterAlex
  • I did not understand the question. The server accepts a post request in which public void Post (Contact value). In addition, plans to expand the model and add other data, not just first_name. - 2felix
  • Yes, I corrected the question, it seems to me that I don’t need AJAX at all, you need to organize your code so that when you access it: http://localhost:55285/api/values/delete/5 there is a deletion, and when http://localhost:55285/api/values/get/5 tossed to the edit page. - MasterAlex

0