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,

  • 相关阅读:
    可以foreach的 必须继承IEnumable 接口才行
    .net 委托的用法
    匿名类的使用
    检测到有潜在危险的 Request.Form 值——ValidateRequest的使用
    IsPostBack用法
    Ajax 与 jquery
    好用的模板引擎NVelocity
    题解【AcWing275】[NOIP2008]传纸条
    题解【AcWing274】移动服务
    题解【AcWing271】杨老师的照相排列
  • 原文地址:https://www.cnblogs.com/jizhiqiliao/p/12981648.html
Copyright © 2011-2022 走看看