Rectangle 27 7

So you start by writing a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

then a Modal.cshtml partial that will contain the partial markup that you want to display in the modal:

<div>This is the partial view</div>

and an Index.cshtml view containing the button which will show the partial into a modal when clicked:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.modal').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true
            }).load(this.href, {});

            return false;            
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { @class = "modal" })

Obviously in this example I have put the directly scripts into the Index view but in a real application those scripts will go into separate javascript file.

Thank you very much for this example it helps alot. One further question, I have integrated in MVC3 in to my web forms application. So the control that triggers the modal is on the web forms. I don't think I can use @Html.ActionLink in web forms, is there an alternative?

Of course that there is an alternative. All that the Html.ActionLink helper generates is an <a> tag. So you could generate this markup in your web forms application.

Hello Darin, i have tried using this like stackoverflow.com/questions/15876993/ but i still just get a new page. Any idea?

is it work in NopCommerce !!!!??

c# - load partial view in to a modal popup - Stack Overflow

c# jquery asp.net-mvc-3 partial-views
Rectangle 27 17

You could use the jquery UI Dialog for the popup. Let's have a small setup here.

We would have a view model for the main form:

public class MyViewModel
{
    public string ValueId { get; set; }
    public IEnumerable<SelectListItem> Values 
    { 
        get 
        {
            return new[]
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
            };
        } 
    }

    public string NewValue { get; set; }
}
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("thanks for submitting");
    }
}
~/Views/Home/Index.aspx
<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" 
%>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <% using (Html.BeginForm()) { %>
        <%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>
        <br/>
        <%= Html.EditorFor(x => x.NewValue) %>
        <%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %>
        <button type="submit">OK</button>
    <% } %>

    <div id="dialog"></div>

</asp:Content>

then we could take care for the popup. We define a view model for it:

public class NewValueViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

a controller:

public class NewValueController : Controller
{
    public ActionResult New()
    {
        return PartialView(new NewValueViewModel());
    }

    [HttpPost]
    public ActionResult New(NewValueViewModel model)
    {
        var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
        return Json(new { newValue = newValue });
    }
}
~/Views/NewValue/New.ascx
<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>" 
%>

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %>
    <%= Html.EditorFor(x => x.Foo) %>
    <%= Html.EditorFor(x => x.Bar) %>
    <button type="submit">OK</button>
<% } %>

Now all that's left is to write a bit of javascript to wire everything up. We include jquery and jquery ui:

<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>

and a custom javascript file that will contain our code:

$(function () {
    $('#new-value-link').click(function () {
        var href = this.href;
        $('#dialog').dialog({
            modal: true,
            open: function (event, ui) {
                $(this).load(href, function (result) {
                    $('#new-value-form').submit(function () {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (json) {
                                $('#dialog').dialog('close');
                                $('#NewValue').val(json.newValue);
                            }
                        });
                        return false;
                    });
                });
            }
        });
        return false;
    });
});

tried it, but atm, instead of it popping up, it just opens a new page. was wondering, which part of the jquery triggers the modal?

It's the subscription to the .click() event of the link. Make sure that you have properly included all the 3 javascript files (jquery-1.5.1.min.js, jquery-ui-1.8.11.js and my.js - containing the script I have shown in that order) and that there are no errors in the javascript console.

saw the problem, it was cuz of an extra '});' lol! thanks again!

btw, sorry for the follow up questions. but,i wanted to update the <%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>with the New Value that I added.Will the return return Json(new { newValue = newValue }); handle that? how will it become a selectlistitem for the dropdown, just curious.

You could add a new <option> item to the dropdown in the success handler instead of setting the NewValue field.

asp.net mvc - MVC C# modal popup - Stack Overflow

asp.net-mvc jquery modal-dialog jquery-dialog
Rectangle 27 17

You could use the jquery UI Dialog for the popup. Let's have a small setup here.

We would have a view model for the main form:

public class MyViewModel
{
    public string ValueId { get; set; }
    public IEnumerable<SelectListItem> Values 
    { 
        get 
        {
            return new[]
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
            };
        } 
    }

    public string NewValue { get; set; }
}
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("thanks for submitting");
    }
}
~/Views/Home/Index.aspx
<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" 
%>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <% using (Html.BeginForm()) { %>
        <%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>
        <br/>
        <%= Html.EditorFor(x => x.NewValue) %>
        <%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %>
        <button type="submit">OK</button>
    <% } %>

    <div id="dialog"></div>

