Create a table using jquery inside razor view

Question

I want to create a table inside razor view.

<div class="row" style="margin-left:80%">
    @if (ViewBag.IsGlobal == 1)
    {
        <script>
            $(document).ready(function () {
                $("#btnViewLocal").prop("disabled",true);

                @foreach (var item in Model.GlobalNewsModel)
                {

                    var gTable = "<tr class=\"tvl\">";
                    gTable += "<td>";
                    gTable += "<input id=\"testid\" value=\"testvalue\" class=\"form-control\" />";
                    gTable += "<td>";
                    gTable += "</tr>";
                    //gTable.append("#wholeNews tr:last").after(gTable); <-- I tried it like this it also not working.
                }
                $("#WholeNews tr:last").after(gTable); // I can't place thisone inside foreach loop,it's unrecognize the $
            });
        </script>
    }
}
</div>

Then

I hardcoded that table without foreach loop and it's working.But my requirement is to put that one in inside foreach loop.for your reference i've put that one here.

var gTable = "<tr class=\"tvl\">";
gTable += "<td>";
gTable += '<input id="' + $(this).closest('tr').find('td :eq(0)').val() + "newsno" + '" disabled type="text\" class=\"form-control" value="' + $(this).closest('tr').find('td :eq(0)').val() + '">';
gTable += "</td>";
gTable += "</tr>";
$("#WholeNews tr:last").after(gTable);

Your @foreach() loop is razor code and is parsed on the server before the view is sent to the browser. Javascript does not exist at that point. Why are you not just creating the table using razor/html? — user3559349
– user3559349, Commented Apr 23, 2017 at 7:00

Darin Dimitrov · Accepted Answer · 2017-04-23 07:08:19Z

1

How about making the loop on the client:

@if (ViewBag.IsGlobal == 1)
{
    <script>
        $(document).ready(function () {
            $("#btnViewLocal").prop("disabled", true);

            // serialize the server side model on the client
            var news = @Html.Raw(Json.Encode(Model.GlobalNewsModel));

            // loop through the news javascript variable on the client
            for (var i = 0; i < news.length; i++) {
                // here you can access news[i] if you need to print
                // some values from your model in the table

                var gTable = "<tr class=\"tvl\">";
                gTable += "<td>";
                gTable += "<input id=\"testid\" value=\"testvalue\" class=\"form-control\" />";
                gTable += "<td>";
                gTable += "</tr>";
                gTable.append("#wholeNews tr:last").after(gTable);
            }
        }
    </script>
}

Also note that if you don't need to access news[i] on the client then you probably don't need to serialize your model, all you need is the length:

var newsLength = @Model.GlobalNewsModel.Length;
for (var i = 0; i < newsLength; i++) {
    ...
}

but I guess you need the model values. Also notice that you can project only the values that you really need on the client to avoid wasting unnecessary space in the markup:

var news = @Html.Raw(Json.Encode(Model.GlobalNewsModel.Select(x => new
{
    foo = x.Foo,
    bar = x.Bar,
})));
for (var i = 0; i < news.length; i++) {
    // you can access news[i].foo and news[i].bar here
    ...
}

edited Apr 23, 2017 at 7:08

answered Apr 23, 2017 at 7:03

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

6 Comments

TechGuy Over a year ago

var news = @Html.Raw(Json.Encode(Model.GlobalNewsModel)); It shows me Underline the semicolon in red color and Syntax Error.

Darin Dimitrov Over a year ago

It doesn't matter what the buggy Visual Studio Razor Intellisense is showing you. Are you even looking at it? Did you try running the code? I suggest you do hit F5 and enjoy the results.

TechGuy Over a year ago

I tried your first code but it nothing project to the screen.

Darin Dimitrov Over a year ago

Did you inspect the markup? Does it look alright? Are you getting some javascript errors in the console?

Darin Dimitrov Over a year ago

That's normal. You have declared gTable as a string. Of course that it wouldn't have an append method. Now fix your javascript code and you will be good to go. Don't just blindly copy-paste from StackOverflow.

|

Collectives™ on Stack Overflow

Create a table using jquery inside razor view

Then

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Then

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related