当我在文本区域上放置引号时，JS Length 函数失败，MVC 4 Razor View

Question

所以，我制作了一个简单的表单，您可以在其中在文本区域中写下您想要的任何内容，然后单击提交，然后它会打印字符串并为您提供它的长度，它工作正常，直到我在文本区域，它给了我错误的字符数。

这是我的控制器。

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>

为什么用引号会失败？

Answer 1

我想你指的是这一行：

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

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

SERVER准备发送给客户端的内容。在这样做时，除其他外，它会解析页面上的所有 Razor 表达式，并在适当的情况下用内容替换它们。在这种情况下，表达式 @(ViewBag.Message) 将替换为用户输入的任何内容。引号位于 Razor 表达式之外，因此它们将被保留。因此，例如，此行可以作为 var Texto = "Hola, Escribiste: "+'uno dos tres';
替换后的页面发送给客户端
客户端识别出代码为Javascript并执行。此时内容已经被替换，所以 Javascript 实际上并没有看到 @(ViewBag.Message) 部分，也不知道它曾经在那里。它所看到的只是根据点 1

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

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

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

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

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>

当我在文本区域上放置引号时，JS Length 函数失败，MVC 4 Razor View

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

javascript

asp.net-mvc

jquery

razor

asp.net-mvc-4