简单的增删改查弹窗

这是一个简单的增删改查的弹窗的制作   

对数据库的操作方法BLL

    public class QGCatalogBLL : IDisposable
    {
        private AllureContext _context;

        public QGCatalogBLL(string EFConnectionString)
        {
            _context = new AllureContext(EFConnectionString);
        }
        public QGCatalogBLL(AllureContext Context)
        {
            _context = Context;
        }

        private bool disposedValue = false;
        protected virtual void Dispose(bool disposing)
        {
            if (!this.disposedValue)
            {
                if (disposing)
                {
                    _context.Dispose();
                }
            }
            this.disposedValue = true;
        }
        public void Dispose()
        {
            Dispose(true);
            GC.SuppressFinalize(this);
        }

        public void Create(QGCatalog qgCatalog)
        {
            try
            {
                _context.QGCatalogs.AddObject(qgCatalog);
                _context.SaveChanges();
            }
            catch (Exception E)
            {
                throw E;
            }
        }

        public void Update(QGCatalog qgCatalog)
        {
            try
            {
                if (!_context.IsAttached(qgCatalog))
                    _context.QGCatalogs.Attach(qgCatalog);
                _context.ObjectStateManager.ChangeObjectState(qgCatalog, System.Data.EntityState.Modified);
                _context.SaveChanges();
            }
            catch (Exception E)
            {
                throw E;
            }
        }

        public QGCatalog Retrieve(short QGCatalogID)
        {
            return (from i in _context.QGCatalogs
                    where i.QGCatalogID == QGCatalogID
                    select i).FirstOrDefault();
        }

        public void Delete(short QGCatalogID)
        {
            _context.ExecuteStoreCommand("delete QGCatalog where QGCatalogID=" + QGCatalogID.ToString());
        }

        public IEnumerable<QGCatalog> ListQGCatalogs()
        {
            return (from i in _context.QGCatalogs
                    select i).ToList();
        }
    }

然后就是添加一个控制器  作为程序运行的逻辑

    
        // GET: /QGCatalog/
        /// <summary>
        /// 显示数据
        /// renwei 2013-10-10
        /// </summary>
        /// <returns></returns>
        public ActionResult QGCatalogs()
        {
            QGCatalogBLL qgcatalogBLL = new QGCatalogBLL(HttpContext.Application["EFConnectionString"].ToString());

            IEnumerable<QGCatalog> QGCatalogs = qgcatalogBLL.ListQGCatalogs();
            return View(QGCatalogs);
        }
        /// <summary>
        /// 显示详情
        /// renwei 2013-10-10
        /// </summary>
        /// <param name="QGCatalogID"></param>
        /// <returns></returns>
        public ActionResult RetrieveQGCatalog(short QGCatalogID)
        {
            QGCatalogBLL qgcatalogBLL = new QGCatalogBLL(HttpContext.Application["EFConnectionString"].ToString());

            QGCatalog qGCatalog = qgcatalogBLL.Retrieve(QGCatalogID);
            return View(qGCatalog);
        }


        /// <summary>
        /// 添加一个QGCatalog
        /// renwei 2013-10-11
        /// </summary> 
        /// <returns></returns>
        public ActionResult CreateQGCatalog(QGCatalog qgCatalog)
        {
            QGCatalogBLL qgcatalogBLL = new QGCatalogBLL(HttpContext.Application["EFConnectionString"].ToString());

            qgcatalogBLL.Create(qgCatalog);

            return RedirectToAction("QGCatalogs");
        }

        /// <summary>
        /// 删除QGCatalog
        /// renwei 2013-10-11
        /// </summary>
        /// <returns></returns>
        public ActionResult DeleteQGCatalog(short QGCatalogID)
        {

            QGCatalogBLL qgcatalogBLL = new QGCatalogBLL(HttpContext.Application["EFConnectionString"].ToString());

            qgcatalogBLL.Delete(QGCatalogID);

            return RedirectToAction("QGCatalogs");
        }
        /// <summary>
        /// 修改导入
        /// renwei 2013-10-11
        /// </summary>
        /// <returns></returns>
        public ActionResult UpdateQGCatalog(QGCatalog qgCatalog)
        {
            QGCatalogBLL qgcatalogBLL = new QGCatalogBLL(HttpContext.Application["EFConnectionString"].ToString());

            qgcatalogBLL.Update(qgCatalog);

            return RedirectToAction("QGCatalogs");
        }
        

