Delete record from Entity Framework database with jQuery

Question

I have a MVC application that will list names. (The names are in an entity framework database.) A timer is beside the first name in the list and when the timer ends, the name is removed from the list and the second name in the list will move up and the timer starts over (this continues until no names are left). I need to add the ability to remove the names from the EF database also. Any ideas?

JQuery

 $(document).ready(function () {
    startTimer();
    function startTimer() {           
        $('#timer').countdown({
            layout: '{mnn} : {snn}', timeSeparator: ':', until: 5, onTick: TimerColorChange, onExpiry: restartTimer

        });            
    }

    function restartTimer() {          
        $('#timer').countdown('destroy');

        //we delete the table's Info
        var deleteRecord = $('#firstName').parent().remove();
        // deleteRecord.deleteRow(); //commented out since this also removes my timer

        startTimer();
    }

    function TimerColorChange(periods) {
        var seconds = $.countdown.periodsToSeconds(periods);
        if (seconds <= 3) {
            $(this).css("color", "red");
        } else {
            $(this).css("color", "black");
        }
    }


});

Model code:

 public class UserName
{

    public int Id { get; set; }
    [Display(Name = "Full Name")]
    public string FullName { get; set; }

}

public class UserNameDBContext : DbContext
{

    public DbSet<UserName> UserNames { get; set; }
}

View:

@model IEnumerable<RangeTimer.Models.UserName>

@{
    ViewBag.Title = "";
 }
<br />



<table class="table">
    <tr>
       <th>
        @Html.DisplayNameFor(model => model.FullName)
    </th>

    <th>
         Time Remaining
    </th>

</tr>

@foreach (var item in Model) {
<tr>
    <td id="firstName">
        @Html.DisplayFor(modelItem => item.FullName)
    </td>


    <td id="timer">

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="timer"></span>


    </td>

</tr>
}

</table>

Controller:

 private UserNameDBContext db = new UserNameDBContext();



    // GET: UserNames
    public ActionResult Index()
    {


        return View(db.UserNames.ToList());
    }

Answer 1

I ll give you a little exemple :

1) Add a method to delete the username in your controller

// GET: Delete
public JsonResult DeleteName(string name)
{
    //Delete your user from your context here 
    return Json(true, JsonRequestBehavior.AllowGet);
}

2) in your javascript call this function with an ajax request :

function restartTimer() {          
    $('#timer').countdown('destroy');

    //we delete the table's Info
    var deleteRecord = $('#firstName').parent().remove();
    // deleteRecord.deleteRow(); //commented out since this also removes my timer
    var action ='@Url.Action("DeleteName","Controller")';

    $.get(action+"?name="+nameToDelete).done(function(result){
      if(result){
      // your user is deleted
      }
   })


    startTimer();
}