Cannot render PartialView in modal popup (Kendo window)

Question

In my MVC application I open a popup window after clicking Create button, but I cannot render my partialview render in it. What I want to do is simply render partialview in the popup dialog and pass model and some parameters (i.e. id=1) to it. Could you please tell me where is the mistake? Thanks in advance.

Note: Any solution using bootstrap modal would also been appreciated...

View:

@(Html.Kendo().Window()
    .Name("CreateWindow")
    .Title("Create Employee")
    .Visible(false)
    .Draggable(true)
    .LoadContentFrom("_Create", "Employee")
    .Width(800)
    .Modal(true)
    .Content("Loading Part List Info...")
    .Draggable()
    .Resizable()
)


<script type='text/javascript'>
$(function () {
    // When your button is clicked
    $('#createbtn').click(function () {
        var createWindow = $('#CreateWindow').data('kendoWindow');
        createWindow.center().open();
    });
});
</script>

Controller:

[HttpGet]
public ActionResult _Create()
{
    var model = repository.Employee;
    return PartialView(model);
}

PartialView:

@model Employee

<div>MY PARTIAL VIEW CONTENT GOES HERE ...</div>

I've tried your code and it's working fine for me. Just missing the closed </script> tag at the end of your View. — Banov
Actually, there is no missing tag in my project and I added the missing tag to above as well. On the other hand, the dialog is opened, but the content from partialview is not rendered and model data cannot be retrieved to the modal window. Any idea? — Jack
As it seems to work for me and not for you, I think the problem must be elsewhere. Have you, just in case, some potential related JavaScript error(s) from you navigator? (from your example, in my side, I can pass model data to the PartialView and display them well into this one) — Banov
I don't like to use the content property to request a partial content. I use the jQuery's load() method on the content div, then after content loaded I show the window. — DontVoteMeDown
@DontVoteMeDown Could you please post your example code by making necessary modifications on the code above? Promise, I will not vote down :) — Jack

Banov Banov · Accepted Answer · 2015-05-29T08:36:32

Here's my working code, hoping it will help you:

View:

@{ ViewBag.Title = "Test"; }
@Styles.Render("~/Content/kendoui/css")

<input type="button" id="createbtn" value="Test kWindow"/>

@(Html.Kendo().Window()
    .Name("CreateWindow")
    .Title("Create Employee")
    .Visible(false)
    .Draggable(true)
    .LoadContentFrom("_Create", "Employee", new { id = 1 })
    .Width(800)
    .Modal(true)
    .Content("Loading Part List Info...")
    .Draggable()
    .Resizable()
)

@Scripts.Render("~/bundles/kendoui")
<script type='text/javascript'>
$(function () {
    // When your button is clicked
    $('#createbtn').click(function () {
        var createWindow = $('#CreateWindow').data('kendoWindow');
        createWindow.center().open();
    });
});
</script>

PartialView:

@model Banov.Controllers.Employee
<div>MY PARTIAL VIEW CONTENT GOES HERE ...</div>
<div>@(Model.Id)</div>
<div>@(Model.FirstName)</div>
<div>@(Model.LastName)</div>

Controller:

using System.Web.Mvc;
namespace Banov.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult _Create(int id)
        {
            var model = new Employee
                    {
                        Id = id,
                        FirstName = "John",
                        LastName = "Doe"
                    };
            return PartialView(model);
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Cannot render PartialView in modal popup (Kendo window)

1 Answers