C# ASP.NET MVC：动态更新视图
Posted
技术标签:
【中文标题】C# ASP.NET MVC：动态更新视图【英文标题】：C# ASP.NET MVC : update view dynamically 【发布时间】：2021-10-08 21:01:59 【问题描述】：我正在学习 C#，使用 DotNetFiddle 进行编码。
我有一个带有一堆单选按钮的网络，当我单击它们时，我想更新视图，例如：删除一个按钮。
我还需要在后端执行删除逻辑，从视图中我必须调用 POST 方法来传递数据。
所以我尝试使用 ajax 调用 POST 方法并返回 RedirectToAction 以显示新视图，但不知何故不起作用。
你可以在这里检查和测试我当前的代码：dotnetfiddle
控制器
using System;
using System.Web.Mvc;
using System.Collections.Generic;
namespace HelloWorldMvcApp
public class HomeController : Controller
public SampleViewModel sampleViewModel = new SampleViewModel();
[HttpGet]
public ActionResult Index()
return View(sampleViewModel);
[HttpPost]
public ActionResult UpdateList(string id)
sampleViewModel.deleteElement();
return RedirectToAction("Index");
型号
using System;
using System.ComponentModel.DataAnnotations;
namespace HelloWorldMvcApp
public class SampleViewModel
public List<string> list = new List<string> "a", "b", "c", "d", "e" ;
查看
@model HelloWorldMvcApp.SampleViewModel
@
Layout = null;
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- CSS Includes -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<br/>
<div class="container">
<br></br>
<ul>
@foreach (var c in Model.arr)
<li>
<input type="radio" name="option" id="@c">@c
</li>
</ul>
</div>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$('input[type=radio]').click(function()
var elemId = $(this).attr("id");
$.ajax(
url: '@Url.RouteUrl(new action="UpdateList", controller="Home")',
data: id : elemId ,
type: "POST"
);
);
</script>
</body>
</html>
【问题讨论】：
您的代码不起作用，因为您实际上并未将 id 传递给您的删除方法。所以它每次都会加载完整的循环。 @Greg delete 方法没有任何参数，所以我不用传递Id @mason 感谢您的建议，现在我要添加它。 @Kaido 但你怎么知道删除什么？您还可以重定向到新创建的模型。 @Greg 这是一个例子，我不在乎它是否没有逻辑我只想更新视图。 【参考方案1】：更新
我已将您的 Fiddle 编辑为：https://dotnetfiddle.net/zQq3aR
它完全按照我在原始答案中的描述进行，但使用主视图。请注意，这不是我推荐的……我们再次渲染整个视图，然后用新内容替换 整个 页面内容，但我对 DotNetFiddle 和不知道如何添加更多视图（可以吗？）。
C#：
[HttpPost]
public ActionResult PostToMe(string id)
// TODO: Do some stuff here, then return the updated view
return ButRenderMe(id);
[HttpPost]
public ActionResult ButRenderMe(string id)
// Remove some content from the model
sampleViewModel.arr = new [] "a", "b", "c", "all of the above" ;
return View(sampleViewModel);
JavaScript：
$.ajax(
url: '@Url.RouteUrl(new action="PostToMe", controller="Home")',
data: id : elemId ,
type: "POST",
success: function(data)
document.open();
document.write(data);
document.close();
);
在普通 MVC 项目中执行此操作的更好方法是使用 PartialView 来呈现要替换的内容...在本例中为列表。在您的“更新”操作中，您将更新您的数据，然后仅重新渲染该 PartialView 并返回它。然后只用新内容替换该部分。
使用上面的代码，来自我的 Fiddle，我们还不如做一个普通的页面发布，而不是一个 AJAX 调用。
这里有很多因素，但希望这会有所帮助。
原始答案
所以这有点令人困惑，因为您的问题与 DotNetFiddle 中的代码或问题本身都不匹配，但让我们看看这是否有帮助。
我很确定返回 RedirectToAction Result 不会返回您重定向到的其他操作的内容。我认为在这种情况下，由于它是一个 AJAX 请求，MVC 知道这不是正确的用法，并返回 200 OK 状态和以下示例内容。所以有了这个控制器动作：
[HttpPost]
public ActionResult RedirectMe()
return RedirectToAction("UpdateList");
我们得到这个响应：
<html><head><title>Object moved</title></head><body>
<h2>Object moved to <a href="/MvcPageAction/d5a71d77-e4c6-4b4c-a400-4543b1a9f897/Home/UpdateList">here</a>.</h2>
</body></html>
再说一次，我认为这不会像你想要的那样工作。
我认为你想要的是渲染另一个动作，然后返回那个内容。这应该像调用其他操作一样简单：
[HttpPost]
public ActionResult PostToMe(string id)
return ButRenderMe(id);
[HttpPost]
public ActionResult ButRenderMe(string id)
return Content("Test");
返回内容“test”。我认为如果你愿意，你应该能够在其他操作中呈现普通视图。
我也看了你的 DotNetFiddle...
在您的 DotNetFiddle 中，您的 JavaScript 正在调用似乎不存在的 UpdateList...不知道为什么它甚至会返回 200 OK...您拥有的操作是 Index 和 UpdateFlights。如果您在 Chrome 中打开 F12 开发人员工具，您应该会看到 POST 没有返回任何内容。
所以我添加了一个名为 UpdateList 的控制器操作：
[HttpPost]
public ActionResult UpdateList(string id)
sampleViewModel.deleteElement();
return Content("Test");
我可以看到“测试”作为 F12 工具中的响应内容返回。
【讨论】：
感谢您的回答。由于拼写错误，我没有 UpdateList，现在它是正确的。我试过你的建议它不起作用，按钮没有被删除。换句话说，我想要的是通过单击按钮动态更新当前视图，但删除逻辑必须在后端。 @Kaido 我已经用我自己的 Fiddle 和更多信息更新了答案。以上是关于C# ASP.NET MVC：动态更新视图的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC 如何从嵌套对象的视图模型集合中动态创建表结构