locked
Regarding Browser Size in MVC View RRS feed

  • Question

  • User-1586556547 posted

    Hi all,

    I am opening a controller actionmethod as link from an application. I need to open the view as popup with predefined height and width.

    My requirement is not to use window.open.

    I tried setting height and width in html body tag but is not working.

    Can someone provide inputs on how this could be done.

    Regards,

    Ashvin

    Tuesday, February 5, 2019 6:30 AM

All replies

  • User-2054057000 posted

    You can use iframe to show the other view like this:

    <iframe src="http://localhost:89768/Product/Skirts"></iframe>

    Tuesday, February 5, 2019 3:49 PM
  • User-474980206 posted

    if you don't open a second window, then a popup is just a div with markup. if you are using the default bootstrap css, then see:

      https://getbootstrap.com/docs/3.4/javascript/#modals

     

    Tuesday, February 5, 2019 3:51 PM
  • User1520731567 posted

    Hi ashvinrs83,

    According to your descriptions,I suggest you could use bootstrap modal popup and partial view.

    I make a simple demo,you coulc refer to it:

    Index action:

     public ActionResult Index()
            {
    
                return View();
            }

    Index view:

    <button type="button" class="btn btn-success btn-sm  modal-link"
        data-targeturl="@Url.Action("Details","Home",new { id = 1 })"><!--You could pass parameters to the action by new{}-->
                View
    </button>
    
    
    <!-- The below code is for the modal dialog -->
    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <a href="#close" title="Close" class="modal-close-btn">X</a>
        <div class="modal-content">
    
        </div>
    </div>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script> $(function () { $('body').on('click', '.modal-link', function (e) { e.preventDefault(); $("#modal-container").remove(); $.get($(this).data("targeturl"), function (data) { $('<div id="modal-container" class="modal fade">' + data + '</div></div>').modal(); }); }); }); </script>

    Partial view action:

            public ActionResult Details(int id)
            {
               ....
    
                return PartialView();
            }

    Partial view:

    <div class="modal-dialog">
        <div class="modal-content"  style="height:500px"> <!-- You could set predefined height and width in class="modal-content"-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Franchise Application</h4>
            </div>
            <div class="modal-body">
    
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    

    How it works:

    Best Regards.

    Yuki Tao

    Wednesday, February 6, 2019 2:41 AM