Question

我开始在asp.net MVC 4中学习Ajax。我想根据以下场景创建一个非常简单的程序。

我想要一个表单上的两个文本框（FirstName，LastName）和一个按钮，每当我在这些文本框中写入内容时，这些值应该通过使用Ajax分配给两个标签（lblFristName，lblLastName）。这样页面就不会刷新了。

我如何实现上述功能？请提供清晰/简单的代码示例，没有其他网站链接，谢谢。

以下是我尝试的代码： -

 @model MvcAppLearn.Models.Student

    @{
        ViewBag.Title = "AjaxCall";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <h2>AjaxCall</h2>

    @using (Html.BeginForm("AjaxCall", "Ajax", FormMethod.Post, new { id = "my-form" }))
    {

        @:FirstName @Html.EditorFor(x => x.FirstName);
        @:FirstName @Html.EditorFor(x => x.LastName);

        <input type="submit" value="Submit" />
    }

        <br />


    <div id ="result">


    </div>

    @section scripts{

    <script type="text/javascript">



        $(function () {

            $("#my-form").on("Submit", function (e) {

                //e.preventDefault();
                debugger

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    succes: function (data) {
                        $("#result").html(data);
                    },

                        error: function () {
                            alert("Oh noes");
                        }
                });
            });
        });

    </script>
        }

部分视图

@model MvcAppLearn.Models.Student

@{
    ViewBag.Title = "AjaxCall";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h2>Ajax Partial View</h2>

<label>@Html.DisplayFor(item => item.FirstName)</label><br />
       @Html.Label(Model.LastName)

@*  @Html.EditorFor(x => x.FirstName)<br />
  @Html.EditorFor(x => x.LastName)*@

控制器

public ActionResult AjaxCall()
        {
            return View();
        }

        [HttpPost]
        public virtual ActionResult AjaxCall(Student model)
        {

            return PartialView("ajax_partial" , model);
        }

所以上面的代码将我带到局部视图，但我希望生活在我放置文本框的页面上，并且在同一页面上我想显示这些标签。如果有任何错误请更正，谢谢

Answer 1

如果这是你的观点，

@Html.TextBoxFor(r => r.textbox1, new { id = "textbox1"})
<label id="label1"></label>

您可以使用简单的jquery更改/ keyup事件

来实现此目的

 $('#textbox1').bind("change keyup", function() {
        $('#label1').val($('#textbox1').val())
    });

Answer 2

我已经做到了，问题是我在“提交”中写了“s”作为资本而在“成功”功能中最后错过了's'。以下是正确的代码。

<script type="text/javascript">



    $(function () {


        $("#my-form").on("submit", function (e) {
            e.preventDefault();
            //debugger
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (data) {
                    $("#result").html(data);
                },

                    error: function () {
                        alert("Oh noes");
                    }
            });
        });
    });

</script>

如何在asp.net mvc中调用简单的ajax程序

2 个答案: