创建呈现一个局部视图弹出 [英] Create a popup that renders a partial view

问题描述

我一直在挣扎与过去的几天里弹出。这里有一个小的信息。我是很新的使用JavaScript，但我渴望学习。首先在这里所有的的是什么，我想打一个比方。（preSS'Inloggen顶部右角使它弹出）的CSS是没有问题的。我使用 bPopUp 并复制编辑在站点中使用的code，不是的范例。

但无论如何，这里展示的网站使用PHP的。但我的老板决定改用MVC 4 .NET。这是不是一个真正的问题，除了一个事实，即它不工作了。我不知道为什么。

所以我决定从头再来，但我可以用一个小的帮助。

我想preFER实现的是有一个＆LT; D​​IV＆GT; ，可以重复使用，并呈现一个局部视图

要触发它，我想的东西线：

 ＆LT;跨度类=popup_button白数据弹出=有些/视图数据高度='200'＆GT; Inloggen＆LT; / SPAN＆GT;
 

这可以是其他代码代替跨度和Id可以用来代替类来定义它是一个弹出式触发器。 （任何其他整体解决方案，亦欢迎的课程）。我想利用这些数据，弹出属性来指定触发和数据的高度属性来指定弹出窗口的内容的高度时，要渲染的局部视图。

谁能人给我如何达到这个提示？我知道这可能是过分的要求，但每一个建议是值得欢迎的。由于缺乏经验，我用JavaScript我preFER code的例子，但任何建筑的建议，将愉快地接受了。

感谢你们事先：D

解决方案

  $（'＃我的按钮'）。点击（函数（）{
    VAR BASEURL =/弹出/+ $（'＃我的按钮'）数据（弹出）;
    $阿贾克斯（{
        网址：BASEURL，
        键入：POST，
        数据：{ID：$（'编号'）VAL（）}
        缓存：假的，
        异步：真实，
        成功：函数（结果）{
            $（内容）HTML（结果）。
            //有不同的方式做弹出。你提到你有弹出工作。这里触发它
            $（'＃弹出'）淡入（慢）。
            $（'推子'）淡入（慢）。
        }
    }）;
}）;
 

然后在您的控制器

  [HttpPost]
公共PartialViewResult行动（INT标识）{
    //填充模式
    返回PartialView（_ PartialViewName模型）;
}
 

让我知道如果你有任何问题。

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

解决方案

$('#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.

这篇关于创建呈现一个局部视图弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！