</asp:Content>

then we could take care for the popup. We define a view model for it:

public class NewValueViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

a controller:

public class NewValueController : Controller
{
    public ActionResult New()
    {
        return PartialView(new NewValueViewModel());
    }

    [HttpPost]
    public ActionResult New(NewValueViewModel model)
    {
        var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
        return Json(new { newValue = newValue });
    }
}
~/Views/NewValue/New.ascx
<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>" 
%>

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %>
    <%= Html.EditorFor(x => x.Foo) %>
    <%= Html.EditorFor(x => x.Bar) %>
    <button type="submit">OK</button>
<% } %>

Now all that's left is to write a bit of javascript to wire everything up. We include jquery and jquery ui:

<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>

and a custom javascript file that will contain our code:

$(function () {
    $('#new-value-link').click(function () {
        var href = this.href;
        $('#dialog').dialog({
            modal: true,
            open: function (event, ui) {
                $(this).load(href, function (result) {
                    $('#new-value-form').submit(function () {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (json) {
                                $('#dialog').dialog('close');
                                $('#NewValue').val(json.newValue);
                            }
                        });
                        return false;
                    });
                });
            }
        });
        return false;
    });
});

tried it, but atm, instead of it popping up, it just opens a new page. was wondering, which part of the jquery triggers the modal?

It's the subscription to the .click() event of the link. Make sure that you have properly included all the 3 javascript files (jquery-1.5.1.min.js, jquery-ui-1.8.11.js and my.js - containing the script I have shown in that order) and that there are no errors in the javascript console.

saw the problem, it was cuz of an extra '});' lol! thanks again!

btw, sorry for the follow up questions. but,i wanted to update the <%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>with the New Value that I added.Will the return return Json(new { newValue = newValue }); handle that? how will it become a selectlistitem for the dropdown, just curious.

You could add a new <option> item to the dropdown in the success handler instead of setting the NewValue field.

asp.net mvc - MVC C# modal popup - Stack Overflow

asp.net-mvc jquery modal-dialog jquery-dialog
Rectangle 27 171

You can access parent window using 'window.opener', so, write something like the following in the child window:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>

I didn't know window.opener, thanks! I always put the caller window in a variable in the contentWindow of the child. :-/

this is fantastic. So easy. So straight forward. I saw another answer with window.opener that was awful.

If you don't control JavaScript on the child page (e.g. OAuth flow) then you will need to check popupWindow.closed using setInterval like in @Zuul's solution.

javascript - Open popup and refresh parent page on close popup - Stack...

javascript html javascript-events
Rectangle 27 8

1) When open model popup and click on the background popup should not close.

data-keyboard="false" data-backdrop="static"
<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
    // Modal HTML Markup
</div>

2) When open model popup background should not blur. meaning opening model popup background should not affect any way.

.modal-backdrop
display:none;
.modal-backdrop {
    display:none;
}

3) After open model popup user can also work on the background that time popup should not close.

.modal-open .modal
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

SideNote: you may need to adjust the width of modal according to screen size with media queries.

.modal-backdrop {
  display: none !important;
}
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

thank you so much got solution of all problems. but 1 more problem i couldn't fix height of .modal-open .modal css. height is spreading till last of the page there i cannot click on the background. thanks

when you open the modal, did you see the page scroll bar or it's hidden? if modal open does the page background scroll able and last did you set the fix height, by default modal inherit it's height from the content inside it?

when open model page background scroll is not able to visible.

.modal-open {overflow: auto !important;}

css - Enable background when open bootstrap modal popup - Stack Overfl...

css twitter-bootstrap bootstrap-modal
Rectangle 27 3

All a usercontrol(.ascx) file is is a set of controls that you have grouped together to provide some reusable functionality. The controls defined in it are still added to the page's control collection (.aspx) durring the page lifecylce. The ModalPopupExtender uses javascript and dhtml to show and hide the controls in the usercontrol client-side. What you are seeing is that the click event is being handled client-side by the ModalPoupExtender and it is canceling the post-back to the server. This is the default behavior by design. You certainly can access the page's control collection from the code-behind of your usercontrol though because it is all part of the same control tree. Just use the FindControl(xxx) method of any control to search for the child of it you need.

