Динамический грязный код jQuery asp.net mvc, как сделать рефакторинг более чистым

Question

Я создаю очень интерактивный сайт с множеством функций типа ajax.

Я начинаю получать изрядное количество кода Jquery для сообщений, все они втиснуты вместе с моими тегами пчелиного укуса.

Например

<% foreach (var group in Model.GroupBy(item => item.goalId))
{ %>
//$('#AddNew2<%= Html.Encode(group.Key) %>').html('<input type="text" name="" value=""/>');
$('#AddNew2<%= Html.Encode(group.Key) %>').one('click', function(event) {
    $('#AddNew2<%= Html.Encode(group.Key) %>').html('<input id="AddNew2<%= Html.Encode(group.Key) %>" type="text" name="" value=""/>').focus();

        $('#AddNew2<%= Html.Encode(group.Key) %>').bind('keypress', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
        //Do something
        alert("hello");
        }
        //This will display the keycode
        //alert(code);
        //            
        });   
});   

У меня вопрос в два раза

1. Вместо того, чтобы иметь весь этот код внутри представления или шаблона главного сайта, могу ли я выполнить рефакторинг этого где-нибудь еще, возможно, используя элемент управления .ascx? Или я могу просто импортировать файл .js, и в нем все еще работают теги <%%>?

2. Я использую jQuery очень плохо? Мне кажется, что я слишком упрощенно использую селекторы, так как чувствую, что был бы гораздо более чистый способ выбрать нужные мне элементы.

Пожалуйста, помните, что у меня будет много разных списков данных, которые могут быть добавлены / обновлены на одной странице, возможно, до сотен различных элементов и идентификаторов.

Answer 1

Во-первых, вы можете (и, возможно, должны) использовать переменную javascript для хранения значения и просто повторно использовать его. Это улучшит читабельность вашего кода. Во-вторых, я не уверен, что именно вы пытаетесь сделать - похоже, вы настраиваете обработчик кликов для каждого элемента. Я бы посоветовал вам дать им всем класс, а затем использовать этот класс в качестве селектора для применения элемента. В-третьих, создается впечатление, что вы создаете новый элемент с тем же идентификатором, что и существующий элемент. Это было бы нет-нет. Вы должны дать ему новый идентификатор и / или имя. Вам может не понадобиться идентификатор внешнего элемента, если вы используете класс.

Ex.

Компоновка:

<% foreach (var group in Model.GroupBy(item => item.goalId)) { %>
   <p>
     <input type="button" value="Add" class="add-goal" />
     <input type="hidden" value='<%= group.Key %>' />
   </p>
<% } %>

Сценарий

$('.add-goal').one( 'click', function() {
    var goalid = $(this).next('input[type=hidden]').attr('value');
    var parent = $(this).parent().html('');
    $( '<input type="text" id="AddNew2' + goalid
           + '" name="AddNew2' + goalid + '" value="" />' )
        .appendTo(parent)
        .keypress( function(e) {
            ...
        });

});