PopupDemo

Jan 21, 2011 at 3:32 AM

Hi all,

I followed the example Awesome:

- Add  new Item Index.cshtml in PopupDemo:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.MakePopup("eya", "this content is defined in the view")
@Html.PopupActionLink("eya", htmlAttributes: new { @class = "abtn" })
@{Html.MakePopup<PopupDemoController>(o => o.Info(), "info",
    new Dictionary<string, string>
                {
                    {"say hi","sayHi"},
                    {"say how are you", "function(){ alert('how are you'); }"},
                    {"Close it", "closeInfo"}
                }, position: "[30,130]");}
<script type="text/javascript">
    function sayHi() { alert('hi'); }
</script>
@{Html.PopupActionLink<PopupDemoController>(o => o.Info(), "info", new { @class = "abtn" });}
&nbsp;

- Add new Item Info.cshtml :

hi, this is the content of the info.ascx view

- Add new controller : PopupDemoController.cs

 public class PopupDemoController : BaseController
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Hey()
        {
            return Content("hey, how are you");
        }

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

 

==> It isn't display "info" button.

Please help me to solve this :)

Thanks,

Tu .Vo

 

 

Coordinator
Jan 21, 2011 at 7:52 AM
Edited Jan 21, 2011 at 7:56 AM

it should be like this:

@(Html.MakePopup<PopupDemoController>(o => o.Info(), "info",
    new Dictionary<string, string>
                {
                    {"say hi","sayHi"},
                    {"say how are you", "function(){ alert('how are you'); }"},
                    {"Close it", "closeInfo"}
                }, position:"[30,130]"))

@(Html.PopupActionLink<PopupDemoController>(o => o.Info(), "info", new { @class = "abtn" }))

 

change the { to (

and delete the ; at the end

sorry, I've uploaded the code this way, didn't noticed,

I should have checked it better,  I should have look at razor syntax more

Jan 21, 2011 at 8:10 AM

I edited code your way. It display info button but when i click button then it show wrong popup.

Coordinator
Jan 21, 2011 at 8:31 AM

could be,

there are 3 Html.MakePopup for the info in there

one with prefix abc

another one with prefix mod

and the one with the buttons without prefix

 

so when you do Html.PopupActionLink you specify which popup to show by specifying (or not) the prefix

Jan 24, 2011 at 2:19 AM

Here are my code in Index.cshtml:

    @Html.MakePopup("Hey", width:300, height:200)       
    @{Html.MakePopup<PopupDemoController>(o => o.Info(), "info",
    new Dictionary<string, string>
                {
                    {"say hi","sayHi"},
                    {"say how are you", "function(){ alert('how are you'); }"},
                    {"Close it", "closeInfo"}
                }, position:"[30,130]");}

    @Html.MakePopup("Info", height:200, prefix:"abc", position:"top")
    @Html.MakePopup("Info", prefix:"mod", modal:true, position:"right")
    @Html.MakePopup("eya","this content is defined in the view")
   
    @Html.PopupActionLink("Hey", htmlAttributes:new{@class="abtn"})&nbsp;
    @{Html.PopupActionLink<PopupDemoController>(o => o.Info(), "info", new { @class = "abtn" });}&nbsp;
    @Html.PopupActionLink("info", prefix:"abc", htmlAttributes:new{@class = "abtn"})&nbsp;
    @Html.PopupActionLink("info", "modal info", prefix:"mod", htmlAttributes:new{@class = "abtn"})
    @Html.PopupActionLink("eya", htmlAttributes:new{@class="abtn"})

An Here are the code in Popup.ascx:

<%
    var o = "p" + Model.Prefix + (Model.Action + Model.Controller).ToLower();
%>
<script type="text/javascript">
        $(function () {
            $("#<%=o %>").dialog({
                show: "fade",               
                width: <%=Model.Width %>,
                height: <%=Model.Height %>,
                title: '<%=Model.Title %>',
                modal: <%=Model.Modal.ToString().ToLower() %>,
                <%=Model.Position %>
                resizable: <%=Model.Resizable.ToString().ToLower() %>,               
                <%if(Model.Buttons.Count > 0)
                {%>
                buttons: {
                <%
                var i = 0;
                    foreach (var button in Model.Buttons)
                    {
                        i++;
                    %> 
                     "<%=button.Key %>" : <%=button.Value %><%=i == Model.Buttons.Count ? "": "," %>
                    <%} %>                   
                },
                <%} %>    
                autoOpen: false,
            });
        });

        var l<%=o %> = null;
        function call<%=o %>(<%=JsTools.MakeParameters(Model.Parameters) %>) {
            if(l<%=o %> != null) return;
            l<%=o %> = true;
            <%if(Model.Content == null)
              {%>
            $.get('<%=Url.Action(Model.Action, Model.Controller) %>',           
            <%=JsTools.JsonParam(Model.Parameters) %>           
            function(d){
            l<%=o %> = null;
            $("#<%=o %>").html(d).dialog('open');
            });
            <%
              }else
              {%>
            $("#<%=o %>").dialog('open'); 
            l<%=o %> = null;
              <%}%>           
        } 
</script>
<div id="<%=o %>">
<%=Model.Content %>
</div>

Result :

- It will display four button : Hey, Info, modal info, eya

- when i click "Info" or "modal Info" button then it shows popup but it doesn't display three button : "say hi", "say how are you", "Close it"  below popup.

Please help me this problem.  i use  razor syntax in mv3

Thanks,

Tu. Vo

 

Coordinator
Jan 24, 2011 at 8:35 AM

please download the live demo again and it will work (I've changed it a bit)

the problem was that I used @{Html. instead of @(Html.

you should see 2 info buttons one with an one without the buttons