Home/ Questions/Q 6116481
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:12:39+00:00

I want to render a view when user clicks on Add New button on

  • 0

I want to render a view when user clicks on “Add New” button on the index page. I have an Action in the controller which handles Create post. Problem here is that i am not able to load the View. When i click “Add New” button, nothing happens. Can someone please point out what am i missing here?

This is how my Index view looks like:

<script type="text/javascript">

    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Add New Item',
            modal: true,
            open: function (event, ui) {
                $(this).load('@Url.Action("Country/Create")');
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#AddNew').click(function () {
            alert('Hello');
            $('#dialog').dialog('open');
        });
    });
</script>

<button id="AddNew" type="button">Add New</button>

<div id="dialog" style="overflow: hidden;">

</div>

Script references:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>


    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>


</head>

<body>
    @RenderBody()
</body>
</html>

–Solution–

I was missing jquery.ui.all.css reference.

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try putting your Javascript code between

    $(document).ready(function () {
...
});
    • 0