Telerik Forums / UI for ASP.NET Core
This is a migrated thread and some comments may be shown as answers.

Submitting from Modal Window using Razor Pages

3 Answers 2400 Views
Window
This is a migrated thread and some comments may be shown as answers.
Laurie
Top achievements
Rank 1
Iron
Laurie asked on 26 Oct 2018, 03:51 PM

Hi! My app uses Razor Pages and I'm trying to do the following:

1. Open a modal dialog, which is itself a Razor Page with a model.

2. Submit from that modal dialog and call the OnPost method in its model. 

When I click submit, it simply closes the dialog and never calls the OnPost method.

Here's my code:

First, the calling page, Customer.cshtml:

@page
@addTagHelper "*, Kendo.Mvc"
@model MySite.Test.CustomerModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Customer</title>
    <link href="//kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" />
 
</head>
<body>
    @{
        string[] actions = new string[] { "Close" };
    }
    <kendo-window name="window"
        modal="true",
        title="Add a New Customer"
        draggable="true"
        resizable="true"
        width="800" ,
        on-close="onClose" ,
        style="display:none" ,
        content-url="@Url.Content("/Test/AddCustomer")" ,
        actions="actions">
        <content>
            loading user info...
        </content>
        <popup-animation enabled="true" />
    </kendo-window>
 
    <button id="undo" class="btn btn-sm btn-outline-primary right">Click here to open the window.</button>
    <div class="responsive-message"></div>
    <script>
        function onClose() {
            $("#undo").show();
        }
 
        $(document).ready(function () {
            $("#undo").bind("click", function () {
                $("#window").data("kendoWindow").open();
                $("#window").data("kendoWindow").center();
                $("#undo").hide();
            });
        });
    </script>
</body>
</html>

It has a trivial page model, which I will not include here.

Then the Modal Dialog Page, AddCustomer.cshtml:

@page
@addTagHelper "*, Kendo.Mvc"
@model MySite.Test.AddCustomerModel
@{
    Layout = "";
}
 
<div class="container-fluid body-content">
    <form method="post">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Customer.FirstName" class="control-label"></label>
            <input asp-for="Customer.FirstName" class="form-control" autofocus />
            <span asp-validation-for="Customer.FirstName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Customer.Middle" class="control-label"></label>
            <input asp-for="Customer.Middle" class="form-control" />
            <span asp-validation-for="Customer.Middle" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Customer.LastName" class="control-label"></label>
            <input asp-for="Customer.LastName" class="form-control" />
            <span asp-validation-for="Customer.LastName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>

and its non-trivial model, which contains the OnPost that is never being called:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
 
namespace MySite.Test
{
    public class AddCustomerModel : PageModel
    {
        [BindProperty]
        public AddCustomerViewModel Customer { get; set; }
 
        public void OnGet()
        {
            Customer = new AddCustomerViewModel();
        }
        public ActionResult OnPost()
        {

             // I am never getting to this method.

            if (ModelState.IsValid)
            {
                // Do some stuff
                return Redirect("/Test/Customer");
            }
 
            return Page();
        }
 
        public class AddCustomerViewModel
        {
            [MaxLength(256)]
            [Display(Name = "First Name")]
            [Required]
            public string FirstName { get; set; }
            [MaxLength(256)]
            [Display(Name = "Middle Name")]
            [Required]
            public string Middle { get; set; }
            [MaxLength(256)]
            [Display(Name = "Last Name")]
            [Required]
            public string LastName { get; set; }
 
        }
    }
}

 

I'm kinda stumped and the only example I can fine is for Razor Views, not Razor Pages. Please advise.

Thanks!

3 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 31 Oct 2018, 02:43 PM
RazorPage.zip
Hi Laurie,

Attached you will find a small sample following the snippets from your initial post. What I have altered in order to force the posted form to go to the OnPost() method in the AddCustomerModel class was to force the Kendo Window to display its content in an iframe:
<kendo-window name="window"
              modal="true"
              title="Add a New Customer"
              draggable="true"
              resizable="true"
              width="800"
              on-close="onClose"
              style="display:none"
              content-url="@Url.Content("/AddCustomer")"
              actions="actions"
              iframe="true">
    <content>
        loading user info...
    </content>
    <popup-animation enabled="true" />
</kendo-window>

That would allow the <form> to be submitted to the AddCustomer page, instead of submitting directly to the Index page.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Laurie
Top achievements
Rank 1
Iron
answered on 31 Oct 2018, 04:18 PM

Thanks, Veselin, that works great!

One additional question: how can you close an iframe window from within that window?

0
Laurie
Top achievements
Rank 1
Iron
answered on 31 Oct 2018, 04:23 PM
Never mind. Got the answer from https://www.telerik.com/forums/close-window-from-within-external-content.
Tags
Window
Asked by
Laurie
Top achievements
Rank 1
Iron
Answers by
Veselin Tsvetanov
Telerik team
Laurie
Top achievements
Rank 1
Iron
Share this question
or