C# - 获取文本框值并将其发送到 JavaScript 函数

发布于 2024-12-10 12:54:04 字数 269 浏览 1 评论 0原文

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

I have a simple form with three textboxes and a <canvas> on the same page and I have to validate these three fields and then get the values (if validated) sent to a javascript function to draw a picture and some text inside the <canvas> element. The form and textboxes wouldn't have to disappear after the values were submitted because the user could try out different results with different values. I've done other forms before but never tried using Ajax. I know I could use a client-side validation and get the textbox values with jQuery but I have more server-side code running that would make use of these three values. How can I do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

韬韬不绝 2024-12-17 12:54:04

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

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 
});

in your controller, create a method to handle the results. I assume that this is for logging only, and does not need to actually return data.

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

    return Json(true);
}

In your view, work out a way to construct the url to the above action. Perhaps in a hidden field;

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

Then in your javascript, attach a click event to the button, as you probably have already (to trigger your javascript task) and add in an ajax call.

Note that the following uses JQuery, but you could use microsoft AJAX if you preferred;

$(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 
});
箹锭⒈辈孓 2024-12-17 12:54:04

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

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

e.g. return Json( model ); 

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

Your View can make an ajax call to the server using JQuery - either using JQuery.post
or JQuery.ajax - you give the Url of the controller action to the JQuery method, and it will handle the AJAX call for you.

Then, in your controller action, you return a JsonResult - which serialize the data for you into JSON format:

e.g. return Json( model ); 

Finally, implement a success function in the JQuery Ajax call in your view - this wil have the data returned by the controller available for you to do whatever you want with.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文