This is a migrated thread and some comments may be shown as answers.

Submitting from Modal Window using Razor Pages

3 Answers 3249 Views

Window

This is a migrated thread and some comments may be shown as answers.

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" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"></script>

<script src="https://demos.telerik.com/aspnet-core/lib/jquery-validation/jquery.validate.js"></script>

<script src="https://demos.telerik.com/aspnet-core/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.timezones.min.js"></script>

</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

Accepted

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.