通过按钮让号码自动回填到输入框

开发工具与关键技术: VisualStudio 2015 mvc

作者：杨泽平

撰写时间：2019、6、17

通过点击按钮新增一串号码到输入框里，在mvc项目中也是常用到的一种功能，这种功能在生活中见于拿临时号排队一样，可以实现这一功能的方法有多种。

我这里实现这一功能的方法原理大概是，通过获取数据库表字段的前一条数据的ID，在ID上加一得到新一条数据的ID，然后在这个新得到的ID前拼接字母或数字组成一段号码或编码，然后将他填入输入框中。以下面的为例。

视图的方法，先声明一个变量用于存放拼接的那一段编码，然后post请求，再if判断这串号码的长度，再通过for循环的方式，将拼接的字母或数字一个一个的拼接上去，最后拼接完成填入输入框还要禁用一下输入框就可以了。

详情代码如下：

function acquire() {

var Number = "";

$.post("/ReceptionManagement/Subscribe/yuyuehao", function (data) { 

    console.log(data); 

    if (data.length <
5) {        

        for (var i = 0; i < 5 -
data.length; i++) {        

            Number += "s";        

        }        

        Number += data;        

    }       


    $("#SubscribeNumber").val(Number);        

    //禁用输入框        

    $("#SubscribeNumber").prop("disabled", true);        

});        

视图方法完成，通过post传控制器，控制器还需要一个查询方法，先是查询这张表的数据，计算数据的条数，然后转换类型，这就是上面提到的，在查询到的数据条数基础上减一，得到数据库最后一条数据，拿到这条数据在ID上加一，得到新的一条数据的ID，就是我们需要的数据，然后return输出就可以了。

详情代码如下：

public ActionResult yuyuehao()

{

List<B_Subscribe> dbSubscribe = (from tbSubscribe in
myModels.B_Subscribe

                                 select
tbSubscribe).ToList();

//计算数据总条数

int count = dbSubscribe.Count();

 string SubscribeNumber = Convert.ToString(dbSubscribe[count
- 1].SubscribeID + 1);

return Json(SubscribeNumber, JsonRequestBehavior.AllowGet);

}

最后是效果了，现在数据库的数据里最后一条数据的ID为13，编码为sss13；

如下图：

我们要新获取一个号码，填入下面输入框

这里绑定了新增按钮，上面数据库最后一条数据的ID为13，那这次获取到的预约号应该为sss14。

如下图所示：