Access Property of a List Item Model from Javascript

Question

I am using Javascript to edit the property of a row in a List of items and i am following a HTML view like this

ON edit button click i am showing a popup and on Save event of popup i want to set the properties of a selected row .

From html console i can see naming pattern is like name=[1].IsVerified [2].isVerified etc or in general [counter].Property But when i try to access element using JQUery i am not getting the element

    @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
    }

So how can i set the value of a property field from javascript

Are you wanting to open the popup and populate its controls based in the values in the row the link is in? — user3559349
– user3559349, Commented Aug 21, 2015 at 5:40
Nope . I am getting value of first column which is passed via onclick inside popup [ which is a partial view] . On close of popup i want to rest the other fields in the selected row . Question is how can i access the other elements I have a unique Id say TempId for every row and thats also available. So i want a solution to access hidden field in row number — Sebastian
– Sebastian, Commented Aug 21, 2015 at 5:43
Don't try to use id attributes, instead use relative selectors (relative to the link you clicked). But you have disabled the checkbox so it value will not post back anyway. — user3559349
– user3559349, Commented Aug 21, 2015 at 5:48
But how can i keep track of selector .Since flow is like on click of anchor tag Popup will be visible [ Its a JQuery GET and calling a partial view].Now the flow of events are happening in popup only and after all data entry on popup form we are saving Popup data . So how can i keep selector all this time? — Sebastian
– Sebastian, Commented Aug 21, 2015 at 5:52
Have at look at the answer - but note the last paragraph - its not going to work as you think it will. Is the idea that you want a visual indication that you have done the verification but dont want the user to be able to check or uncheck the checkbox? If so let me know and I'll add a suggested alternative — user3559349
– user3559349, Commented Aug 21, 2015 at 6:06

score 1 · Accepted Answer · 2015-08-21 07:32:17Z

Rather than polluting your markup with behavior, use Unobtrusive Javascript. Give you link a class name and add the value of the Licensor property as a data- attribute and move the 2 hidden inputs into the same table cell for easier selection

<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
});

Similarly give the confirm button a unique id attribute

$('#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
});

Note that you question indicates Set the corresponding IsVerified checkbox to true. Because this is in the previous cell, you could do it using

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

however you have disabled the checkbox using new { @disabled = "disabled" } which means it wont post back, but the associated hidden input generated by CheckBoxFor() will, meaning that irrespective of checking it, you will always post back false

If the checkbox is intended to give a visual representation that verification has been completed, then a better approach would be to include a hidden input bound to IsVerified and an unbound checkbox.

<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>

Then you can 'check' the checkbox as noted above and include

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

in the script

You may also want to consider deleting the 'Verify' link from the DOM once you close the popup (assuming you don't want to verify it again

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

Muhammad Nasir · Accepted Answer · 2015-08-21 06:12:37Z

0

<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>

answered Aug 21, 2015 at 6:12

Muhammad Nasir

2,2045 gold badges38 silver badges66 bronze badges

Collectives™ on Stack Overflow

Access Property of a List Item Model from Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related