ASP Core 2.0：如何从视图调用控制器中的函数

嘿，完全不用不好意思！新手阶段的问题都是成长的必经之路😉 我来一步步帮你实现点击按钮调用控制器的Change函数，保证你能看懂～

第一步：确保控制器路由配置正确 #

首先，咱们得保证ASP Core能找到你的Change方法。假设你的控制器叫HomeController，可以给方法加上路由特性，或者确认全局路由配置没问题：

给方法加路由特性 #

在你的Change方法上方添加路由注解，这样ASP Core就能明确识别这个方法的访问路径：

public class HomeController : Controller
{
    // 记得先初始化你的choiceArray！不然会空引用哦
    private Choice[] choiceArray = new Choice[]
    {
        new Choice { Id = 0, Name = "选项A" },
        new Choice { Id = 1, Name = "选项B" },
        new Choice { Id = 2, Name = "选项C" }
    };

    [Route("[controller]/[action]")] // 路由规则：控制器名/方法名
    public ActionResult Change(int n)
    {
        // 一定要加索引判断，避免用户传无效的n导致报错
        if (n >= 0 && n < choiceArray.Length)
        {
            ViewData["currentChoice"] = choiceArray[n];
        }
        else
        {
            // 给个默认选项兜底
            ViewData["currentChoice"] = choiceArray[0];
        }
        return View();
    }
}

全局路由配置（可选） #

如果你的项目用的是传统路由（比如在Program.cs里配置），确保包含controller和action参数：

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

第二步：在视图里添加按钮（三种常用方式） #

根据你的需求，我给你推荐三种最适合新手的实现方式：

方式1：HTML表单提交（最基础，适合页面刷新场景） #

用表单来提交请求，带上参数n，这是最直观的方式：

<!-- 假设你的控制器是HomeController，action是Change -->
<form asp-controller="Home" asp-action="Change" method="get">
    <!-- 隐藏字段传递n的值，这里可以写固定值，也可以动态绑定 -->
    <input type="hidden" name="n" value="1" />
    <button type="submit">切换到选项B</button>
</form>

小贴士：asp-controller和asp-action是ASP Core的Tag Helper，需要确保你的视图引用了Tag Helper——一般在_ViewImports.cshtml里有@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers这行代码，如果没有的话加上就行。

方式2：超链接伪装成按钮（简单快捷，适合Get请求） #

如果不想用表单，可以直接用超链接，再用CSS把它变成按钮样式：

<!-- 直接生成带参数的URL，这里n=2对应选项C -->
<a href="/Home/Change?n=2" class="btn btn-primary">切换到选项C</a>

如果你用Bootstrap的话，btn btn-primary会让链接看起来和按钮一模一样，非常方便。

方式3：AJAX异步调用（不刷新页面，进阶用法） #

如果想实现局部更新（不用刷新整个页面），可以用AJAX，这里用jQuery举例子：

<button id="changeBtn" data-n="0">切换到选项A（不刷新页面）</button>
<!-- 先引入jQuery，你也可以用其他JS库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $('#changeBtn').click(function() {
        // 获取按钮上绑定的n值
        const n = $(this).data('n');
        // 发送Get请求到控制器的Change方法
        $.get('/Home/Change', { n: n }, function(response) {
            // 把返回的视图内容替换页面上的某个元素，比如id为choiceContainer的div
            $('#choiceContainer').html(response);
        });
    });
</script>

第三步：完善视图的显示逻辑 #

你的视图片段已经能获取ViewData里的内容，但最好加个空判断，避免空引用异常：

@{
    Choice currentPoint = ViewData["currentChoice"] as Choice;
}

<div id="choiceContainer">
    @if (currentPoint != null)
    {
        <p>当前选中的选项：@currentPoint.Name</p>
    }
    else
    {
        <p>暂无选中选项</p>
    }
</div>

这样一套下来，点击按钮就能成功调用控制器的Change函数，并且更新页面上的内容啦！

内容的提问来源于stack exchange，提问作者user9678769