c# - How can I pass data from an aspx page to an ascx modal popup? - S...

c# asp.net asp.net-ajax
Rectangle 27 1

If you are willing to incur a hit on postback then you can create an empty linkbutton and use that as the target of your modal popup. Then in your code behind call it's modalpopup.show method along with the code to put what you want into the popup.

<asp:Button runat="server" ID="HiddenControl" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="Panel1"   TargetControlID="HiddenControl" />

<asp:Button runat="server" ID="VisibleControl" text=click me />
<asp:LinkButton runat="server" ID="visibleControl2">click me again</asp:linkbutton>

Simply fire this off on either the VisibleControl.click or visibleControl2.click events.

ModalPopupExtender1.show()

asp.net - How to make 5 links to open the same modal popup? - Stack Ov...

asp.net ajax asp.net-ajax modalpopupextender
Rectangle 27 5

I think it depends on the way you are adding the popup, check the documentation :

create or add popup takes four parameters and fourth parameter is a child list

childList:String (default = null) The child list in which to add the popup. One of PopUpManagerChildList.APPLICATION, PopUpManagerChildList.POPUP, or PopUpManagerChildList.PARENT (default).

So try adding all the popup's to a particular child-list and then play around with the size of the list.

I'll play with those and let you know. They're not very clear how to access the childlist.

It was the right idea, but I couldn't find documentation about what the childList option means, until I found this: blog.flexmonkeypatches.com/2007/10/04/flex-close-all-popups. POPUP setting attaches the popup to the systemManager.popUpChildren list.

flash - Flex PopUpManager: How can I detect the existence of a modal p...

flex flash actionscript-3 actionscript
Rectangle 27 2

The more correct formulation should be "Is it possible with Bootstrap 3?" since Yii2 is integrated with Bootstrap 3 and provide widgets for most of js components including Modal.

Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
  • Close first modal, open second; when closing second, open first again. If the size of the second window is the same as first or more than first, visually you can't tell that first window is closed (don't sure about the animations though).

twitter bootstrap 3 - Open modal popup in another modal popup - Stack ...

twitter-bootstrap-3 popup yii2 bootstrap-modal
Rectangle 27 2

The more correct formulation should be "Is it possible with Bootstrap 3?" since Yii2 is integrated with Bootstrap 3 and provide widgets for most of js components including Modal.

Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
  • Close first modal, open second; when closing second, open first again. If the size of the second window is the same as first or more than first, visually you can't tell that first window is closed (don't sure about the animations though).

twitter bootstrap 3 - Open modal popup in another modal popup - Stack ...

twitter-bootstrap-3 popup yii2 bootstrap-modal
Rectangle 27 25

The pop-up window does not have any close event that you can listen to.

On the other hand, there is a closed property that is set to true when the window gets closed.

You can set a timer to check that closed property and do it like this:

var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000);

Somewhat hackish but I think using a timer will work the best across all browsers.

This is also the best solution if the popup has several pages before it closes, as the onunload event is triggered only after the user navigates away from the first page.

javascript - Open popup and refresh parent page on close popup - Stack...

javascript html javascript-events
Rectangle 27 3

