Bootstrap模态框的使用

最新推荐文章于 2024-04-20 12:04:09 发布

sunflower(*^ω^*)

最新推荐文章于 2024-04-20 12:04:09 发布

阅读量243

点赞数

文章标签： bootstrap javascript 前端

本文链接：https://blog.csdn.net/qq_45744011/article/details/125150785

版权

主界面前端代码如下：

@model KZQFirstTestPaperless.Domain.ViewModel.FirstinspectionAccountViewModel
@using KZQFirstTestPaperless.Common
@{
    AjaxOptions ajax = new AjaxOptions()
    {
        UpdateTargetId = "ContentRow",
        HttpMethod = "Get"
    };
    ViewBag.Title = "首检领用";
    Layout = null;
}
<div class="panel panel-info" style="margin:20px">
    <div class="panel-heading text-center">
        <h4>首检领用</h4>
    </div>
    <div class="panel-body">
        <div id="tableRow" style="margin-top:10px">
            <div class="row" style="margin:10px 0px;">
                @using (Ajax.BeginForm("ReceivingFirstinspection", "Firstinspection", new { selectType = 1 }, ajax))
                {
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="barCode" placeholder="条码" value="@ViewBag.BarCode" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="modelCode" placeholder="机型编码" value="@ViewBag.ModelCode" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-1">
                        <input class="form-control" name="versionNumber" placeholder="版本号" value="@ViewBag.VersionNumber" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="receivingState" placeholder="领用状态" value="@ViewBag.ReceivingState" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="fyStation" placeholder="封样位置" value="@ViewBag.FyStation" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <select class="form-control" name="typeName">
                            <option value="">--全部类别--</option>
                            <option value="变频">变频</option>
                            <option value="内机主板">内机主板</option>
                            <option value="显示器分体机">显示器分体机</option>
                            <option value="显示器柜机">显示器柜机</option>
                            <option value="遥控器">遥控器</option>
                        </select>
                        <span hidden>@ViewBag.TypeName</span>
                    </div>

                    <div class="col-xs-4 col-sm-3 col-md-1">
                        <button class="form-control btn btn-primary" type="submit">查询</button>
                    </div>
                }
            </div>
            <table class="table table-bordered table-hover table-striped table-responsive">
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].Id)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].BarCode)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ModelCode)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].VersionNumber)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].Number)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ProductionDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].FyState)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].FyStation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingTeam)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].Receiver)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingDuration)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingState)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingTime)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].TypeName)
                    </th>
                    <td></td>
                </tr>

                @foreach (var item in Model.FirstinspectionAccounts)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Id)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.BarCode)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ModelCode)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.VersionNumber)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Number)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ProductionDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.FyState)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.FyStation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingTeam)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Receiver)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingDuration)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingState)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingTime)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TypeName)
                        </td>
                        <td>
                            <a href="/Firstinspection/ReceivingScan?id=@Html.DisplayFor(modelItem => item.Id,ajax)"
                               data-target="#ajax"
                               data-toggle="modal">
                                领用
                            </a>
                            <a href="/Firstinspection/ReceivingBackScan?id=@Html.DisplayFor(modelItem => item.Id,ajax)"
                               data-target="#ajax"
                               data-toggle="modal">
                                归还
                            </a>
                        </td>
                    </tr>
                }
            </table>
        </div>
        <div class="text-right">
            @Html.PageAjaxLinks(Model.PagingInfo, "#ContentRow", x => Url.Action("ReceivingFirstinspection", new { page = x, barCode = ViewBag.BarCode, modelCode = ViewBag.ModelCode, versionNumber = ViewBag.VersionNumber, receivingState = ViewBag.ReceivingState, typeName = ViewBag.TypeName, fyStation = ViewBag.FyStation }))
        </div>
    </div>
</div>
<div class="modal" id="ajax" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>

将领用界面放在模态框中前端代码如下：

@model KZQFirstTestPaperless.Domain.Models.FirstinspectionAccount
@{
    AjaxOptions ajax = new AjaxOptions()
    {
        UpdateTargetId = "ContentRow",
        HttpMethod = "Post"
    };
    ViewBag.Title = "ReceivingScan";
    Layout = null;
}
@using (Ajax.BeginForm("ReceivingScan", ajax))
{
    @Html.AntiForgeryToken()
    <div class="modal-header">
        <h4 class="modal-title">首检领用</h4>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.Id)
            @Html.HiddenFor(model => model.ModelCode)
            @Html.HiddenFor(model => model.VersionNumber)
            @Html.HiddenFor(model => model.Number)
            @Html.HiddenFor(model => model.ProductionDate)
            @Html.HiddenFor(model => model.FyState)
            @Html.HiddenFor(model => model.FyStation)
            @Html.HiddenFor(model => model.TypeName)
            @Html.HiddenFor(model => model.Status)
            <div id="Receive" class="form-group">
                @Html.LabelFor(model => model.BarCode, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.BarCode, new { htmlAttributes = new { @name = "barcode", @class = "form-control", @readonly = "readonly" } })
                    @Html.ValidationMessageFor(model => model.BarCode, "", new { @class = "text-danger" })
                </div>
            </div>
            <div id="ReceiveCheck" class="form-group">
                <label class="control-label col-md-2">确认条码</label>
                <div class="col-md-10">
                    <input type="text" name="barcodeCheck" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Receiver, new { htmlAttributes = new { @name = "receiver", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Receiver, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ReceivingDuration, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <select class="form-control" name="receivingDuration">
                        <option value="">--全部时长--</option>
                        <option value="2小时">2小时</option>
                        <option value="4小时">4小时</option>
                        <option value="12小时">12小时</option>
                        <option value="24小时">24小时</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input id="submit-btn" type="submit" value="保存" style="display:none;" />
                <input id="commit-btn" type="button" value="保存" class="btn btn-default" data-dismiss="modal" />
                <button @*id="close"*@ type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $("html").removeClass();
            $('.modal-backdrop:gt(2)').remove();
            //点击假的保存触发真的保存
            $('#commit-btn').click(function (e) {
                $("#submit-btn").click();
                //table.ajax.reload();
                //var recentFormTag = $(this).parents("form")[0];
                //if (recentFormTag) {
                //    recentFormTag.submit()
                //}
            });
            //$('#close').click(function (e) {
            //    table.ajax.reload();
            //});
        })
    </script>
}

实现效果图如下：