当我在文本区域(MVC 4 Razor View）上加上引号时，JS长度函数失败

JS Lenght function fails when i put Quotation marks on the text area, MVC 4 Razor View

本文关键字：JS 失败 函数 区域 文本 MVC View Razor      更新时间：2023-09-26

所以，我做了一个简单的表单，你可以在文本区域写任何你想要的东西，点击提交，然后它打印字符串并给你它的长度，它工作正常，直到我在文本区域加上引号，它给了我错误的字符数。

这是我的控制器。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            ViewBag.Message = "Modifique esta plantilla para poner en marcha su aplicación ASP.NET MVC.";
            return View();
        }
        [HttpPost]
        public ActionResult Index(string text)
        {
            Session["Text"] = text;
            return RedirectToAction("About", "Home");
        }
        public ActionResult About()
        {

           ViewBag.Message = Session["Text"];
            return View();
        }

    }
}

我的窗体视图。

@{
    ViewBag.Title = "Página principal";
}
@{
    ViewBag.Title = "Página principal";
}
<h3>Formulario</h3>
@using (Html.BeginForm())
{
    @Html.Label("Escribe lo que quieras")<br />
    @Html.TextArea("text")<br />
    <button type="submit">Enviar</button>

}

和结果视图。

 @{
    ViewBag.Title = "Exito";
}

@{
    ViewBag.Title = "Hola, Escribiste: ";
}
<hgroup class="title">
    <h1>@ViewBag.Title</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>
<script type="text/javascript">

    var Texto = "Hola, Escribiste: "+'@(ViewBag.Message)';
       var myLength = Texto.length;

       document.write("La cantidad de caracteres en la oracion es de "+myLength+" (Incluyendo el 'hola, escribiste')");

       </script>

为什么它用引号失败？

我想你指的是这一行：

var Texto = "Hola, Escribiste: "+'@(ViewBag.Message)';

您需要在@(ViewBag.Message)两边加上引号，因为这行是由两种完全不同的语言计算的。您需要了解服务器上发生的情况与客户端上发生的情况之间的区别。以下是发生的情况：

  1. 服务器准备要发送到客户端的内容。在此过程中，除其他事项外，它还会解析页面上的所有 Razor 表达式，并在适当的情况下将它们替换为内容。在这种情况下，表达式 @（ViewBag.Message） 将替换为用户输入的任何内容。引号位于 Razor 表达式之外，因此它们将单独保留。因此，例如，此行可以作为var Texto = "Hola, Escribiste: "+'uno dos tres';发送

  2. 包含替换内容的页面将发送到客户端

  3. 客户端识别出代码是Javascript并执行它。此时内容已经被替换了，所以Javascript实际上并没有看到@(ViewBag.Message)的部分，也不知道它曾经在那里。它看到的只是根据点 1 替换的线

现在试着想想如果没有单引号会发生什么。在这种情况下，Javascript将看到以下行：

var Texto = "Hola, Escribiste: "+uno dos tres;

这显然是错误的，因为某些文本周围没有引号。这就是您需要引号的原因。

此外，在这种情况下需要小心，因为如果用户输入包含单引号的文本，则代码将中断。例如，如果要显示的文本是 Don't enter single quotes ，则"替换"行将变为：

var Texto = "Hola, Escribiste: "+'Don't enter single quotes';

上面的行有不匹配的引号并抛出异常，以及使您的应用程序容易受到一种称为XSS（跨站点脚本）的攻击。

因此，如果您只需要显示文本的长度，则有更好的方法可以做到这一点。你不需要Javascript来计算字符，你可以直接在Razor中完成。只需删除最后一个脚本标签，并直接在 HTML 中（而不是在脚本中）使用以下代码：

@{
    var Texto = "Hola, Escribiste: " + ViewBag.Message;
}
<p>La cantidad de caracteres en la oracion es de @Texto.Lenght (Incluyendo el 'hola, escribiste')</p>

编辑：如果你真的必须使用Javascript来计算字符，你可以这样做：

<hgroup class="title">
    <h1>@ViewBag.Title</h1>
    <h2 id="userMessage">@ViewBag.Message</h2>
</hgroup>
<script type="text/javascript">
    var Texto = "Hola, Escribiste: " + document.getElementById('userMessage').innerHTML;
    var myLength = Texto.length;
    document.write("La cantidad de caracteres en la oracion es de "+myLength+" (Incluyendo el 'hola, escribiste')");
</script>

这是jQuery版本：

<hgroup class="title">
    <h1>@ViewBag.Title</h1>
    <h2 id="userMessage">@ViewBag.Message</h2>
</hgroup>
<script type="text/javascript">
    var Texto = "Hola, Escribiste: " + $('#userMessage').html();
    var myLength = Texto.length;
    document.write("La cantidad de caracteres en la oracion es de "+myLength+" (Incluyendo el 'hola, escribiste')");
</script>
相关文章：