zoukankan      html  css  js  c++  java
  • MVC通过Bootstrap弹出编辑窗口

    To pop up  a form in MVC, we can use bootstrap modal dialog to achieve it.

    First, define an enum in Model as the source of DropDownList.

    namespace TestMVC.Models
    {
        public enum City
        {
            LA,
            AK,
            NYC,
            WDC
        }
    }

    Then we can create the corresponding control in “Index.cshtml”. And we use JQuery to get the selected value.

    @using TestMVC.Models
    
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#sub").click(function () {
                var selec = $("#CityList").val();
                alert(selec);
            });
        });
    </script>
    
    <div style="text-align:center">
        <input id="selcity" type="button" data-toggle="modal"
               data-target="#popup_id" value="Select City" />
    </div>
    
    
    <div class="modal fade" id="popup_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content text-left">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">City Selector</h4>
    
                </div>
                <form action="@Url.Action("Index")" method="POST">
                    <div class="modal-body">
                        Please select the city you are from:
                    </div>
                    <div class="modal-footer">
                        <div style="display: inline-block">
                            <div>
                                @Html.DropDownList("CityList",
                                                    new SelectList(Enum.GetValues(typeof(City))),
                                                    "Select City",
                                                    new { @class = "form-control" })
                            </div>
                            </br>
                            <input type="button" id="sub" value="Update" />
                        </div>
                        <div style="display: inline-block">
                            <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
    
            </div>
        </div>
    </div>

    The demo gif,

  • 相关阅读:
    12.3、Libgdx的图像之截屏
    12.2、Libgdx的图像之清屏
    12.1、Libgdx的图像之持续性和非持续性渲染
    12、Libgdx的图像之全屏和垂直同步
    11.4、Libgdx的音频之录制PCM音效
    11.3、Libgdx的音频之播放PCM音频
    11.2、Libgdx的音频之音乐
    11.1、Libgdx的音频之音效
    11、Libgdx的音频
    阿里云服务器部署项目后台运行(入门)
  • 原文地址:https://www.cnblogs.com/jizhiqiliao/p/12981648.html
Copyright © 2011-2022 走看看