第七章 模态框

简介: 1.在Index.cshtml中添加创建按钮 创建 2.控制器 [HttpGet] public ActionResult Create() { ViewBag.

1.在Index.cshtml中添加创建按钮

<a class="btn btn-success" href="@Url.Action("create" })" data-toggle="x-modal" data-modalId="@(Guid.NewGuid().ToString("N"))" >
            <span class="glyphicon glyphicon-plus"></span>创建</a>

2.控制器

        [HttpGet]
        public ActionResult Create()
        {
            ViewBag.ModalID = Request["ModalID"];

            StudentModel model = new StudentModel();
            model.StatusID = 1;
            return View("CreateOrEdit",model);
        }    

3.html代码

CreateOrEdit.cshtml代码

@{
    var action = ViewContext.RouteData.Values["Action"].ToString().ToLower();
    ViewBag.Title = action == "create" ? "添加信息" : "修改信息";
    
    Layout = "~/Views/Shared/_FormMaster.cshtml";
}
@model Models.Students.StudentsModel
<div id="form-content" class="container">
    @using (Ajax.BeginForm(action, "Students", new { area = "Students" }, new AjaxOptions { OnSuccess = "onsuccess", HttpMethod = "Post", UpdateTargetId = ViewBag.ModalID, InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal", role = "form" }))
    {
        //模态框 ID
        <input type="hidden" name="ModalID" value="@ViewBag.ModalID" />
        
        if (!string.IsNullOrEmpty(ViewBag.FormCode))
        {
            //表单状态代码
        <input type="hidden" name="FormCode" id="@(ViewBag.ModalID + "_FormCode")" value="@ViewBag.FormCode" />
        }
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title" id="myModalLabel">@ViewBag.Title</h4>
                </div>
                <div class="modal-body">
                    @Html.HiddenFor(t => t.ID) 
                    <div class="form-group">
                        <label class="control-label col-md-3">
                            @Html.LabelFor(t => t.Name)</label>
                        <div class="col-md-8 input-group">
                            @Html.TextBoxFor(t => t.Name, new { @class = "form-control " })
                            @Html.ValidationMessageFor(t => t.Name, null, new { @class = "input-group-addon" })
                        </div>
                    </div> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭</button>
                    <button type="submit" class="btn btn-primary">
                        保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->

    }
    <script type="text/javascript">
        function onsuccess() {
            var ModalID = "@ViewBag.ModalID";
            if ($('#' + ModalID + "_FormCode").val() == "1") {
                alert("提示", "保存成功!");
            }
            refresh();
        }
    </script>
</div>

4.提交表单

[HttpPost]
public ActionResult Create(StudentsModel model)
{
    ViewBag.ModalID = Request["ModalID"];

    if (ModelState.IsValid)
    { 
        //添加餐桌
        var result = InsertRule(
            model.ID, 
            model.Name
        );

        if (result.IsOK)
        {
            //成功
            ViewBag.FormCode = "1";
        }
    }

    return View("CreateOrEdit", model);
}

 

相关文章
|
7月前
|
前端开发
Boostrap技能点整理之【按钮样式】
Boostrap技能点整理之【按钮样式】
|
6月前
|
前端开发 程序员 UED
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
81 0
|
7月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
7月前
|
JSON JavaScript 前端开发
原生js做树形菜单(详细注释+加简易版)
原生js做树形菜单(详细注释+加简易版)
62 0
|
7月前
|
前端开发
前端知识笔记(三十一)———css实现水波纹效果(水球图)
前端知识笔记(三十一)———css实现水波纹效果(水球图)
289 0
|
JavaScript
Layui之选项卡案例 详细易懂
Layui之选项卡案例 详细易懂
133 0
|
JavaScript
如何用原生JS实现跑马灯效果
如何用原生JS实现跑马灯效果
208 0
如何用原生JS实现跑马灯效果
|
前端开发 容器
学习css样式的第二章(二)
学习css样式的第二章(二)
104 0
|
Web App开发 前端开发 安全
学习css样式的第二章(一)
学习css样式的第二章(一)
95 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
365 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)