最后  就是制作一个页面   并在页面上添加入script 制作弹窗

@model IEnumerable<Allure.DataModels.QGCatalog>

@{
    ViewBag.Title = "QGCatalog";
}

<!--Jquery 皮肤-->
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<!--Jquery UI 1.10.2-->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>


<h2>QGCatalog</h2>
<p>
    <a id="PersonCreate" href="javascript:void(0)">添加 </a>
</p>
@if (Model != null && Model.Count() > 0)
{
    <table class="gridtable">
        <tr>
            <th>QGCatalogID
            </th>
            <th>CatalogName
            </th>
            <th>Operation
            </th>
        </tr>
        @foreach (var user in Model)
        {
            <tr>

                <td>
                    <a id="@("QGCatalogID" + user.QGCatalogID)">@user.QGCatalogID</a>
                </td>
                <td>
                    <a id="@("CatalogName" + user.QGCatalogID)">@user.CatalogName</a>
                </td>
                <td>
                    <a class="editButton" id="@user.QGCatalogID" href="javascript:void(0)">编辑</a>
                    |
                    <a class="DeleteButton" id="@user.QGCatalogID" href="javascript:void(0)">删除</a>

                </td>

            </tr>

        }

    </table>
}

<div id="PersonCreateTable">

    <form action="@Url.Action("CreateQGCatalog", "QGCatalog")" method="post" name="form" id="form">
        QGCatalogID：
    <input type="number" name="QGCatalogID" id="QGCatalogID">
        <br />
        <br />
        CatalogName：
    <input type="text" name="CatalogName" id="CatalogName">

        <p>
            <input type="submit" value="添加" />
        </p>
    </form>
</div>

<div id="PersonEditTable">

    <form action="@Url.Action("UpdateQGCatalog", "QGCatalog")" name="form" >
        <table class="gridtable">
            <tr>
                <th>QGCatalogID
                </th>
                <th>CatalogName
                </th>
                <th>Operation
                </th>
            </tr>
            <tr>

                <td>
                    <input id="UpdateQGCatalogID" name="QGCatalogID" type="text" />
                </td>
                <td>
                    <input id="UpdateCatalogName" name="CatalogName" class="text-box single-line" type="text" />
                </td>
                <td>
                    <input type="submit" value="保存" />

                </td>

            </tr>


        </table>
    </form>

</div>

<div id="PersonDeleteTable">

    <form action="@Url.Action("DeleteQGCatalog", "QGCatalog")" method="post" name="form">
        QGCatalogID：
    <input type="text" name="QGCatalogID" id="DeleteQGCatalogID" readonly="readonly">
        <br />
        <br />
        CatalogName：
    <input type="text" name="CatalogName" id="DeleteCatalogName" readonly="readonly">

        <p style="color: red;">Are you sure?</p>
        <p>
            <input type="submit" value="删除" />
        </p>
    </form>
</div>

<script type="text/javascript">
    //添加
    $("#PersonCreateTable").dialog({
        autoOpen: false,
        height: 220,
         185,
        modal: true,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        }
    });

    //点击添加 弹出 对话框
    $("#PersonCreate").click(function () {
        $("#PersonCreateTable").dialog("open");
    });



    //编辑
    $("#PersonEditTable").dialog({
        autoOpen: false,
        height: 120,
         450,
        modal: true,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $(".editButton").click(function () {

        var id = $(this).attr("id");

        $("#UpdateQGCatalogID").val($("#QGCatalogID" + id).text());

        $("#UpdateCatalogName").val($("#CatalogName" + id).text());

        $("#PersonEditTable").dialog("open");
    });


    //删除
    $("#PersonDeleteTable").dialog({
        autoOpen: false,
        height: 220,
         185,
        modal: true,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $(".DeleteButton").click(function () {
        var id = $(this).attr("id");

        $("#DeleteQGCatalogID").val($("#QGCatalogID" + id).text());
        $("#DeleteCatalogName").val($("#CatalogName" + id).text());

        $("#PersonDeleteTable").dialog("open");
    });




</script>

至此  一个简单的对数据库的增删改查的弹窗就做好了