Model form with JavaScript in EF

Question

How made JavaScript cohesion work? Lets me explain better: I have my index page that call models forms with jquery dialogs, but I don't want put all javascript in index page, instead I want the jquery separate for page.

Model form

This work

    INDEX PAGE
        @section Scripts
        {
        <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready
            (
                function () //<--I dont want this function here
                {
                    Alert1();
                }
           $(".Create").live
            (
                "click", function (e) {
                    var url = $(this).attr('href');

                    $("#dialog-view").dialog
                (
                    {
                        title: 'Create new User',
                        autoOpen: false,
                        resizable: false,
                        height: 600,
                        width: 600,
                        show: { effect: 'drop', direction: "up" },
                        modal: true,
                        draggable: true,
                        open: function (event, ui) {
                            $(this).load(url);
                        },
                        buttons:
                        {
                            "Cancel": function () 
                            {
                                $(this).dialog("close");
                            },
                            "Save": function () 
                            {
                                $(this).dialog('close');
                            }
                        },
                        close: function (event, ui) {
                            $(this).dialog('close');
                        }
                    }
                );
            );
            function Alert1() //<--I dont want this function here
            {
                alert("Star!");
            }     

        </script>
        }

How should work

INDEX PAGE
    @section Scripts
    {
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready
        (
       $(".Create").live
        (
            "click", function (e) {
                var url = $(this).attr('href');

                $("#dialog-view").dialog//<--Only opening dialogs
                (
                    {   ....
        );    

    </script>
    }

And model forms with you specifics javascripts

 @section Scripts
    {
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                Alert1();
            }
        );
        function Alert1() 
        {
            alert("Star!");
        }        
    </script>
    }

Actually, when I made it the model javascript don't work.

I'm using Entity-framework, thanks for everything.

SOLUTION

    <script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                Alert1();
            }
        );
        function Alert1() 
        {
            alert("Star!");
        }        
    </script>

Answer 1

Just remove the section "Scripts" {} from the Model file. You must have the renderSection("scripts") method only called within the Index page, which will only render the scripts files when the Index page loads and ignore any new script loaded.

<script type="text/javascript"> 
    $(document).ready 
    ( 
      function () 
      { 
         Alert1(); 
      } 
   ); 
   function Alert1() 
   { 
      alert("Star!"); 
   } 
</script>