.NET MVC创建新记录时阻止刷新

问题描述：

我有一个将列出名称的MVC应用程序。这些名称位于实体框架数据库中。定时器在列表中的名字旁边，当定时器结束时，名称将从列表中删除，定时器将再次开始下一条记录（这会一直继续，直到没有名字为止）。.NET MVC创建新记录时阻止刷新

我也有能力给列表添加名字。现在，当用户通过单击创建链接向列表添加名称时，该名称将被添加，但会重新启动正在倒计时的当前计时器。我需要添加名称而不刷新定时器。那可能吗？？

查看：

@model IEnumerable<RangeTimer.Models.UserName> 

@{ 
    ViewBag.Title = "ABC"; 
} 
<div class="jumbotron"> 

<p> 
     @Html.ActionLink("Add Name to list for range time", "Create") 
    </p> 

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

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

</table> 

</div> 
<br/> 
<script language="javascript" type="text/javascript"> 

$(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 <= 3) { 
      $(this).css("color", "red"); 
     } else { 
      $(this).css("color", "black"); 
     } 
    } 
}); 


</script>

控制器

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

可能的重复：[jQuery AJAX提交表单]（http://*.com/a/6960586/1260204）。此外，您的HTML缺少您想要发布到服务器的ID和名称。最后，如果你想执行Create函数，那么它不应该重定向，而是返回一个Http结果（200 = ok，其他id =错误），所以你需要修改你的服务器代码，或者使用WebAPI来进行更好的设计。 – Igor

它重新启动计数器，因为'创建'是一个链接，它将您重定向到一个新页面以创建名称，然后返回到'索引'方法（您的脚本在您离开页面后立即停止运行，你再次渲染它）。使用ajax发布该值，以便不离开页面（或者沿着每个获取/发布重定向传递一个值，以指示计时器状态，以便在呈现索引页面时使用它） –

答

是的，这是可能的！通过Ajax和Javascript/jQuery的魔力，您可以在通过Ajax添加名称时调用控制器来提交名称并返回添加的名称并使用Javascript或jQuery将其附加到页面。不幸的是，这有点复杂，目前我无法为你写出来。但是，尝试一些这些链接。

https://msdn.microsoft.com/en-us/library/dd381533(v=vs.100).aspx

Making a Simple Ajax call to controller in asp.net mvc

祝你好运！

编辑：下面是使用jQuery/AJAX

function AddName(name) { 
    $.ajax({ 
     url: action, // Make it whatever your controller is 
     data: { UserName: name }, // or whatever object you need 
     type: "POST", 
     dataType: "html", 
     success: function (result, status, blah) { 

      if (result) { 
       AppendRow(result, target); // Create function to add to your name list 
      } 
     }, 
     error: function (result) { 
      AjaxFailed(result, result.status, result.error); 
     } 
    }); 
}

答

如果您发送时间参数addname行动javascript函数的一个小样本，并且必须添加重定向paramater。而不是使用viewbag.time。

.NET MVC创建新记录时阻止刷新

相关推荐