Append c# string using jquery in ASP.Net MVC Razor

Question

I am working with ASP.Net MVC Razor.I have tried the following way to add a table row in my table body that is not working:

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

            @foreach (var billdetail in Model.BillDetails)
            {
                var row = "<tr class='productTableRow'><td>" + billdetail.ModelName + "</td><td class='price' >" + billdetail.Price + " </td><td><input type='text' class='form-control unit' data-validation='Unit' nonZero='true' currentStockAmount=" + billdetail.CurrentAmount + " /></td><td class='total'>"+(billdetail.Price*billdetail.Price)+"</td><td><input type='button' class='btn btn-danger removeRow' data-modelId=" + billdetail.ModelId + " value='Remove'  / ></td><td style='visibility:hidden;'>" +
                                   "<input type='hidden' class='hiddenModel' value='" + billdetail.ModelId + "'>" +
                                   "<input type='hidden' class='hiddenPrice' value='" + billdetail.Price + "'>" +
                                   "</td></tr>";

                @:$("#productBody").append(@row);
            }

        });
    </script>

It is showing the error:Uncaught SyntaxError: Unexpected token & What is the proper way to do it.

BeardedMan · Accepted Answer · 2015-11-02 10:12:32Z

I don't understand why you want to generate javascript which will append this on load. Why you don't simply generate table markup using Razor in your view, like this:

<table id="productBody">
   @foreach (var billdetail in Model.BillDetails)
   {
   <tr class="productTableRow">
      <td>@(billdetail.ModelName)</td>
      <td class="price">@(billdetail.Price)</td>
      <td><input type="text" class="form-control unit" data-validation="Unit" nonZero="true" currentStockAmount="@(billdetail.CurrentAmount)" /></td>
      <td class="total">@(billdetail.Price*billdetail.Price)</td>
      <td><input type="button" class="btn btn-danger removeRow" data-modelId="@(billdetail.ModelId)" value="Remove" / ></td>
      <td style="visibility:hidden;"><input type="hidden" class="hiddenModel" value="@(billdetail.ModelId)"><input type="hidden" class="hiddenPrice" value="@(billdetail.Price)"></td>
   </tr>
   }
</table>

nasskov · Accepted Answer · 2015-07-11 15:02:01Z

2

You should just check the output of this on client side, from the source I would conclude that your code result in something like this on the client side:

//...
$("#productBody").append(<tr class='productTableRow'>...);
//...

No quotation marks, that I believe, is the main problem here.

answered Jul 11, 2015 at 15:02

nasskov

4855 silver badges13 bronze badges

Comments

HarryQuake · Accepted Answer · 2015-07-11 15:32:01Z

1

Due to the automatic html encoding in razor, you actually can change @:$("#productBody").append(@row); to the following to make it work.

HtmlString s = new HtmlString(row);
@:$("#productBody").append("@s");

answered Jul 11, 2015 at 15:32

HarryQuake

1631 silver badge13 bronze badges

Comments

rbk · Accepted Answer · 2015-07-11 15:04:50Z

0

It should be ok

@:$("#productBody").append("@row");

answered Jul 11, 2015 at 15:04

rbk

1115 bronze badges

Collectives™ on Stack Overflow

Append c# string using jquery in ASP.Net MVC Razor

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related