Form on popup window

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 .

Answer 1

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.

Answer 2

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

Answer 3

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/

Answer 4

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

Answer 5

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.

 

Answer 6

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

Answer 7

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

Answer 8

User1398839915 posted

Thank you so much. 

But my form is not centered to the screen.

Answer 9

User1686398519 posted

Hi Deepulu1984,

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

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

 

Best regards,

YihuiSun