Display a Dialog with custom position in ASP.NET MVC Dialog control

29 Jul 2021 / 1 minute to read

By default, the dialog is displayed in the center of the target container. The dialog position can be set using the Position property by providing custom X and Y coordinates. The dialog can be positioned inside the target based on the given X and Y values.

razor

controller.cs

<div id="container" style="height:400px;">
    @Html.EJS().Dialog("firstDialog").Header("Position-01").Content("The dialog is positioned at {X: 160, Y: 14} co-ordinates.").Position(p => p.X(160).Y(12)).Target("#container").Width("360px").Height("120px").Render()
    @Html.EJS().Dialog("secondDialog").Header("Position-02").Content("The dialog is positioned at {X: 160, Y: 240} co-ordinates.").Position(p => p.X(160).Y(240)).Target("#container").Width("360px").Height("120px").Render()
</div>

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Output be like the below.

dialog

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!