Ajax将值从视图传递到控制器

时间:2015-06-28 20:04:03

标签: javascript ajax asp.net-mvc

所以我试图将一些值从我的视图传递给控制器​​,控制器获取一个列表并返回它。

当我尝试从我的文本框等中获取值时,它们都是未定义的...不确定我在这里做错了什么。非常新的javascript ..

这里是js代码

<script type="text/javascript">
$(document).ready(function () {
    $("#getFreeApartements").on('click', function () {

        var amounta = $('#amounta').val();
        var amountc = $('#amountc').val();
        var amountan = $('#animals').val();
        var arr = $('#arrival').val();
        var dep = $('#departure').val();
        var atype = $('#atype').val();


        $.ajax({
            type: 'GET',
            data: { 'amountp': amounta, 'amountc': amountc, 'amountanimals': amountan, 'arrival': arr, 'departure': dep, 'apartmentType': atype },
            url: '@Url.Action("GetFreeApartements", "Bookings")',
            success: function (result) {
                $('freeAp').html(result);
            }
        });
        alert(amounta); // --> return undefined

    });
});

textboxinput字段

    <div class="form-group">
        @Html.LabelFor(model => model.Adult, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10" id="amountp" name="amountp">
            @Html.EditorFor(model => model.Adult, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Adult, "", new { @class = "text-danger" })
        </div>
    </div>

控制器:

        public ActionResult GetFreeApartements(int ap, int ac, int aa, DateTime arr, DateTime dep, ApartmentType type)
    {
 //do some stuff with received values here...
        var freeApartements = db.Apartments.ToList();
        return Json(freeApartements, JsonRequestBehavior.AllowGet);

    }

我也尝试过serializeArray而没有任何成功...... 我在资源管理器控制台中没有收到任何错误.. 函数被调用,但值为null .. - &gt; undefined应该是错误。

任何想法?

3 个答案:

答案 0 :(得分:0)

所以现在你遇到了异步调用如何工作的问题。您的$.ajax行将被执行,然后在此之后,alert行将被执行 - 它不会等待您的异步调用在运行alert之前解析(这是异步调用的重点)。您应该做的是检查amounta回调中success的值。

我修改了下面的内容,仅包括相关部分来说明这一点。我还添加了一行来在设置HTML后重新获取amounta DOM元素的值:

$(document).ready(function () {
    $("#getFreeApartements").on('click', function () {

        var amounta = $('#amounta').val();

        $.ajax({
            type: 'GET',
            data: { ... data },
            url: '@Url.Action("GetFreeApartements", "Bookings")',
            success: function (result) {
                $('freeAp').html(result);
                amounta = $('#amounta').val();
                alert(amounta);
            }
        });

    });
});

您的控制器可能还有其他问题......但上面的示例应该可以解决您看到的JavaScript问题。

答案 1 :(得分:0)

在textboxinput代码中。尝试使用editorFor的id。例如#Adult 而不是包装#amountp 作为您的JavaScript中的ID

答案 2 :(得分:0)

我希望这个答案可以帮到你

在EditorFor(文本框)中指定id属性。使用Ajax中的id评估文本框元素。

例如

@Html.EditorFor(model => model.Adult, new { htmlAttributes = new { id="adultTextBox" @class = "form-control" } })

在上面的示例中,我已将id="adultTextBox"评估为ajax,例如$("#adultTextBox").val()