MVC3 View as Pop up window

Question

I want to open view as pop up window.

Here is my controller

 #region Send Voting Email
    [HttpGet]
    [OutputCache(Location = OutputCacheLocation.None)]
    [Authorize]
    public ActionResult SendVotingEmail(string CampID)
    {
        try
        {
            var model = (new CampManager()).GetCampDetails(CampID);
            var user = (Bank.Security.BankMembershipUser)Membership.GetUser();

            Models.Camp.EmailModel VotingModel = new Models.Camp.EmailModel();
            VotingModel.CampID = CampID;
            VotingModel.BankName = user.BankName;
            VotingModel.Message = "";

            return RedirectToAction("Send", VotingModel);
            //(new CampManager()).SendEmail(CampID, user.BankName,"");
            //return Content("Email send successfully.");
        }
        catch(Exception ex)
        {
            return Content("Sorry, An error occured while sending Voting Email. Please contact Administrator.");
        }
    }
    #endregion

    #region Send Voting mail popup
    [HttpGet]
    public ActionResult Send(Models.Camp.EmailModel model)
    {
        return View(model);
    }
    [HttpPost]
    public ActionResult Send(Models.Camp.EmailModel model,string CampID)
    {
        (new CampManager()).SendEmail(model.CampID,model.BankName,model.Message);
        return Content("Email send successfully.");
    }
    #endregion

Sendmail.cshtml

<input type="button" id="ClickMe" name = "ClickMe" value="Send Voting Email" onclick="SendEmail('@Model.CampID');" />
<script type="text/javascript">
        $(function () {
            $('#ClickMe').click(function () {
                window.open('/Camp/Send/', 'mail', 'height=' + (window.screen.height - 100) + ',width=200,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');
            });
        });
 function SendEmail(CampID) {
        $('#sendEmailProgressBar').css("visibility", "visible");        
        $.get('/bank/Camp/SendEmail?CampID=' + CampID, function (data) {
            $('#sendEmailProgressBar').css("visibility", "collapse");        
            alert(data);
        });
</script>

Send.cshtml

@model Bank.Models.Camp.EmailModel

@{
    Layout = null;
 }

<!DOCTYPE html>

 <html>
<head>
    <title>Send</title>
</head>
<body>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>EmailModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CampID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CampID)
            @Html.ValidationMessageFor(model => model.CampID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.BankName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BankName)
            @Html.ValidationMessageFor(model => model.BankName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Message)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Message)
            @Html.ValidationMessageFor(model => model.Message)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

I want to open pop windows When I click on ClickMe button of SendMail.cshtml. When I cilck on this button Pop up window open but it shows code of Send.cshtml view. I don't know why this happen. Is there any changes in my code to open pop up window?

error

is tag with id ClickMe a submit button? – Behnam Esmaili Dec 13 '12 at 09:23 — Behnam Esmaili, Dec 13 '12 at 09:23
which view do you want open in popup window? – Shivkumar Dec 13 '12 at 09:42 — Shivkumar, Dec 13 '12 at 09:42
@Shivkumar I want Send.cshtml open as a pop up window – Ajay Dec 13 '12 at 09:44 — Ajay, Dec 13 '12 at 09:44
i have tested it with no problem. – Behnam Esmaili Dec 13 '12 at 09:46 — Behnam Esmaili, Dec 13 '12 at 09:46
@BehnamEsmaili Can you post your code? – Ajay Dec 13 '12 at 09:52 — Ajay, Dec 13 '12 at 09:52

score 2 · Accepted Answer · answered Dec 13 '12 at 09:54

Try this

    <script type="text/javascript">
         function OpenWindow(query, w, h, scroll) {
    var l = (screen.width - w) / 2;
    var t = (screen.height - h) / 2;

    winprops = 'resizable=0, height=' + h + ',width=' + w + ',top=' + t + ',left=' + l + 'w';
    if (scroll) winprops += ',scrollbars=1';
    var f = window.open(query, "_blank", winprops);
}


            $(function () {
                $('#ClickMe').click(function () {
                     OpenWindow('@Url.Action("Send","Camp")', width, height, true); 
                });
            });
    </script>

// In Controller

[HttpGet]
    public ActionResult Send()
    {

      //prepared your model object here
        var model = new Models.Camp.VotingEmailModel();
        return View(model);
    }

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

check this question.the second answer is exactly what you want.it will open up a new window when you submit your form.you can even customize window settings before submitting your form to the new window.

edited May 23 '17 at 12:29

Community

1
1

answered Dec 13 '12 at 09:59

Behnam Esmaili

5,835
6
32
63

have you tested another action with another view? – Behnam Esmaili Dec 13 '12 at 10:51
I test it in one sample project works perfect but in my original project I use click event of button. so I think that's why I am not getting my pop up – Ajay Dec 13 '12 at 10:58
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21070/discussion-between-behnam-esmaili-and-ajay) – Behnam Esmaili Dec 13 '12 at 11:00

MVC3 View as Pop up window

2 Answers2