locked
Form on popup window RRS feed

  • Question

  • User1398839915 posted

    I want to show a form to enter data as popup form. After entering the data , on success it should  show a msg as Sucess and redirect to Home Page .

    Monday, July 6, 2020 2:41 PM

Answers

  • User1686398519 posted

    Hi Deepulu1984,

    • I am glad that you have been able to implement pop-up modal. Between your previous questions, I have another solution that may better meet your previous needs, you can refer to it.
      • You can combine partial view and modal to fill the returned view data into the modal.
      • In this example,when clicking AddData button, action will return a partialview to modal popup form. After adding data, ajax will show msg and redirect to Home page. 
    • Deepulu1984

      I am able to open modal and save data to database table. But how to redirect to Homepage? 
      • For this problem, you can do like this.
      • window.location.href = "/Business/Index";

    Model

        public class Business
        {
            [Key]
            public int id { get; set; }
            public string name { get; set; }
            public double price { get; set; }
        }

    Controller

            private BusinessContext db = new BusinessContext();
            public ActionResult Index()
            {
                return View(db.businesses.ToList());
            }
            public int AddBusiness()
            {
                try
                {
                    var a = Request;
                    Business business = new Business();
                    business.name = Request.Form.Get("name");
                    business.price =double.Parse( Request.Form["price"]);
                    db.businesses.Add(business);
                    db.SaveChanges();
                    return 1;
                }
                catch (Exception)
                {
                    return 0;
                }
            }
            public ActionResult form()
            {
                return PartialView("ListBusiness");
    
            }

    Index View

    @model IEnumerable<popupwin.Models.Business>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.price)
            </th>       
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.price)
                </td>          
            </tr>
        }
    </table>
    <div class="modal fade" id="popup" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
        </div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.js"></script>
    <script type="text/javascript">
    function adddata() {
            $.ajax({
                url: "/Business/form",
                type:"GET",
                success: function (data) {
                    $('.modal-dialog').html(data);
                    $('#popup').modal('show');
                }
            });
        }  
        function Add() {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/Business/AddBusiness",
                data: $('#form1').serialize(),
                success: function (data) {
                    if (data == 1) {
                        alert("success");                
                        window.location.href = "/Business/Index";
                    } else {
                        alert("fail");
                    }
                },
            })
        }
    </script>

    _Layout.cshtml

    <li> <button class="btn-link" onclick="adddata()" style="margin-top:12px">Add data</button></li>
    

    PartialView

                     <div class="modal-content">
                        <div class="modal-body">
                            <form id="form1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Name:</label>
                                    <input type="text" class="form-control" id="name" name="name">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Price:</label>
                                    <input type="text" class="form-control" id="price" name="price">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="Add()">Add</button>
                        </div>              
                      </div>

    Here is the result.

    Best regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 7, 2020 8:30 AM

