javascript - 如何在不刷新页面的情况下发送和接收数据

Question

我有表格中的数据。我有点击输入（文本框），将数据发送到 mvc 控制器并在此数据中执行操作并将新数据获取到另一个文本框。

但不刷新页面。如何使用 JSON？

标签： javascriptc#asp.net-mvc

Answer 1

如果您想使用表单从服务器发送和获取数据而不刷新页面，那么您必须使用 MVC Ajax。BeginForm，在MVC Ajax表单中为我们提供了表单前事件、表单成功事件和表单失败事件的 ajax 选项，我已经创建了一个演示，您可以根据您的要求更改事件调用。

1.cshtml代码如下：

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <div class="">
        @using (Ajax.BeginForm("SendOrGetData", "Home", new AjaxOptions { OnSuccess = "OnSucessForm1" }, new { @id = "Form1" }))
        {
            <input type="text" id="textbox1" name="textbox1" />

            <input type="text" id="textbox2" />

            <input type="submit" id="btnSubmit" value="Submit" />
        }
    </div>

    <script>
        function OnSucessForm1(res) {
            $("#textbox2").val(res);
        }
    </script>

2.控制器代码如下：

        public JsonResult SendOrGetData(string textbox1)
        {
            string res = textbox1;
            return Json(res, JsonRequestBehavior.AllowGet);
        }

注意：我已经使用按钮单击提交了表单，您可以在单击文本框时使用表单触发事件。