Answered by:
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 .
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 - 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.
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">×</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 - 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.
-
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