CODEWITHSUNDEEP
javascriptasp.net-mvc-4razorpopup
Dylan Snel
Dylan Snel

Reputation: 700

Create a popup that renders a partial view

I've been struggling with a popup for the last few days. Here's a little information. I am very new to using JavaScript, but I'm eager to learn. First of all here is an example of what I want to make. (Press 'Inloggen' on the top right corner to make it pop up) The CSS is no problem. I got this working using bPopUp and copying editing the code used in the site, not the examples.

But anyway, the site demonstrated here is made using php. But my boss decided to switch to MVC 4 .NET. Which isn't really a problem, except for the fact that it doesn't work anymore. And I don't know why.

So I decided to start over, but I could use a little help.

What I would prefer to achieve is to have one <div> that can be re used and renders a partial view.

To trigger it I would like something in the lines of:

       <span class="popup_button white" data-popup="Some/view" data-height='200'>Inloggen</span>

This may be other tags instead of span and Id can be used instead of class to define it's a pop-up trigger. (Any entire other solutions are welcome as well of course). I would like the use the data-popup attribute to specify which partial view to render when triggered and the data-height attribute to specify the height of the content of the popup.

Can anyone one give me tips on how to reach this? I know it might be much to ask, but every suggestion is welcome. Due to my inexperience with JavaScript I prefer code examples, but any architectural suggestions will be happily accepted.

Thank you guys in advance :D

Upvotes: 1

Views: 4322

Answers (1)

Matt Bodily
Matt Bodily

Reputation: 6413

$('#my-button').click(function () { 
    var BaseUrl = "/Popup/" + $('#my-button').data("popup"); 
    $.ajax({
        url: BaseUrl,
        type: "POST",
        data: { Id: $('.Id').val() }
        cache: false,
        async: true,
        success: function (result) {
            $(".content").html(result);
            //There are different ways to do the pop up.  you mentioned you had the popup working.  trigger it here
            $('#popup').fadeIn("slow"); 
            $('.fader').fadeIn("slow"); 
        }
    });
});

Then in your controller

[HttpPost]
public PartialViewResult Action(int Id){
    //populate a model
    return PartialView("_PartialViewName", model);
}

Let me know if you have any more questions.

Upvotes: 2

Related Questions