Ajax实现前台页面调用后台方法(mvc)

时间:2021-08-08 00:36:26

       很多时候需要我们达到这样一个效果,当用户离开输入框时,需要给予用户一些提示,并且这些提示是数据库里已存在的数据,此时就需要我们调用后台代码一个方法将值返回到前台页面。

       以下举例说明,当用户输入编号时,我们给用户显示出他的姓名:

 

     1. 前台显示页面:

       @Html.TextBoxFor(model => model.UserName, new { @class = "text" })

 

       2.后台被调方法:

         public JsonResult GetAccountInfo(string username)
        {
            var member = _DB.Accounts.Where(c => c.UserName == username).FirstOrDefault();
            if (member != null)
            {
                string position=member.GetNameByPositionID(_DB);
                string creditlevel=member.GetNameByCreditLevelID(_DB);
                var sbt = _DB.bonus.Where(c => c.AccountID == member.ID).Sum(c => (decimal?)c.productsalereward) ?? 0;
                return Json(new string[] { member.AccountName, member.FirstIntegral.ToString(), member.AddFirstIntegral.ToString(), member.LeftIntegral.ToString(), member.RightIntegral.ToString(),position,creditlevel,member.StockRights.ToString(),member.MemberPoints.ToString(),sbt.ToString() });
            }
            else
                return Json(null);
        }

   3.触发事件:

      $("#UserName").change(function () {
            var parent = $(this).val();
            $.post("/Account/GetAccountInfo", { username: parent }, function (aa) {
                if (aa) {
                    $("#truename").text(aa[0]);
                }
                else {
                    $("#truename").text("会员不存在!");
                }
            }, "json");

        });