传递字符串以异步方式查看(Ajax)

时间:2014-04-03 09:33:23

标签: javascript jquery ajax asp.net-mvc json

我正在尝试创建用户将创建与文章关联的日期的视图。当用户输入条形码时,它应显示文章的名称,以帮助用户确保输入正确的条形码。

DateController中获取字符串并将其传递的方法:

public JsonResult GetArticleName(long barcode)
{
    ArticleDbContext artdb = new ArticleDbContext();
    Article art = (Article) artdb.Articles.Where(a => a.Barcode == barcode).First();
    return Json(art.Name, JsonRequestBehavior.AllowGet);
}

要获取数据的JavaScript:

$("#ArticleBarcode").change(function (event) {
    var URL = "/Date/GetArticleName";
    $.getJSON(URL, { Barcode: $("#ArticleBarcode").val() }, function (data) {
        $.each(data, function (index, d) {
            $("#ArticleName").html(d);
        });
    });
});



问题在于它似乎根本没有传递任何价值。我该怎么办?

PS:ArticleBarcode更改事件似乎无法触发。

修改

整个Create.cshtml

model DatoCheckerMvc.Models.Date

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

<h2>Opret</h2>

@using (Html.BeginForm("Create", "Date", FormMethod.Post, new { }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)


    <script type="text/javascript">
        function validationFunction() {
            var isValid = true;
            if (!$("#ArticleBarcode").val() || $("#ArticleBarcode").val() == "" || $("#ArticleBarcode").val().match("^\d+$")) {
                isValid = false;
            }
            if (!$("#RunDate").val() || $("#RunDate").val() == "" || $("#RunDate").val().match("((?:(?:[0-2]?\\d{1})|(?:[3][01]{1}))[-:\\/.](?:[0]?[1-9]|[1][012])[-:\\/.](?:(?:[1]{1}\\d{1}\\d{1}\\d{1})|(?:[2]{1}\\d{3})))(?![\\d])")) {
                isValid = false;
            }

            if (isValid) {
                return true;
            }
            else {
                return false;
            }
        }

        $(document).ready(function () {
            $(window).keydown(function (event) {
                if ((event.keyCode == 13) && (validationFunction() == false)) {
                    event.preventDefault();
                    return false;
                }
            });

            $("#ArticleBarcode").change(function (event) {
                alert("executed");
                $.getJSON('@Url.Action("GetArticleName", "Date")', { Barcode: $("#ArticleBarcode").val() }, function (data) {
                    $.each(data, function (index, d) {
                        $("#ArticleName").html(d);
                    });
                });
            });
        });
    </script>

    <fieldset>
        <legend>Dato</legend>
        <div class="row">
            <div class="form-group col-md-4">
                <div class="editor-label">
                    @Html.LabelFor(model => model.ArticleBarcode)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.ArticleBarcode, null, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.ArticleBarcode)
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-4">
                <div class="editor-label">
                    <label for="ArticleName">Varenavn</label>
                </div>
                <div class="editor-field">
                    <div id="ArticleName">

                    </div>


         </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group col-md-4">
            <div class="editor-label">
                @Html.LabelFor(model => model.RunDate)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.RunDate, null, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.RunDate)
            </div>
        </div>
    </div>
    <p>
        <input class="btn btn-default" type="submit" value="Opret" />
    </p>
</fieldset>

}

<div>
    @Html.ActionLink("Tilbage", "Index") </div>

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval") 
}

1 个答案:

答案 0 :(得分:1)

尝试使用控制器中使用的相同名称,如下所示

$.getJSON('@Url.Action("GetArticleName", "Date")', { barcode: $("#ArticleBarcode").val() }, function (data) {
        $.each(data, function (index, d) {
            $("#ArticleName").html(d);
        });
    });

并使用&#34; / Date / GetArticleName&#34;你乖乖的时候可能会给你造成问题!