.NET MVC Prevent refresh when new record is created
<p>I have an 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 timer begins again for the next record (this  continues until no names are left). </p>

<p>I also have the ability to add names to the list. Right now when a user adds a name to the list by clicking on the create link, the name is added but it restarts the current timer that is counting down. I need the name to be added without refreshing the timer. Is that possible??</p>

<p>View:</p>

<pre><code>@model IEnumerable&lt;RangeTimer.Models.UserName&gt;

@{
    ViewBag.Title = "ABC";
}
&lt;div class="jumbotron"&gt;

&lt;p&gt;
        @Html.ActionLink("Add Name to list for range time", "Create")
    &lt;/p&gt;

&lt;table class="table"&gt;
    &lt;tr&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.FullName)
        &lt;/th&gt;
        &lt;th&gt;
            Time Remaining
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;

    @foreach (var item in Model)
    {
        &lt;tr&gt;
            &lt;td id="FullName"&gt;
                @Html.DisplayFor(modelItem =&gt; item.FullName)
            &lt;/td&gt;
            &lt;td&gt;
                &lt;span id="timer"&gt;&lt;/span&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    }

&lt;/table&gt;

&lt;/div&gt;
&lt;br/&gt;
&lt;script language="javascript" type="text/javascript"&gt;

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

        });            
    }

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

        var currentName = $('#FullName').Text;

        //we delete the table's Info
        var deleteRecord = $('#FullName').parent().remove();

        // deleteRecord.deleteRow(); //commented out since this also removes my timer

        var action = '@Url.Action("DeleteName","Controller")';
        $.get(action + "?name=" + currentName).done
            (function (result) {
                if (result) {
                    //  your user is deleted
                }
            })
        startTimer();
    }

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


&lt;/script&gt;  
</code></pre>

<p>Controller</p>

<pre><code>  // GET: UserNames
    public ActionResult Index()
    {
        return View(db.UserNames.ToList());
    }

    // GET: UserNames/Details/5
    public ActionResult Details(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        UserName userName = db.UserNames.Find(id);
        if (userName == null)
        {
            return HttpNotFound();
        }
        return View(userName);
    }

    // GET: UserNames/Create
    public ActionResult Create()
    {
        return View();
    }

    // POST: UserNames/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,FullName")] UserName userName)
    {
        if (ModelState.IsValid)
        {
            db.UserNames.Add(userName);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(userName);
    }
</code></pre>