MVC JavaScript inside foreach block

Question

The textbox should be filled up with values from the table when the dedicated button is pressed.

@Html.TextBoxFor(model => model.Users, new { @id = "Name" })

... there for I need a button in every line of the table.

@foreach (var user in Model.Users)
{
    <tr>

        <td> <input type="button" value="get" id="btnTakeOver" class="btn btn-primary" /> </td>

        <td>@user.Id</td>
        <td>@user.Name</td>
        <td>@user.Email</td>
    </tr>

}

But I have the problem that the JavaScript doesn't know the variables @user.Name and @user.Email from the foreach block.

The JavaScript block.

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jquery")

    
    <script>
       $(document).ready(function () {

            $("#btnTakeOver").click(function () {
                $("#Name").val(@user.Name);  // val from inside the foreach loop
                $("#Email").val(@user.Email);
            });

        });
        
    </script>
}

Has anybody an idea how it works?

you could add the name and the email as data attributes on the button: <input type="button" [email protected] [email protected] value="get" id="btnTakeOver" class="btn btn-primary" /> then in the click handler you can use eg: $(this).data("name") to get the name. — Jochem Van Hespen
– Jochem Van Hespen, Commented Jan 17, 2023 at 11:03
I also suggest to change the id of the button to be a class. since ID's need to be unique — Jochem Van Hespen
– Jochem Van Hespen, Commented Jan 17, 2023 at 11:04
Use jQuery .on and target your tr instead of the button itself. That way you'll get the entire row of values. Using an id attribute will be a pain. — GH DevOps
– GH DevOps, Commented Jan 17, 2023 at 12:24

Yiyi You · Accepted Answer · 2023-01-18 02:39:40Z

1

You can add the data into onclick event of the button:

<td> <input type="button" value="get" id="btnTakeOver" class="btn btn-primary" onclick="myFunction(@user.Name,@user.Email)" /> </td>

js:

 <script>
      function myFunction(Name,Email){
          $("#Name").val(Name);  // val from inside the foreach loop
          $("#Email").val(Email);
      }
        
    </script>

answered Jan 18, 2023 at 2:39

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC JavaScript inside foreach block

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related