How to show an asp.net mvc view from an hyperlink in an asp.net webforms

Question

I have an hyperlink in asp.net web forms. When I click this link I want to show an asp.net mvc view as a popup modal. Currently I am doing Response.Redirect in the server side of the aspx page to the controller and then using Keno UI's kendowWindow on the top most div of the view. The problem is that because of response.redirect it goes to a different URL. I want the popup to show the modal page on the page containing the hyper link itself and close when the close button is clicked. I believe this has to be done by using client side javascript to load the modal instead of Response.Redirect.

$("#MyTopDiv").kendoWindow({
    content: {
        url: "~/MyFolder/MyView"
    },
    activate: function () {
        $(".k-i-close").on("click", function () {
            window.location = document.location.origin + "/Original/user/Original.aspx";
        })
    },
    modal: true,
    width: "950px",
    title: "Select Documents",
    close: onClose,

});

zgood · Answer 1 · 2016-02-04T01:13:31.593

I believe I have done something similar to this, if I am understanding your question.

ASPX Page

<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>

JavaScript

        $(function () {
            $('body').on('click', '.open-modal', function (e) {
                e.preventDefault();

                $.post(this.href, function (html) {
                    $('<div />').kendoWindow({
                        visible: true,
                        title: 'My Modal',
                        modal: true,
                        width: '600px',
                        deactivate: function () {
                            this.element.closest('.k-widget').remove();
                        }
                    }).data('kendoWindow')
                    .content(html)
                    .center()
                    .open();
                });
            })
        });

MVC Controller Action

    [HttpPost]
    public PartialViewResult MyView()
    {
        var vm = new MyViewVM();
        return PartialView("_MyView", vm);
    }

Is that helpful at all?

UPDATE

Yea you can pass parameters. Just include them as querystring values on your <a> and add them to the controller action.

<a class="open-modal" href="/MyFolder/MyView?id=9&name=Test">Open Modal</a>

then ...

[HttpPost]
public PartialViewResult MyView(int id, string name)
{
    var vm = new MyViewVM();
    //get data and fill view modal with id
    return PartialView("_MyView", vm);
}

That should work just make sure your parameter names match

UPDATE 2

Ya if you wanted to add your parameters dynamically using the javascript you linked in the comments you could probably do this:

ASPX Page

<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>

Javascript

       $(function () {
            $('body').on('click', '.open-modal', function (e) {
                e.preventDefault();

                var id = getParameterByName('id');
                var name = 'Test';

                $.post(this.href, { id: id, name: name }, function (html) {
                    $('<div />').kendoWindow({
                        visible: true,
                        title: 'My Modal',
                        modal: true,
                        width: '600px',
                        deactivate: function () {
                            this.element.closest('.k-widget').remove();
                        }
                    }).data('kendoWindow')
                    .content(html)
                    .center()
                    .open();
                });
            })
        });

The getParameterByName is defined in the link you posted in the comments and you controller action shouldn't need to change from the first UPDATE I posted.

This is exactly I wanted to have! Thanks a lot for posting it. I have one more requirement. I have to pass two variables to the controller from the aspx page. Please let me know how could I do it. Thanks — Massey, Feb 04 '16 at 00:55
I have to generate the id value dynamically from the current url. I found a link which helped me to do it. http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript But not sure how to incorporate it in the href. Thanks — Massey, Feb 04 '16 at 01:07
Some how I am unable to choose your answer as the chosen answer. Let me try a little later. Thanks — Massey, Feb 04 '16 at 01:38

How to show an asp.net mvc view from an hyperlink in an asp.net webforms

1 Answers1