CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvcrazor
user3701485
user3701485

Reputation: 315

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

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.

Upvotes: 1

Views: 2168

Answers (4)

BeardedMan
BeardedMan

Reputation: 394

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>

Upvotes: 2

HarryQuake
HarryQuake

Reputation: 163

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");

Upvotes: 1

rbk
rbk

Reputation: 111

It should be ok

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

Upvotes: 0

nasskov
nasskov

Reputation: 485

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.

Upvotes: 2

Related Questions