时间戳

首页 > 解决方案 > C# ASP.NET MVC：动态更新视图

c# - C# ASP.NET MVC：动态更新视图

问题描述

我正在使用 DotNetFiddle 学习 C# 进行编码。

我有一个带有一堆单选按钮的网络，当我单击它们时，我想更新视图，例如：删除一个按钮。

我还需要在后端执行删除逻辑，从视图中我必须调用 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>

标签： c#asp.netajaxasp.net-mvc

解决方案

更新

我已将您的小提琴编辑为：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");
}

这将返回内容“测试”。我认为如果需要，您应该能够在其他操作中呈现正常视图。

我也看了你的 DotNetFiddle ......

在您的 DotNetFiddle 中，您的 JavaScript 调用UpdateList的似乎不存在...不知道为什么它甚至会返回 200 OK...您拥有的操作是 Index 和 UpdateFlights。如果您在 Chrome 中打开 F12 开发人员工具，您应该会看到 POST 没有返回任何内容。

所以我添加了一个名为的控制器操作UpdateList：

[HttpPost]
public ActionResult UpdateList(string id)
{
    sampleViewModel.deleteElement();
    return Content("Test");
}

我可以看到“测试”作为 F12 工具中的响应内容返回。

推荐阅读