Add rows dynamically hainf html helper in asp.net mvc

Question

Following is my code which i am using to add new row with the html helpers in each td.

I am making a view of Bill Of Material in my application for which I need to have a structure where there are many children(ingredients) under a main parent(Main Material).

My approach is to have html helpers in the td and with the button click add row and add the children(ingredients).

I am not able to get a new row when i click the button in my following code. Please help and please suggest if there is any other proper approach for getting my Bill Of Material view done.

I am taking reference of this link .

$("#myButton").click(function () {
    debugger;
    // Create elements dynamically
    var newRow = "<tr><td>'@Html.TextBoxFor(x => x.Id, new { @Value = "1" })'</td><td>'@Html.TextBoxFor(x => x.Name, new { @Value = "Abcd" })'</td></tr>";
    alert(newRow);
    // Add the new dynamic row after the last row
    $('#aliasTable tr:last').after(newRow);
});


<h2>Index</h2>

<table id="aliasTable">
    <tr>
        <td>
            @Html.TextBoxFor(Model => Model.Id, new { @Value = "1" })
        </td>

        <td>
            @Html.TextBoxFor(Model => Model.Name, new { @Value = "Abcd" })
        </td>
    </tr>
</table>

<button id="myButton">Add New Row</button>

Aravindan · Accepted Answer · 2014-12-29 07:38:21Z

2

Please change your code like below.

Note: The important thing is you need to mention the razer code (Html helpers) in between the single quotation like ('@Html.TextBoxFor(Model => Model.Id') .

If you must need the strongly type means please use the below code.

[HttpGet]
public ActionResult ActionMethodName()
{
    Test testData = new Test();
    testData.Id = 1 // if Id is integet else testData.Id = "1"
    testData.Name = "Abcd"
    return View("ViewName", testData);
}

You need to add the values from your action method only. then the value return to your page automatically.

Then you can use the below code in your java script to return the value.

var newRow = "<tr><td>" + '@Html.TextBoxFor(x => x.Id)' + "</td><td>" + '@Html.TextBoxFor(x => x.Name)' + "</td></tr>";

else if you don't need the strongly type means use the below code

var newRow = '<tr><td><input type="text" value ="1" name ="Id" /><input type="text" value ="1" name ="Name" /></td></tr>';

edited Dec 29, 2014 at 7:38

answered Dec 29, 2014 at 6:32

Aravindan

8556 silver badges15 bronze badges

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

11 Comments

user2998990 Over a year ago

I am getting a syntax error when I copy pasted your code. Syntax error and still no new row is added.

user2998990 Over a year ago

Now the error is gone but still I am not able to get a new row.

Aravindan Over a year ago

Please check the value getting in newRow variable by alert and make sure the $('#aliasTable tr:last').after(newRow); is that the correct code to append new rows.

user2998990 Over a year ago

You can see my edit where I have provided a link which I am referencing.

Aravindan Over a year ago

Sorry for the delay ,I check and run the code, from that i get we cant able to assign the vale from html helper. if you try the updated code now it will works i checked it already

|

Collectives™ on Stack Overflow

Add rows dynamically hainf html helper in asp.net mvc

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related