在 MVC 4 ASP .NET 上使用 Jquery 获取字符串的长度

Question

我制作了一个简单的表单，您可以在其中编写一个字符串，然后将其打印到另一个视图上，但现在我必须检查字符串的长度（使用 jquery）并将其打印到 Jquery UI 对话框中，已经找到了一些教程，但我是这个 MVC4 ASP .Net 的新手，所以在这个框架上使用 jquery（我必须这样做）有点令人困惑。

这是表单的视图：

@{
    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 = "Hola, Escribiste: ";
}

<hgroup class="title">
    <h1>@ViewBag.Title</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>

<script type="text/javascript">

       var myLength = $("#text").val().length;



       </script>

这里是控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication10.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)
        {
            TempData["Text"] = text;
            return RedirectToAction("About", "Home");
        }

        public ActionResult About()
        {
            ViewBag.Message = TempData["Text"];

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Página de contacto.";

            return View();
        }
    }
}

请帮帮我！

Answer 1

重要的是要记住 jQuery（和 jQuery UI）是客户端技术。该代码在用户的浏览器中运行。 ASP.Net MVC 是一种服务器端技术。该代码在您的服务器上运行，并创建交付给浏览器的 HTML 和 JavaScript。

您的起步似乎还算合理。您正在输出将在浏览器中运行并在 JavaScript 变量中设置字符串长度的 JavaScript 代码

var myLength = $("#text").val().length;

现在，您需要添加一些额外的代码来创建您的 jQuery UI 对话框。您也可以将该 JavaScript 代码放在您的视图中。然后，ASP.Net 也会将该代码发送到浏览器，并在其中运行。

查看 jQuery UI 对话框的示例并尝试将其合并到您的视图中

http://jqueryui.com/dialog/

基本上，您将拥有一段 HTML 来描述对话框中将出现的内容，例如：

<div id="dialog" title="Basic dialog">
  <p>The length of the string is: <span id='len'>RESULT HERE</span></p>
</div>

并将使用如下调用将该块“转换”到对话框中：

<script>
$(function() {
  $( "#dialog" ).dialog();
});
</script>

现在唯一的技巧是更新该对话框中的文本以显示字符串的长度。有很多方法可以做到这一点。一种方法是将 HTML 元素作为该值的占位符，并使用 jQuery 设置该元素的文本：

$('#len').text(myLength);