使用 ASP.NET MVC 从数据库中检索数据并插入到文本框

Question

我有一个视图，在视图中，我有一个部分，您可以在其中输入客户帐号，然后按搜索

我希望搜索查询SQLSERVER以获取帐号详细信息并检索其他详细信息，例如名称、帐户余额等。

我已经完成了查看代码，但我对如何实现 Controller 以及是否应该使用AJAX来确保页面不会重新加载感到困惑。

你能给我建议吗？

下面是视图。

@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>

我已经能够在 View 和 Controller 上工作，以下是我所拥有的。

@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>

}

Controller 具有以下特性。

  [HttpPost]
      public ActionResult AccountDetails(string accountNo)
    {
        using (var db = new CreditFacilityContext())
        {

            var accDetails = db.SavingsAccounts.Where(t => t.Account_Number == accountNo).Select(s => new SavingsAccount
            {
                Firstname = s.Firstname,
                Account_Balance = s.Account_Balance,
                //rest of properties                    
            }).FirstOrDefault(); ;

            return Json(accDetails, JsonRequestBehavior.AllowGet);
        }

        
    }

Answer 1

Ajax 方法检索数据而不刷新页面：

$(".btn-primary").click(function () {
    var accNo = $('#Account_Number').val();
   
    $.ajax({
            url: "@Url.Action("AccountDetails", "Home")",
            type: "POST",
            dataType: "json",
            data: { accountNo : accNo },
            async: false,

            error: function () {
            },

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

首页 Controller 代码从 SQL 服务器获取数据：

 [HttpPost]
 public JsonResult AccountDetails(string accountNo)
 {
    using (DBContextModel dataContext = new DBContextModel())
    {
       var accSearchParameter = new SqlParameter("@Search", accountNo);
       var accDetails = dataContext.Database.SqlQuery<AccDetails>("EXEC YourStoredProc @Search", accSearchParameter ).Select(s => new AccDetails
        {
           FirstName = s.FirstName,
           Balance = s.Balance,
           //rest of properties                    
        }).SingleOrDefault();
        return Json(accDetails, JsonRequestBehavior.AllowGet);
     }
 }

Controller 代码工作的先决条件：

1. 存储过程
2. AccDetails class 具有与 SP 的 select 列名称/别名匹配的属性。 试试这个，我想你可能需要阅读 MVC 中的 jQuery Ajax 和 JSON 。