ASP .NET MVC Ajax插入視圖，而不是替代數據只有第一次

Question

我是新來的AJAX，我有一個非常簡單的例子，但有一個問題;首先調用數據在View中重複並在隨後的調用中正常工作。我究竟做錯了什麼？

的〜/查看/共享/ _Layout.cshtml文件把所有的腳本necesary：

<script src="~/Scripts/jquery-3.1.0.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 

第一次，最初的觀點：

第二次，第一次按一下按鈕插入數字而不是替換號碼：

第三次，第二次按一下按鈕工作正常，但在第二行號......一個等：

這是我的代碼： 型號

namespace MQWebSt.Models 
{ 
    public class AjaxTest 
    { 
     public int Number { get; set; } 
    } 
} 

控制器：

using System.Web; 
using System.Web.Mvc; 
using MQWebSt.Models; 

namespace MQWebSt.Controllers 
{ 
    public class AjaxTestController : Controller 
    { 
     // GET: AjaxTest 
     public ActionResult Vista() 
     { 
      AjaxTest at = new AjaxTest { Number = 1 }; 
      return View(at); 
     } 

     [HttpPost] 
     public ActionResult Vista(AjaxTest model) 
     { 
      Random rnd = new Random(); 

      model.Number = rnd.Next(1, 100); 

      return PartialView("AjaxTestPartial", model); 
     } 
    } 
} 

查看Vista.chtml：

@model MQWebSt.Models.AjaxTest 

@{ 

    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

@using (Ajax.BeginForm("Vista", new AjaxOptions { UpdateTargetId = "divEmp", InsertionMode = InsertionMode.Replace })) 
{ 
    <button class="btn btn-primary btn-md glyphicon glyphicon-menu-right" name="Contestar" type="submit" value="+1"></button> 

    <div class="panel panel-footer"> 
     <table id="divEmp"> 
      @Model.Number.ToString() 
     </table> 

    </div> 

} 

個

AjaxTestPartial.chtml：

@model MQWebSt.Models.AjaxTest 
@Model.Number.ToString() 

Answer 1

的問題是你使用InsertionMode = InsertionMode.Replace，它會在UpdateTargetId更換數據。您可以使用InsertionMode.InsertBefore來代替它，並且它將在#divEmp的父級中構建值。但是，如果您需要的值被放置在#divEmp，你需要寫你的Ajax表單的OnSuccess選項JavaScript處理，這樣，如果你正在做的插入與前掛起VS您可以決定替換。

Answer 2

問題是，您的剃鬚刀視圖中的HTML標記代碼無效。隨着你的代碼，剃刀會生成以下標記（檢查查看源代碼）

<div class="panel panel-footer"> 
    1 
    <table id="divEmp"></table> 
</div> 

你可以看到，1是不是在表內。它在外面。所以當你的Ajax表單提交發生時，它會用新值更新表格內容。這就是你仍然看到最初號碼的原因。

的解決方案是將表更改爲DIV/SPAN

<div id="divEmp"> @Model.Number.ToString() </div> 

或者，如果你絕對需要有基於任何理由的表，有一個TD裏面的值，並用「divEmp」作爲id屬性值。

<table > 
    <tr> 
     <td id="divEmp">1</td> 
    </tr> 
</table>