ASP.NET中Uri.EscapeUriString无法实时更新编码URL问题求助

我需要实现一个实时更新编码URL的功能——在顶部输入框获取用户输入的URL，随每一次按键在底部实时显示对应的编码后URL，但当前实现无效。

现有代码 #

输入框代码 #

@Html.TextBoxFor(m => m.url, new { @class = "form-ctrl", ng_model = "vm.url" })

显示代码 #

@Uri.EscapeUriString("{{vm.url}}")

实际结果 #

无任何内容显示

预期结果 #

随每一次按键实时显示编码后的URL

注意事项 #

使用<p>{{vm.url}}</p>时能实时更新，但显示的是未编码的字符串，求助如何实现实时显示编码后的值？

问题原因与解决方法 #

你当前的问题核心是：后端的Uri.EscapeUriString方法直接处理了字符串"{{vm.url}}"，而非前端AngularJS的动态变量值，导致前端渲染后没有有效内容。以下是两种可行的解决思路：

方法一：前端使用AngularJS自定义过滤器

在前端通过过滤器实时编码URL，更符合Angular的模板开发逻辑：

1. 注册自定义过滤器：

angular.module('你的应用模块名').filter('encodeUri', function() {
  return function(input) {
    return input ? encodeURI(input) : '';
  };
});

如果需要对URL参数进行更彻底的编码（比如包含特殊字符的参数），可以把encodeURI替换为encodeURIComponent。

2. 修改前端显示代码：

<p>{{ vm.url | encodeUri }}</p>

方法二：控制器中定义计算属性

在AngularJS控制器里创建一个实时计算编码值的属性：

angular.module('你的应用模块名').controller('你的控制器名', function() {
  var vm = this;
  vm.url = '';

  // 实时返回编码后的URL
  Object.defineProperty(vm, 'encodedUrl', {
    get: function() {
      return vm.url ? encodeURI(vm.url) : '';
    }
  });
});

然后修改显示代码：

<p>{{ vm.encodedUrl }}</p>

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