Loading Content

You can load the Window content initially or dynamically at a later stage.

Static Content

The Window exposes a Content() configuration method which allows you to load predefined HTML content. This is the most commonly preferred approach:

    @(Html.Kendo().Window()
        .Name("window")
        .Title("Static content")
        .Content(@<text>
                <strong>Static content</strong> of the Window.
        </text>)
    )

Load-on-Demand Content

In some scenarios, it is required to configure the Window to load dynamic content. Here are the steps to achieve that:

1. Create a new action method which renders the view.

   public IActionResult Index()
   {
       return View();
   }
   

2. Create an action method which renders the content.

   public IActionResult AjaxContent()
   {
       return View();
   }
   

3. Add a Window on the page. Its definition will contain the LoadContentFrom() setting which will point to the Content Controller Action:

       @(Html.Kendo().Window()
           .Name("window") // The name of the Window is mandatory. It specifies the "id" attribute of the widget.
           .Title("About Alvar Aalto") // Set the title of the Window.
           .LoadContentFrom("AjaxContent", "Window") //Define the Action and Controller names.
   
       )
   

You can also use another .LoadContentFrom() overload to pass additional details to the action method returning the Window's content:

@(Html.Kendo().Window()
        .Name("window") 
        .Title("User Details") 
        .LoadContentFrom("UserDetails", "Window", new { userId = 10}) //Define the Action, Controller names and additional route values.
    )

public IActionResult UserDetails(int userId)
{
    MyUserViewModel model = myService.GetUserDetails(userId)
    //fetch required details and pass them to the View 

    return View(model);
}

To refresh or change the Window's content on the client, once the Window has been initialized, you can use the Client-side API of the Window and the refresh method.

See Also

• Server-Side API