带有 AJAX 的 JSON 未在 ASP.NET MVC 中返回值

Question

大家好，

我认为我需要先搜索客户帐户详细信息，而不是重新加载页面。

用户输入客户帐号，然后按搜索按钮。

我已经在下面实现了，但它总是抛出帐号不存在的错误部分。

// This is the View
@model CreditFacility_Web.Models.CreditFacilityModel.Transaction
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="w3-container" style="padding-left:60px">
@{
    ViewBag.Title = "Credit Transaction";
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h2>Credit Transaction</h2>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Account_Number, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Account_Number, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Account_Number, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button value="Search" class="btn btn-primary">Search</button>
            </div>
        </div>

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

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

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

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

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

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

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

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

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

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-success" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {

<script type="text/javascript">
$(document).ready(function () {
 $(".btn-primary").click(function () {
var accNo = $('#Account_Number').val();

$.ajax({
        url: "@Url.Action("AccountDetails", "Transactions")",
        type: "POST",
        dataType: "json",
        data: { accountNo : accNo },
        async: false,

    error: function () {
        alert('Account Number do not Exist Or Other Errors Occurred');
        },

        success: function (data) {
        if (Object.keys(data).length > 0) {
        $('#Firstname').val(data.Firstname);
        $('#Old_Balance').val(data.Account_Balance);
        }
        }
        });
});
 });

 </script>

 }

下面是控制器

 [HttpPost]
    public JsonResult AccountDetails(string accountNo)
    {
        using (CreditFacilityContext  dataContext = new CreditFacilityContext())
        {
            var accSearchParameter = new SqlParameter("@Account_Number", accountNo);
            var accDetails = dataContext.Database.SqlQuery<SavingsAccount>("spGetAccountDetails", accSearchParameter).Select(s => new SavingsAccount
            {
                Firstname = s.Firstname,
                Account_Balance = s.Account_Balance,
                //rest of properties                    
            }).SingleOrDefault();
            return Json(accDetails, JsonRequestBehavior.AllowGet);
        }
    }

Answer 1

您要做的第一件事是删除该 async: false。它只是在事务执行时占用主线程。

我建议检查生成的 HTML，您的输入实际上具有 Account_Number 的 ID，而不是自动生成的 ID。您也可以手动设置您选择的 ID。

JS 应该在向后端发送任何内容之前检查 accNo 的值。