ASP.net MVC - 视图中的@model更新未正确刷新

Question

我有一个简单的项目，我开始更新并将数据从Controller传递到View，并通过方法@Model.Name在View中显示/刷新它。

属性名称在控制器中得到很好的更新，当点击“法国”按钮和按钮“意大利”时，它会在控制器中更新。但是，只有在刷新或重新加载“定义”视图页面时，它才会显示视图上的更新（“显示”按钮）。

搜索了答案并认为这将是ModelState.Remove("Name");问题，但它似乎无法解决问题。

谢谢！

我的模特：

namespace Traveller.Models
{
    public class TSPMap
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<TSPCity> Cities { get; set; }
    }
}

我的控制器：

namespace Traveller.Controllers
{
    public class DefinitionController : Controller
    {
        // Controller Variable
        static TSPMap iTSPMap = new TSPMap()
        {
            Id = 1978,
            Name = "France",
            Cities = new List<TSPCity>
            {
                new TSPCity() {Id = 1, Name = "Orleans", X=100, Y=100},
                new TSPCity() {Id = 1, Name = "Vouzon", X=200, Y=100},
                new TSPCity() {Id = 1, Name = "Paris", X=100, Y=200},
            }
        };


        // GET: /<controller>/
        public IActionResult Index()
        {
            // Passing on the Data View Message
            ViewData["Message"] = "Traveller Definition page.";
            // Pass the Object Map to the View
            return View(iTSPMap);
        }

        // Action click on Button 1
        [HttpPost]
        public IActionResult ClickButton1()
        {
            Debug.WriteLine("ClickButton1 method called in Controller...");
            // Change the name of the Country
            ModelState.Remove("Name");
            iTSPMap.Name = "Italy";
            return View(iTSPMap);
        }

        // Action click on Button 2
        [HttpPost]
        public IActionResult ClickButton2()
        {
            Debug.WriteLine("ClickButton2 method called in Controller...");
            // Change the name of the Country
            ModelState.Remove("Name");
            iTSPMap.Name = "France";
            return View(iTSPMap);
        }
    }
}

我的观点：

<!-- Creating a strongly type view with the model in parameters -->
@model Traveller.Models.TSPMap
<!-- main UX definition for the View Definition -->
<div>
    <h3>@ViewData["Message"]</h3>
</div>
<!-- Button of Activation and Test on UI -->
<div>
    <input id="Button1" type="submit" value="Italy" onclick="ClickButton1()" />
    <input id="Button2" type="submit" value="France" onclick="ClickButton2()" />
    <input id="Button3" type="submit" value="Display" onclick="ClickButton3()" />
</div>
<div>
    <canvas id="mapCanvas" width="700" height="350" style="border:1px solid #000000;"></canvas>
</div>

<!-- Function to Display the Map in the View -->
<div>
    The map is name is: <b> @Model.Name </b>
</div>

<!-- Sript for function call on Button 1 -->
<script>
        function ClickButton1() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("ClickButton1", "Definition")',
                async: true,
                 success: function (msg) {
                     ServiceSucceeded(msg);
                },
                 error: function () {
                    return "error";
                 }
        });
        }
</script>

<!-- Sript for function call on Button 2 -->
<script>
        function ClickButton2() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("ClickButton2", "Definition")',
                async: true,
                 success: function (msg) {
                     ServiceSucceeded(msg);
                },
                 error: function () {
                    return "error";
                 }
        });
        }
</script>

<!-- Sript for function call on Button 3 -->
<script>
        function ClickButton3() {
            var canvas = document.getElementById('mapCanvas');
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = 'red';
            context.font = '25px Arial';
            context.fillText("@Model.Name", canvas.width/2, canvas.height/2);
        }
</script>