運用SqlSugar架構+Axios寫的增刪查案例

標籤：vat   cli   manager   pass   v-model   win   and   ror   讀取   

使用SqlSugar架構需要引用NuGet程式包否則會出現報錯。

 

前台頁面建立代碼：

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/vue.min.js"></script>
<script src="~/Scripts/axios.min.js"></script>
<div id="app">
    <table style="width:80%;margin:auto;" class="table table-bordered table-hover">
        <tr>
            <th>姓名:</th>
            <td><input type="text" v-model="user.UserName" /></td>
        </tr>
        <tr>
            <th>手機號：</th>
            <td>
                <input type="text"  v-model="user.PhoneNumber" />
            </td>
        </tr>
        <tr>
            <th>密碼：</th>
            <td><input type="text"  v-model="user.UserPassword" /></td>
        </tr>
        <tr>
            <th>狀態：</th>
            <td><input type="text"  v-model="user.UserState" /></td>
        </tr>
        <tr>
            <td colspan="2"><button v-on:click="add" class="btn btn-info">添加</button></td>
        </tr>
    </table>
    <table class="table table-bordered table-hover">
        <tr>
            <td>編號</td>
            <td>使用者名稱</td>
            <td>手機號</td>
            <td>密碼</td>
            <td>狀態</td>
            <td>操作</td>
        </tr>
        @foreach (var item in ViewBag.data)
        {
            <tr>
                <td>@item.UserID</td>
                <td>@item.UserName</td>
                <td>@item.PhoneNumber</td>
                <td>@item.UserPassword</td>
                <td>@item.UserState</td>
                <td><a href="/Home/Delete/@item.UserID">刪除</a>&nbsp;<a href="#">修改</a></td>
            </tr>
        }
    </table>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            user: { UserName: "", PhoneNumber: "", UserPassword: "", UserState: 0 },
        } ,
        methods: {
            add: function () {
                axios.post(‘/Home/Insert‘, { users:this.user }).then(
                    res => {
                            window.location.href = "/Home/Index"
                    }).catch(
                        error => {
                            console.log(error);
                    });
            }
        }
    });
</script>


建立Config.CS連結資料庫

  public  class Config
    {
        /// <summary>
        /// 資料庫連接字串(私人欄位)
        /// </summary>
        private static readonly string _connectionString = System.Configuration.
            ConfigurationManager.ConnectionStrings["SqlServerConn"].ToString();
        /// <summary>
        /// 資料庫連接字串(公有屬性)
        /// </summary>
        public static string ConnectionString
        {
            get { return _connectionString; }
        }
    }

建立DBSuglar.CS

  public class DBSuglar
    {
        public static SqlSugarClient GetSqlSugarClient()
        {
            SqlSugarClient db = new SqlSugarClient(new ConnectionConfig()
            {
                ConnectionString = Config.ConnectionString,//必填, 資料庫連接字串
                DbType = DbType.SqlServer,         //必填, 資料庫類型
                IsAutoCloseConnection = true,       //預設false, 時候知道關閉資料庫連接, 設定為true無需使用using或者Close操作
                InitKeyType = InitKeyType.SystemTable    //預設SystemTable, 欄位資訊讀取, 如：該屬性是不是主鍵，是不是識別欄位等等資訊
            });
            return db;
        }
    }

建立實體類User.cs

  public  class User
    {
        public  List<UserInfo> Show()
        {
            return Users.GetAll().ToList();
        }
        public bool Delete(int id)
        {       
            return Users.Delete(id);
        }
        public  bool Insert(UserInfo us)
        {
            return Users.Insert(us);
        }
    }

建立Home控制器

 public class HomeController : Controller
    {
        public static SqlSugarClient db = DBSuglar.GetSqlSugarClient();
        User us = new User();
        /// <summary>
        /// 查詢
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            ViewBag.data = db.SqlQueryable<UserInfo>("select * from UserInfo").ToList();
            return View();
        }
        /// <summary>
        /// 刪除
        /// </summary>
        /// <param name="id">刪除的主鍵</param>
        /// <returns></returns>
        public ActionResult Delete(int id)
        {
            db.Deleteable<UserInfo>().Where(it => it.UserID == id).ExecuteCommand();
            return RedirectToAction("Index");
        }

      /// <summary>
        /// 添加
        /// </summary>
        public ActionResult Insert(UserInfo users)
        {
         var i= db.Insertable(users).ExecuteReturnBigIdentity();
            return Json(i,JsonRequestBehavior.AllowGet);
        }
    }

整體頁面效果

運用SqlSugar架構+Axios寫的增刪查案例