0

I'm trying to use a razor statement inside a jQuery append.

This is my code:

$('#Ctabs1-pane' + index + '').append('<br /><br /><br /><div id="buttonDiv' + index + '" class="col-lg-12" style="text-align:center"><legend></legend><div class="btn-group">'
                        + '<button type="button" class="btn btn-default" onClick="downloadPDF(' + index + ')"><i class="glyphicon glyphicon-download-alt"></i> PDF</button>'
                        + '<button type="button" class="btn btn-default" onClick="saveData(' + index + ')"><i class="glyphicon glyphicon-ok"></i> Spara</button>'
                        + '<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-remove"></i> Neka</button>'
                        + '<button type="button" class="btn btn-success" onClick="confirmService(' + index + ')"><i class="glyphicon glyphicon-ok"></i> Klarrapportera</button>'
                        @if(!Model.StatusUpdates.Where(x => x.Status == 3).Any()) {
                            + '<button type="button" class="btn btn-info" onClick="confirmService(' + index + ')"><i class="glyphicon glyphicon-ok"></i> Klarrapportera</button>'
                        }
                        + '</div></div></div>');

on the + '<button .....' row I get this error in Visual Studio:

only assignment call increment decrement and new object expressions can be used as a statement

What am I doing wrong?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Lord Vermillion
  • 5,264
  • 20
  • 69
  • 109

2 Answers2

0

Why not create a template so you do not have to deal with this string concatenation mess..

<script id="pane-append" type="text/template">
    <br /><br /><br />
    <div id="buttonDiv{{index}}" class="col-lg-12" style="text-align:center">
        <legend></legend>
        <div class="btn-group">
            <button type="button" class="btn btn-default" onClick="downloadPDF({{index}})">
                <i class="glyphicon glyphicon-download-alt"></i> PDF
            </button>
            <button type="button" class="btn btn-default" onClick="saveData({{index}})">
                <i class="glyphicon glyphicon-ok"></i> Spara
            </button>
            <button type="button" class="btn btn-danger">
                <i class="glyphicon glyphicon-remove"></i> Neka
            </button>
            <button type="button" class="btn btn-success" onClick="confirmService({{index}})">
                <i class="glyphicon glyphicon-ok"></i> Klarrapportera
            </button>
            @if(!Model.StatusUpdates.Where(x => x.Status == 3).Any()) {
            <button type="button" class="btn btn-info" onClick="confirmService({{index}})">
                <i class="glyphicon glyphicon-ok"></i> Klarrapportera
            </button>
            }
        </div>
    </div>
</script>

(this way you would notice that you have an extra </div> in there)

and in your code do once a 

var template = $('#pane-append').html();

and when you want to do the appending do

$('#Ctabs1-pane' + index).append( template.replace(/{{index}}/gi, index) );

Demo at http://jsfiddle.net/xU87d/ (razor will not work in the demo though)

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

The way it worked for me is inside of the jquery put a @: before each line of jquery.

Demodave
  • 6,242
  • 6
  • 43
  • 58