Retrieve value from view(grid format) to controller

Question

0.00/5 (No votes)

See more:

Working with MVC, Razor pages. Trying to create a grid with a functionality to insert rows within the grid (not against a pop up or a separate page) with a click of + and delete a row on - . The counter is not working on the front end (Razor HTML). Code given below. Any one can help please?

What I have tried:

@model New_Booking_Home.Models.Booking

@{
    Layout = null;
}

<!DOCTYPE html>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <div class="container">
          <div class="row">
                <p></p>
                <table id="myTable" style="width:100%">
                    <tr>
                        <td>
                            <button value="ADD" type="button" class="btnplus tooltip" onclick="myCreateFunction(this)">class="fa fa-plus"></button>
                        </td>
                        <td>
                            <div>Container Type</div>
                        </td>
                        <td>
                            <div>Quantity</div>
                        </td>
                    </tr>


                    @if (Model != null)
                    {
                        int i = 0;
                        foreach (var item in Model.cargolist2.ToList())
                        {
                            <!-- for (int i = 0; i < Model.cargolist2.Count; i++)-->
                            <tr>
                                <td>


                                    <button value="delete" type="button" class="btndel tooltip" onclick="deleteRow(this)">^__i class="fa fa-trash"></button>


                                </td>
                                <td>
                                    @Html.EditorFor(model => model.cargolist2[i].CntrtypeID, new { htmlAttributes = new { @class = "form-control textbx" } })
                                    @Html.ValidationMessageFor(model => model.cargolist2[i].CntrtypeID, "", new { @class = "text-danger" })
                                </td>
                                <td>
                                    @Html.EditorFor(model => model.cargolist2[i].Qty, new { htmlAttributes = new { placeholder = "Enter quantity", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.cargolist2[i].Qty, "", new { @class = "text-danger" })
                                </td>
                            </tr>
                        }
                    }
                </table>
            </div>
            <div>
                <input type="submit" class="genbtn" value="Submit" />
        </div>
    }


    <script>
    function myCreateFunction() {
        var table = document.getElementById("myTable");
        var x = document.getElementById("myTable").rows.length;

        x = x + 1;

        var row = table.insertRow();
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML =  '<button class="btndel tooltip" type="button" value="Delete" onclick="deleteRow(this)"></button>';
        cell2.innerHTML = '@Html.EditorFor(model => model.cargolist2[' + x + '].CntrtypeID, new { htmlAttributes = new { @class = "form-control textbx" } })                                @Html.ValidationMessageFor(model => model.cargolist2[' + x + '].CntrtypeID, "", new { @class = "text-danger" })';
        cell3.innerHTML = '@Html.EditorFor(model => model.cargolist2[' + x + '].Qty, new { htmlAttributes = new { placeholder = "Enter quantity", @class = "form-control" } })                         @Html.ValidationMessageFor(model => model.cargolist2[' + x + '].Qty, "", new { @class = "text-danger" });';
}



  function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
  }


    </script>
</body>
</html>

Posted 21-Aug-19 0:07am

Member 14564587

Updated 21-Aug-19 2:15am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2019-08-21T00:43:00

You have to appreciate the separation of server code and client code. Your server code (everything after @) runs first on the server, the resulting html is then sent to the client to execute, and at that point your js runs, so you can't have server code run dynamically in your javascript. View the source of your page and look at the javascript for the line that starts

cell2.innerHTML = ...

That is the exact code that runs every time you call myCreateFunction.

What you have to do is create the input elements using the same html format that EditorFor does. Again if you view the source you'll see what that format is, the important bit is the "name", which will be the name derived from your modal with a number in square brackets that indicates it is part of an array, so you'll have elemenets with names like "myElement[0]", "myElement[1]" etc. When elements like that are submitted with your form they are parsed into an array by .net.

Anyway, there is a basic example that shows how to do this here;

ASP.NET MVC3 Dynamically added form fields model binding[^]

It shows how to create the input html using the right format, just adapt that for your own variable names.

Maciej Los · Answer 2 · 2019-08-21T02:15:00

Solution 2

If you would like to create editable grid, take a look at these articles:
Create An Editable WebGrid In MVC4 To Implement CRUD Operations[^]
MVC WebGrid CRUD: Select Insert Edit Update and Delete in WebGrid in ASP.Net MVC[^]

Posted 21-Aug-19 2:15am

Maciej Los