In case you have no control on the popups that are created (i.e. you've got a library component that creates popups and the component has not been made by you so you cannot modify it) you can still find all the popups in the application without adding them to a specific list. If interested in a different approach, you can check my blog post at http://www.devahead.com/blog/2009/12/getting-all-the-popups-in-a-flex-application/

flash - Flex PopUpManager: How can I detect the existence of a modal p...

flex flash actionscript-3 actionscript
Rectangle 27 1

Been a while since I posted this, but the problem occasionally resurfaces and I think I finally found an answer to it.

The AJAX Toolkit's modal popup javascript disables all DropDownLists on the page because they show through to the highest Z-level in IE6. But if something causes a postback while the modal is showing (like a badly managed timer) then the invisible state gets recorded into the viewstate for the DDLs.

One easy way around it is to just put the offending DDLs in an update panel, so they properly get refreshed on updates and don't get stuck. The more complex way is to ensure nothing causes extraneous postbacks while the modal is showing. The best way would probably be to ditch Webforms and all the baggage with it, but that's pretty much not going to happen.

c# - Timer causes dropdownlists to disappear permanently after a modal...

c# asp.net ajax asp.net-ajax
Rectangle 27 1

can you show all view code did you use html.beginform try this

<% using (Html.BeginForm("ChkBxSendMail", "here controler name", FormMethod.Post))
 { %>  
<table>
<tr> </tr> 
<% foreach (var item in Model) { %>
<tr> <td> <input type="checkbox" name="check" value="<%: item.ProfileId %>" /> </td>
<td> <%: Html.DisplayFor(modelItem => item.FirstName) %> </td>
<td> <%: Html.DisplayFor(modelItem => item.LastName) %> </td> 
 </tr> 
 </table>
 <input type="submit"/>
<% } %>
<%} %>

No, It checkbox is in a table

<table> <tr> </tr> <% foreach (var item in Model) { %> <tr> <td> <input type="checkbox" name="check" value="<%: item.ProfileId %>" /> </td> <td> <%: Html.DisplayFor(modelItem => item.FirstName) %> </td> <td> <%: Html.DisplayFor(modelItem => item.LastName) %> </td> </tr> <% } %>

No its not working..

asp.net mvc 3 - Passing Checkbox selected value to modal popup - Stack...

asp.net-mvc-3
Rectangle 27 2

This happens because jQuery removes the control from the form and puts it at the end of the body when it creates the dialog. When it submits the form, the AsyncFileUpload control is no longer in the form, so there is nothing to postback to the server for this control and that's why it is not posting the file back. What you need to do is put the dialog div back into the form after jQuery creates it.

$('#yourDialogID').parent().appendTo('form');

asp.net - asyncfileupload in jquery modal popup - Stack Overflow

asp.net jquery-ui ajaxcontroltoolkit asyncfileupload
Rectangle 27 2

This happens because jQuery removes the control from the form and puts it at the end of the body when it creates the dialog. When it submits the form, the AsyncFileUpload control is no longer in the form, so there is nothing to postback to the server for this control and that's why it is not posting the file back. What you need to do is put the dialog div back into the form after jQuery creates it.

$('#yourDialogID').parent().appendTo('form');

asp.net - asyncfileupload in jquery modal popup - Stack Overflow

asp.net jquery-ui ajaxcontroltoolkit asyncfileupload
Rectangle 27 10

and

<body onbeforeunload="refreshAndClose();">

but as a good UI design, you should use a Close button because it's more user friendly. see code below.

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            window.opener.location.reload(true);
            window.close();
        });
    });
</script>

<input type='button' id='btn' value='Close' />

when the popup window is closed, not when the user clicks a button to refresh the page and close the popup window

@gengkev, i knew OP wanted to attach the event to window close, but i believe using a button is a better UI design. however, i included code for both. please advise.

javascript - Open popup and refresh parent page on close popup - Stack...

javascript html javascript-events
Rectangle 27 1

<uc1:ChildPage ID="MyModalPage" runat="server" />

The aspx code-behind to grab and open the ModalPopupExtender (named modalPopup) would look like this:

AjaxControlToolkit.ModalPopupExtender mpe = 
    (AjaxControlToolkit.ModalPopupExtender) 
          MyModalPage.FindControl("modalPopup");
mpe.Show();

c# - How can I pass data from an aspx page to an ascx modal popup? - S...

c# asp.net asp.net-ajax
Rectangle 27 1

Make sure your tab bar controller isn't the main view controller of the window.

You want to add the tab bar controller and the iAd view as siblings to the window object, or define another view controller that owns both, setting up the layout of its view either in a xib or in -loadView. Hope this puts you in the right direction.

This is not what I ended up doing, but it is a good answer.

I already had UIView animation functionality to toggle the ad for various reasons like the network is down, or has come back up; just like Apple wants you to do. I decided that when a modal popup is present, the ad shouldn't think it's being shown (even if the ad knows this), so I slide it out of the way as the modal window appears. By using my already present functionality, I could better control the flow of ads and solve my problem.

iphone - TabBarController's frame is affected by modal popup - Stack O...

iphone ios ios4