C# - 获取文本框值并发送到 javascript 函数答案

【问题标题】：C# - Get textbox value and send to a javascript functionC# - 获取文本框值并发送到 javascript 函数
【发布时间】：2011-12-08 23:35:54
【问题描述】：

我有一个简单的表单，在同一页面上有三个文本框和一个<canvas>，我必须验证这三个字段，然后将值（如果验证）发送到一个 javascript 函数以在其中绘制图片和一些文本<canvas> 元素。提交值后，表单和文本框不必消失，因为用户可以使用不同的值尝试不同的结果。我以前做过其他形式，但从未尝试过使用 Ajax。我知道我可以使用客户端验证并使用 jQuery 获取文本框值，但我有更多的服务器端代码正在运行，可以使用这三个值。我该怎么做？

【问题讨论】：

标签： forms asp.net-mvc-3 model-view-controller asp.net-ajax

【解决方案1】：

在您的控制器中，创建一个方法来处理结果。我假设这仅用于记录，不需要实际返回数据。

public useResults(string value1, string value2) 
{
    // ... Do something with the results

    return Json(true);
}

在您看来，想出一种方法来构造上述操作的 url。也许在一个隐藏的领域；

@Html.Hidden("useResultsUrl", Url.Action("useResults", "controllerName"))

然后在您的 javascript 中，将单击事件附加到按钮上，就像您可能已经拥有的那样（以触发您的 javascript 任务）并添加 ajax 调用。

请注意，以下使用 JQuery，但如果您愿意，也可以使用 microsoft AJAX；

$(function () {
   $("#button").click(function() {
      $.ajax({
          url: $("input[name='useResultsUrl']").val(), // Get the url from the hidden field
          type: "POST",
          dataType: "JSON",
          data: $("input[type='text']").serialize() // Get the value of the text inputs and serialise them.
      });
   });

   // ... do other stuff 
});

【讨论】：

这是一个比我的答案更全面的答案——另外我忘了提到序列化表单数据。 +1

【解决方案2】：

您的视图可以使用 JQuery 对服务器进行 ajax 调用 - 使用 JQuery.post 或JQuery.ajax - 您将控制器操作的 URL 提供给 JQuery 方法，它会为您处理 AJAX 调用。

然后，在您的控制器操作中，您返回一个 JsonResult - 它为您将数据序列化为 JSON 格式：

e.g. return Json( model );

最后，在您的视图中的 JQuery Ajax 调用中实现一个成功函数 - 这将使控制器返回的数据可供您做任何您想做的事情。

【讨论】：