第七章 模态框

简介: 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);
}

 

相关文章
|
4月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
4月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
44 0
|
4月前
|
JSON JavaScript 前端开发
原生js做树形菜单(详细注释+加简易版)
原生js做树形菜单(详细注释+加简易版)
49 0
|
10月前
|
JSON Java 数据格式
LayUI之树形菜单的实现(详细描述附带项目案例)
LayUI之树形菜单的实现(详细描述附带项目案例)
96 0
LayUI之树形菜单的实现(详细描述附带项目案例)
|
4月前
|
前端开发
前端知识笔记(三十一)———css实现水波纹效果(水球图)
前端知识笔记(三十一)———css实现水波纹效果(水球图)
192 0
|
9月前
|
JavaScript
Layui之选项卡案例 详细易懂
Layui之选项卡案例 详细易懂
|
JavaScript
如何用原生JS实现跑马灯效果
如何用原生JS实现跑马灯效果
177 0
如何用原生JS实现跑马灯效果
|
前端开发 容器
学习css样式的第二章(二)
学习css样式的第二章(二)
95 0
|
Web App开发 前端开发 安全
学习css样式的第二章(一)
学习css样式的第二章(一)
89 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
314 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)