实现预设正文的mailto表单时触发System.InvalidOperationException错误

错误根源分析 #

你遇到的System.InvalidOperationException: Unexpected new line错误，结合代码来看，是几个问题叠加导致的：

1. 表单提交行为冲突：你的表单设置了method='post'和enctype="text/plain"，点击submit按钮时浏览器会默认把表单数据以纯文本格式提交到服务器，但你的服务器解析器无法正确处理这种格式的POST数据，从而抛出换行解析错误。而你原本想要的是触发客户端mailto邮件行为，这和表单的服务器提交逻辑完全冲突。
2. JavaScript逻辑的两处关键错误：
   • 你在页面初始化时就获取了输入框的值（var name = $('#personsName').val();这段代码在页面加载时执行），此时用户还没输入任何内容，拿到的都是空值；
   • 你的message变量根本没把用户输入的name、mail、address拼接进去，只是写了固定字符串，完全没用到用户输入的数据。
3. 无效的DOM操作：给submit按钮设置href属性是没用的，submit按钮不是<a>标签，这个属性不会起作用。

修正后的解决方案 #

我们需要把表单改成纯客户端行为，阻止默认的服务器提交，同时在用户点击按钮时动态获取输入值生成mailto链接：

修正后的HTML代码

<form>
  <b>Name:</b><br>
  <input type="text" name="personsName" id="personsName"><br>
  <b>E-mail:</b><br>
  <input type="text" name="mail" id="mail"><br>
  <b>Address:</b><br>
  <input type="text" name="address" id="address"><br>
  <input type="submit" value="Send" id="send">
</form>

（移除了method='post'和enctype="text/plain"，因为我们不需要提交到服务器）

修正后的JavaScript代码

$(function(){ 
  EGf20a6658.Init(); 
}); 

var EGf20a6658 = { 
  Init: function() { 
    if (typeof(OEConfEGf20a6658) === 'undefined') return; 
    var allElements = OEConfEGf20a6658; 
    for(var ID in allElements) { 
      var $el = $('#'+ID); 
      var properties = allElements[ID]; 
      this.InitElement(ID, $el, properties); 
    } 
  }, 
  InitElement: function(ID, $el, properties) { 
    // 给submit按钮绑定点击事件，在点击时才处理逻辑
    $('#send').on('click', function(event) { 
      // 阻止表单默认的提交行为
      event.preventDefault(); 
      
      // 此时才获取用户输入的最新值
      var name = $('#personsName').val().trim();
      var mail = $('#mail').val().trim();
      var address = $('#address').val().trim();
      
      // 拼接包含用户输入的邮件正文
      var message = `Hey ${name}! How are you? You still at ${address} with the email ${mail}?`; 
      
      // 生成编码后的mailto链接
      var mailtolink = 'mailto:me@domain.com?subject=Regret Permission Form&body=' + encodeURIComponent(message); 
      
      // 打开邮件客户端
      window.location.href = mailtolink; 
    }); 
  } 
};

关键修正点说明 #

• 阻止默认提交：用event.preventDefault()阻止表单向服务器提交，确保只执行我们的mailto逻辑；
• 动态获取输入值：把获取输入框值的代码移到点击事件内部，这样拿到的是用户点击按钮时的最新输入；
• 正确拼接邮件正文：用模板字符串（或字符串拼接）把用户输入的变量插入到邮件正文中；
• 直接打开mailto链接：用window.location.href触发邮件客户端，不需要给按钮加无效的href属性。

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