Как переместить java-скрипт в пользовательский файл, а затем вызвать его из приложения MVC?

Question

Мне нужно переместить скрипт (который открывает модальное окно), изнутри представления в пользовательский файл сценария, но мне нужна помощь.

Это часть вида Index:

<div class=""> 
    <button id="showModal">Click Me</button> 
</div> 

div id="theModal" class="modal fade"> 
    <div class="modal-dialog"> 
     // Code 
     ... 
    </div> 
</div> 

@section Scripts { 
    <script> 
     $(function() { 
      var showModal = function() { 
       $("#theModal").modal("show"); 
      }; 
      $("#showModal").click(showModal); 
     }); 
    </script> 
} 

Я знаю, что мне нужно обручем вверх функцию кнопки OnClick событие и добавить ссылку на файл сценария, но вопрос: Что такое правильный способ написать сценарий как функцию в файле, передать аргументы и как правильно называть его с помощью кнопки?

Answer 1

Вы отметили MVC 4, поэтому я предполагаю, что вы будете использовать комплектщик.

Сначала убедитесь, что файл сценария, созданный в связке, искать BundleConfig.cs и добавить пакет для нового файла:

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(
    "~/Scripts/sample.js")); 

Затем на ваш взгляд:

@Scripts.Render(
    "~/bundles/myBundle") 

Здесь приведенный конкретный пример:

Предположим, файл sample.js со следующим содержанием:

showAlert = function(){ 
    alert('hey an alert!); 
}; 

На ваш взгляд:

<script> 
$(function() { 
    $('#showModal').on('click', function() { 
     showAlert(); 
    }); 
}); 
</script> 

Это добавит showAlert в качестве обработчика событий для щелчка фиксатора ShowModal.

Answer 2

Включая это в свой внешний файл javascript (и ссылаясь на него в вашем представлении), убедитесь, что обработчик кликов установлен на кнопку. jQuery docs

$(function() { 
    $('#showModal').on('click', function() { 
     $("#theModal").modal("show"); 
    }); 
}); 

Какой тип аргументов вы хотите передать это событие? Чего вы хотите от нее вернуться?