доступ Свойство списка элементы модели с Javascript

Question

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

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

Из html-консоли я вижу, что шаблон именования похож на name = [1] .IsVerified [2] .isVerified и т. Д. Или вообще [counter] .Property Но когда я пытаюсь получить доступ к элементу с помощью JQUery, я не получаю элемент

@model IList<RoyaltyDb.Models.VerifyLicensorModel> 
    <table class="table"> 
     <tr> 
      <th> 
       Licensor 
      </th> 
      <th> 
      Address 
      </th> 
      <th> 
       Status 
      </th> 
      <th> 
       Verify 
      </th> 
     </tr> 
     @for (int i = 0; i < Model.Count(); i++) 
     { 
      <tr> 
       <td>   
        @Html.HiddenFor(m => m[i].Licensor)              
        @Html.DisplayFor(m => m[i].Licensor)         
       </td> 
       <td> 
        @Html.TextAreaFor(m => m[i].Address) 
       </td> 
       <td>        
        @Html.LabelFor(m => m[i].IsVerified)       
        @Html.CheckBoxFor(m => m[i].IsVerified, new { @disabled = "disabled" }) 
        <br />     
        @Html.HiddenFor(m => m[i].ActionId) 
        @Html.HiddenFor(m => m[i].ReferenceId)         
       </td> 
       <td> 
        <a onclick="SetProperties('@Model[i].Licensor')" class="btn">Verify</a> 
       </td> 
      </tr> 
     } 
    </table> 


    <!-- Modal HTML --> 
    <div id="VerifyLicensorModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title">Verify Licensor</h4> 
        <input type="hidden" id="targetPopup" /> 
       </div> 
       <div class="modal-body" id="VerifyLicensorDetails"> 

       </div> 
       <div class="modal-footer"> 
        <a class="btn btn-primary" onclick="confirmLicensor()">Confirm</a> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div> 
    function SetProperties(name) 
    { 
     //Showing a POPUp Here on element VerifyLicensorModal 
    } 
    function confirmLicensor() 
    { 
     //Set the corresponding IsVerified checkbox to true 
     //Set values of ActionId and ReferenceId params in the hidden fields 
     //ActionId ReferenceId 
    } 

Так как я могу установить значение поля свойств из JavaScript

Answer 1

Вместо того, загрязняя разметку с поведением, используйте Unobtrusive Javascript. Дайте вам связать имя класса и добавьте значение Licensor собственности как атрибут data- и переместить 2 скрытые входы в ту же ячейку таблицы для облегчения выбора

<td> 
    @Html.HiddenFor(m => m[i].ActionId) 
    @Html.HiddenFor(m => m[i].ReferenceId) 
    <a href="#" data-licensor="@Model[i].Licensor" class="btn verify">Verify</a> 
</td> 

var currentCell; 
$('.verify').click(function() { 
    currentCell = $(this).closest('td'); 
    licensor = $(this).data('licensor'); 
    // get your partial view and display the popup 
}); 

Аналогично дают кнопку подтверждения уникальный id атрибут

$('#confirm').click(function() { 
    var inputs = currentCell.children('input'); 
    inputs.eq(0).val(....); // set the value of ActionId 
    inputs.eq(1).val(....); // set the value of ReferenceId 
}); 

Обратите внимание, что вы задаете вопрос Установите соответствующий флажок IsVerified в значение true. Потому что это в предыдущей ячейке, вы могли бы сделать это с помощью

currentCell.prev('td').find('input[type="checkbox"]').prop(checked, true); 

однако вы отключили флажок с помощью new { @disabled = "disabled" }, что означает, что обыкновение отправлять обратно, но связанный скрытый вход, порожденный CheckBoxFor() будет, а это означает, что независимо от проверки это, вы всегда будете отправлять назад false

Если флажок предназначен для визуального представления, что проверка завершена, то лучшим подходом будет включение скрытого ввода, связанного с IsVerified и несвязанным флажком.

<td> 
    <input type="checkbox" disabled="disabled" /> 
</td> 
<td> 
    @Html.HiddenFor(m => m[i].ActionId) 
    @Html.HiddenFor(m => m[i].ReferenceId) 
    @Html.HiddenFor(m => m[i].IsVerified) 
    <a href="#" data-licensor="@Model[i].Licensor" class="btn verify">Verify</a> 
</td> 

Затем вы можете «проверить» флажок, как указано выше, и включают в себя

inputs.eq(2).val("True"); // set the value of IsVerified 

в сценарии

Вы можете также рассмотреть вопрос об исключении «Подтвердить» ссылку из DOM раз закрыть всплывающее окно (если вы не хотите, чтобы проверить его снова

currentCell.children('a').remove(); 

Answer 2

<tbody>   
@for (int i = 0; i < Model.Count(); i++) 

     { 
      <tr> 
       <td>  
        <input typye="hidden" class="index" value="@i"/> 
        @Html.HiddenFor(m => m[i].Licensor)              
        @Html.DisplayFor(m => m[i].Licensor ,{@id="liecenor-@i"})         
       </td> 
          </tr> 
     } 
</tbody> 
     </table> 
<script> 

    $(".table > tbody> tr").each(function() { 
    var index=$(this).find('.index').val(); 
    var $id="#licensor-"+index;  
    alert($($id).val()); 
} 
</script>