locked
How to add Modal pop up ? RRS feed

  • Question

  • User-1790113996 posted

    Good Day to all,

    kindly please help your opinion how can i add pop model in @Html.Actionlink Register Only, please check my code , thank you.

    Index

    @using PagedList.Mvc
    @model PagedList.IPagedList<WarehouseRtoRSystem.Models.EmployeeModel>
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <style>
        #items {
            font-size: 10pt;
            font-weight: bold;
            white-space: nowrap;
    
        }
    
       
    </style>
    <h2 class="w3-container">USERS</h2>
    <div class="">
       
        <div class="w3-container">
            <div class="w3-col m12 ">
                <br/>
            </div>
            <div class="w3-col m12 ">
        ---->  @Html.ActionLink(" Register", "AddEmployee", "Employee", new { @class = "btn btn-primary glyphicon glyphicon-plus" })
                @Html.ActionLink("Group", "Index", "UserGroup",null, new { @class = "btn btn-success" })
    
             </div>
           
    
            <div class="w3-col m12 " style="margin: 0px; width: 100%;">
    
                <div style=" width: 100%;">
    
    
                    <br />
                    <br />
                    <div class=" col-lg-5 w3-card-24 w3-border" style="background-color: #cc9966; color: black; padding: 20px; border-radius: 5px;">
                        @using (Html.BeginForm())
                        {<div class=" w3-light-grey" style="border: 5px solid #303030; border-radius: 5px; ">
                           
                            <div class="form-inline">
                                <br />
                                &nbsp;
                                <input type="text" class="form-control" name="SearchString" id="SearchString" value="@ViewBag.SearchString" placeholder="" />
                                <button type="submit" class="btn btn-default ">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <br />
                            </div>
                            <br />
    
                        </div>
                        }
                        <br/>
                        <br/>
                        <br />
                        @foreach (var item in Model)
                        {
                            @Html.Partial("EmpD", item)
                            ;
                        }
    
                        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
    
                        @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
                    </div>
    
                </div>
    
    
    
            </div>
            <div class="w3-col m12 ">
                <br/>
            </div>
            <div class="w3-col m12 ">
                <br/>
            </div>
            <div class="w3-col m12 ">
                <br/>
            </div>
        </div>
       
    </div>

    AddEmployee

    @model WarehouseRtoRSystem.Models.EmployeeModel
    
    @{
        ViewBag.Title = "AddEmployee";
    }
    
    <h2>AddEmployee</h2>
    <div style="background-color: #cc9966; color: black; padding: 20px;">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
    
            <div class="form-horizontal">
                <h4><b>EmployeeModel</b></h4>
                <hr />
                @Html.ValidationSummary(true)
    
                <div class="form-group">
                    @Html.LabelFor(model => model.USERNAME, new { @class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.TextBoxFor(model => model.USERNAME, null, new {@class="form-control", @placeholder="USERNAME" })
                        @Html.ValidationMessageFor(model => model.USERNAME)
                    </div>
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.LASTNAME, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(model => model.LASTNAME, null, new {@class="form-control", @placeholder="LASTNAME" })
                        @Html.ValidationMessageFor(model => model.LASTNAME)
                    </div>
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.FIRSTNAME, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(model => model.FIRSTNAME, null, new {@class="form-control", @placeholder="FIRSTNAME" })
                        @Html.ValidationMessageFor(model => model.FIRSTNAME)
                    </div>
                </div>
    
             
                <div class="form-group">
                    @Html.LabelFor(model => model.EMAIL, new {@class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.TextBoxFor(model => model.EMAIL, null, new {@class="form-control", @placeholder="E-MAIL" })
                        @Html.ValidationMessageFor(model => model.EMAIL)
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.CIDNO, new {@class = "control-label col-md-2"})
                    <div class="col-md-10">
                        @Html.TextBoxFor(model => model.CIDNO, null, new {@class="form-control", @placeholder="CIDNO" })
                        @Html.ValidationMessageFor(model => model.CIDNO)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Create" class="btn btn-default" />
                    </div>
                </div>
    
                <div class="form-group">
                      <div class="col-md-10">
                         @Html.HiddenFor(model => model.DEPTNAME)
                   
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                         @Html.HiddenFor(model => model.REQUESTOR)
                  
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                         @Html.HiddenFor(model => model.APPROVERA)
                  
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                         @Html.HiddenFor(model => model.APPROVERB)
                  
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                        @Html.HiddenFor(model => model.FINANCE)
                     
                    </div>
                </div>
    
                <div class="form-group">
                    <div class="col-md-10">
                        @Html.HiddenFor(model => model.BUDGET)
    
                    </div>
    
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                         @Html.HiddenFor(model => model.RELEASER)
                   
                    </div>
                </div>
    
                <div class="form-group">
                    <div class="col-md-10">
                        @Html.HiddenFor(model => model.PLANNER)
    
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                         @Html.HiddenFor(model => model.ADMINFLG)
                    
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                         @Html.HiddenFor(model => model.ADMINFLGA)
                     
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                        @Html.HiddenFor(model => model.ADMINFLGB)
                    
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                        @Html.HiddenFor(model => model.PMFLG)
                     
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                        @Html.HiddenFor(model => model.ACCESSFLG)
                   
                    </div>
                </div>
    
                <div class="form-group">
                      <div class="col-md-10">
                        @Html.HiddenFor(model => model.APMA)
                     
                    </div>
                </div>
    
                <div class="form-group">
                     <div class="col-md-10">
                        @Html.HiddenFor(model => model.APMB)
                      
                    </div>
                </div>
    
               
    
                <div class="form-group">
                    <div class="col-md-10">
                        @Html.HiddenFor(model => model.REPRESENTATIVE)
                     
                    </div>
                </div>
    
               
    
               
            </div>
        }
    
    </div>
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
    

    Thank you Again.

    Monday, October 30, 2017 2:09 AM

Answers

  • User347430248 posted

    Hi Cloudfiers,

    below are some examples you can try to refer.

    -> popup using JQuery.

    <div>
            <input type="text" id="Name" />
            <input type="text" id="Address" />
            <button onclick="OpenDialog()">
                Open Dialog</button>
        </div>

    <div id="Dialog-Box">
            <input type="text" id="Dialog-Name" />
            <input type="text" id="Dialog-Address" />
            <input type="submit" onclick="onsave()" value="save" />
        </div>

    <script>

    $('#Dialog-Box').dialog({
            autoOpen: false,
            height: 500,
            width: 700,
            modal: false
        });

    function OpenDialog() {
     
            var name = $('#Name').val();
            var address = $('#Address').val();
            $('#Dialog-Name').val(name);
            $('#Dialog-Address').val(address);
            $('#Dialog-Box').dialog('open');
        }

    function onsave() {
     
            $.ajax({
                url: '@Url.Action("ActionName""ControllerName")',
                type: 'POST',
                data: {
                    name: $('#Dialog-Name').val(),
                    address: $('#Dialog-Address').val()
                },
                success: function (msg) {
                },
                error: function (msg) {
                }
            });
     
        }

    -> another way is to create partial view and implement it in a view.

    <input type="button" value="Get Form" onclick="getForm()" />
    
    
    <script type="text/javascript">
    function getForm(){$('#dialog').dialog({
                autoOpen: true,
                width: 400,
                resizable: false,
                title: 'My Table',
                modal: true,
                open: function(event, ui) {
                    
                    $(this).load('@Url.Action("PartialForm", "CONTROLLER")');
                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
    }</script>
    
    <div id="dialog"></div>
    Public ActionResult PartialForm()
    {
        return View();
    }
    
    Partial View (PartialForm):
    
    Build your form here.

    if you want to use Bootstrap then you can refer links below.

    Bootstrap Modal PopUp Using ASP.NET MVC

    Implementing Modal Popup In MVC Application

    Bootstrap Modal Dialog - Loading Content from MVC Partial View

    Implement and display jQuery Modal Popup Dialog (Window) in ASP.Net MVC Razor

    Regards

    Deepak                                                           

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 31, 2017 7:54 AM