ASP .NET MVC AJAXの代わりにビューを挿入する代わりに、初めてデータを置き換えます。

Question

AJAXを初めて使用しましたが、非常に簡単な例がありますが問題があります。最初の呼び出しでは、データがビューで複製され、後続の呼び出しで正しく機能します。私は間違って何をしていますか？

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

まず時間を、初期ビュー：

第二に、時間、初めてボタンをクリック

〜/ビュー/共有/ _Layout.cshtmlファイルには、すべてのスクリプトがnecesaryを持っていました交換番号の代わりに番号を挿入します。

3回目、二回目のボタンのクリックが正常に動作しますが、2番目の行番号に...ので、上：

これは私のコードです： モデルは

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ハンドラを記述する必要があります。これは、挿入とプレペンドのどちらを行うかを指定することができます。交換する。

Answer 2

問題は、あなたのカミソリビュー内のHTMLマークアップコードが無効であることです。あなたが持っているコードで、かみそりは、以下のマークアップ（チェックソースを表示）

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

あなたは1がテーブル内にないことを確認することができますが生成されます。それは外です。したがって、あなたのajaxフォームの送信が行われると、テーブルの内容が新しい値で更新されます。それはあなたがまだ最初の数字を見ている理由です。

ソリューションは、DIV /スパン

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

にテーブルを変更する場合、またはあなたが絶対に何らかの理由でテーブルを持っている必要がある場合は、TD内の値を持っており、IDとして「divEmp」を使用その属性値。

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