All replies

  • User-474980206 posted

    if you just want a server only solution, then just wrap the form with an open modal:

       https://getbootstrap.com/docs/4.5/components/modal/

    the post back should display a modal with the message. the ok button should be a link to the home page.

    Monday, July 6, 2020 3:13 PM
  • User1398839915 posted

    I want a form to popup on ActionLink .  

    The ActionLink is in the _Layout.cshtml page . When I click that it should show the view as popup

    Monday, July 6, 2020 4:50 PM
  • User475983607 posted

    Please do not make the community guess.  Share your code and explain what popup library you are using or plan to use.

    I recommend using a modal; https://getbootstrap.com/docs/4.0/components/modal/

    Monday, July 6, 2020 4:56 PM
  • User1398839915 posted

    _Layout.cshtml

    <li>@Html.ActionLink("AddData", "ListBusiness", "Home")</li>

    ListBusiness.cshtml: (View)

     @using (Html.BeginForm("ListBusiness", "Home", FormMethod.Post, new { id = "ListForm" }))
    {
    }

    I want to show this view (ListBusiness) as popup form on AddData click

    Monday, July 6, 2020 6:45 PM
  • User-474980206 posted

    assuming you don't want to navigate to a new page on the click, then you will need to use ajax. you will need a css framework that supports a modal, an ajax library, and a template engine (server of client). you will need to decide if you want an javascript template engine for the form or the server returns a partial that is displayed. Also  the posting & error behavior of the modal will influence your choice. 

    anyway google mvc modal for lots of examples.

     

    Monday, July 6, 2020 7:40 PM
  • User1398839915 posted

    Finally This is what I have done.

    _Layout.cshtml

    <li><a data-toggle="modal" data-target="#myModal">List</a></li>
            <div class="container-fluid">
                <!-- The Modal -->
                <div class="modal" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
    
                            <!-- Modal Header -->
                            <div class="modal-header">
                                <h4 class="modal-title">List</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
    
                            <!-- Modal body -->
                            <div class="modal-body">
                                
                                <form id="myform">
    
                                    @Html.TextBoxFor(m => m.Name,new { @class="form-control", @placeholder="Name"})
                                    @Html.TextBoxFor(m => m.Contact, new { @class = "form-control", @placeholder = "Contact" })
                                    @Html.TextBoxFor(m => m.Phone, new { @class = "form-control", @placeholder = "Phone" })
                                    @Html.TextBoxFor(m => m.Address, new { @class = "form-control", @placeholder = "Address" })
                                    @Html.TextBoxFor(m => m.City, new { @class = "form-control", @placeholder = "City" })
                                    @Html.TextBoxFor(m => m.Postalcode, new { @class = "form-control", @placeholder = "Pincode" })
                                    
                                </form>
    
                              
    
    
                            </div>
    
                            <!-- Modal footer -->
                            <div class="modal-footer">
                                <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
                                <input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
                        
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
    
    <script>
        $(document).ready(function () {
    
            $("#btnSubmit").click(function () {
                
    
                var myformdata = $("#myform").serialize();
                $.ajax({
                    
                    type: "POST",
                    url: "/Home/ListBusiness",
                    data: myformdata,
                    success: function () {
    
                        
                        $("#myModal").modal("hide");
                    }
    
    
                })
    
            })
        })
    
        
    </script>

    HomeController:

    public ActionResult ListBusiness(myDetail shop)
            {
                using (myDBEntities entities = new myDBEntities())
                {
                    entities.ShopDetails.Add(shop);
                    entities.SaveChanges();
                    string shopname = shop.ShopName;
    
                }
                return View("Index");
            }

    I am able to open modal and save data to database table. But how to redirect to Homepage? 

    I problem is the modal is closed after Submit, but the Home page is not loading. Unless I click on Home li it doesnot load . 

    how can we show a popup on Home page that the entry is successful?

    Please help

    Tuesday, July 7, 2020 6:51 AM
  • User1686398519 posted

    Hi Deepulu1984,

    • I am glad that you have been able to implement pop-up modal. Between your previous questions, I have another solution that may better meet your previous needs, you can refer to it.
      • You can combine partial view and modal to fill the returned view data into the modal.
      • In this example,when clicking AddData button, action will return a partialview to modal popup form. After adding data, ajax will show msg and redirect to Home page. 
    • Deepulu1984

      I am able to open modal and save data to database table. But how to redirect to Homepage? 
      • For this problem, you can do like this.
      • window.location.href = "/Business/Index";

    Model

        public class Business
        {
            [Key]
            public int id { get; set; }
            public string name { get; set; }
            public double price { get; set; }
        }

    Controller

            private BusinessContext db = new BusinessContext();
            public ActionResult Index()
            {
                return View(db.businesses.ToList());
            }
            public int AddBusiness()
            {
                try
                {
                    var a = Request;
                    Business business = new Business();
                    business.name = Request.Form.Get("name");
                    business.price =double.Parse( Request.Form["price"]);
                    db.businesses.Add(business);
                    db.SaveChanges();
                    return 1;
                }
                catch (Exception)
                {
                    return 0;
                }
            }
            public ActionResult form()
            {
                return PartialView("ListBusiness");
    
            }

    Index View

    @model IEnumerable<popupwin.Models.Business>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.price)
            </th>       
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.price)
                </td>          
            </tr>
        }
    </table>
    <div class="modal fade" id="popup" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
        </div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.js"></script>
    <script type="text/javascript">
    function adddata() {
            $.ajax({
                url: "/Business/form",
                type:"GET",
                success: function (data) {
                    $('.modal-dialog').html(data);
                    $('#popup').modal('show');
                }
            });
        }  
        function Add() {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/Business/AddBusiness",
                data: $('#form1').serialize(),
                success: function (data) {
                    if (data == 1) {
                        alert("success");                
                        window.location.href = "/Business/Index";
                    } else {
                        alert("fail");
                    }
                },
            })
        }
    </script>

    _Layout.cshtml

    <li> <button class="btn-link" onclick="adddata()" style="margin-top:12px">Add data</button></li>
    

    PartialView

                     <div class="modal-content">
                        <div class="modal-body">
                            <form id="form1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Name:</label>
                                    <input type="text" class="form-control" id="name" name="name">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Price:</label>
                                    <input type="text" class="form-control" id="price" name="price">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="Add()">Add</button>
                        </div>              
                      </div>

    Here is the result.

    Best regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 7, 2020 8:30 AM
  • User1398839915 posted

    Thank you so much. 

    But my form is not centered to the screen.

    Tuesday, July 7, 2020 9:42 AM
  • User1686398519 posted

    Hi Deepulu1984,

    You just need to add "<center></center>" outside of "<form></form>".

    <center>
        <form id="myform">
           ... ...
        </form>
    </center>

     

    Best regards,

    YihuiSun

    Wednesday, July 8, 2020 1:49 AM