在Umbraco中通过JS调用C#创建Cookie失败的求助

你遇到的核心问题是服务器端C#代码和客户端JS代码的执行时机完全不匹配——<% %>包裹的C#代码是在服务器渲染页面时就执行完毕的，根本等不到用户点击按钮的触发；直接把C#塞到JS函数里还会破坏JS的语法结构，导致浏览器找不到AddCookie函数。

下面给你三种可行的解决方案，根据你的需求选择：

方法一：用ASP.NET服务器端按钮（传统回发模式） #

如果可以接受页面刷新，这是最简单的方式：

<asp:Button ID="btnSetDesktopCookie" runat="server" Text="Click Here" OnClick="btnSetDesktopCookie_Click" />

然后在对应的后台代码块（比如Umbraco模板的后台代码或页面.cs文件）中添加：

protected void btnSetDesktopCookie_Click(object sender, EventArgs e)
{
    HttpCookie IsDesktopCookie = new HttpCookie("IsDesktopVersion");
    IsDesktopCookie.Value = "true";
    IsDesktopCookie.Expires = DateTime.Now.AddDays(1d);
    Response.Cookies.Add(IsDesktopCookie);
    // 刷新页面保持用户体验一致性
    Response.Redirect(Request.RawUrl);
}

用户点击按钮后，页面会回发到服务器，服务器创建Cookie后再返回页面。

方法二：AJAX异步调用后端接口（无刷新体验） #

想要无刷新创建Cookie，可以用Umbraco的SurfaceController写一个后端接口，再用JS调用：

1. 创建SurfaceController #

public class CookieSurfaceController : SurfaceController
{
    [HttpPost]
    public ActionResult SetDesktopCookie()
    {
        HttpCookie IsDesktopCookie = new HttpCookie("IsDesktopVersion");
        IsDesktopCookie.Value = "true";
        IsDesktopCookie.Expires = DateTime.Now.AddDays(1d);
        Response.Cookies.Add(IsDesktopCookie);
        return Json(new { success = true });
    }
}

2. 前端JS调用 #

<a href="javascript:void(0);" onclick="AddCookie();">Click Here</a>

<script>
function AddCookie() {
    fetch('/umbraco/surface/cookiesurface/setdesktopcookie', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert("Cookie已成功创建！");
        }
    })
    .catch(err => console.error('创建Cookie失败:', err));
}
</script>

注意SurfaceController的路由格式是/umbraco/surface/[控制器名]/[动作名]，上面的路径要和你的控制器名称对应。

方法三：直接用JS创建Cookie（无需服务器参与） #

如果这个Cookie只是前端使用，或者服务器端后续读取也没问题，完全可以直接用JS创建，不需要C#：

<a href="javascript:void(0);" onclick="AddCookie();">Click Here</a>

<script>
function AddCookie() {
    const expireDate = new Date();
    expireDate.setTime(expireDate.getTime() + (1 * 24 * 60 * 60 * 1000)); // 1天后过期
    document.cookie = `IsDesktopVersion=true; expires=${expireDate.toUTCString()}; path=/`;
    alert("Cookie已创建！");
}
</script>

这种方式最轻便，完全在客户端完成，服务器端依然可以通过Request.Cookies["IsDesktopVersion"]读取这个Cookie。

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