How to use HTML syntax in JavaScript?

Question

I am developing MVC application and using razor syntax.

I want to use HTML code in JavaScript in cshtml file, but I get confused about how to use double quotes in JavaScript in razor syntax. Is that matter?

This is line of code:

<span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span>

@Html.DisplayFor(ModelItem => item.CommentDateTime)

<span class="EmpName"><button type="button" id = "@item.Id" class="deleteComment">Delete</button></span>

And I have written below code in JavaScript, is that right?

 success: function (data) {
     $("p.p12").append
           ("<div style=\"background-color:#FAFAFA\";>Recently Added... <br /><a href=\"../../Employee/Details/" + data.OwnerID + "\">" + data.OwnerName + "</a>"
           + data.cmtDateTime + "<button type=\"button\" id = \" + data.Id  +  "\class=\"deleteComment\">Delete</button></span><br />" + data.msg + "</div>");                    
 }

score 1 · Accepted Answer · edited May 23 '17 at 12:18

and I have written below code in JScript is that right ?

No, it doesn't seem right. The generated HTML is broken. You need to be more careful about the syntax, things liks spaces between the attributes and the quotes are important. Also you seem to be hardcoding urls instead of using url helpers. Try like this:

$('p.p12').append(
    '<div style="background-color:#FAFAFA;">Recently Added... <br /><a href="@Url.Action("Details", "Employee", new { id = "__id__" })'.replace('__id__', data.OwnerID) + '">' + data.OwnerName + '</a>' + data.cmtDateTime + '<span><button type="button" id=' + data.Id  + ' class="deleteComment">Delete</button></span><br />' + data.msg + '</div>'
 );

or as I suggested you here which IMHO is more correct approach.

or since you are using an AJAX call, instead of returning JSON from your controller action, return a ParialView in which you will correctly build the markup using proper HTML helpers.

Like this:

[HttpPost]
public ActionResult SomeAction(SomeViewModel args)
{
     MyViewModel model = ...
     return PartislView("_SomePartial", model);
}

and then inside your strongly typed partial (_SomePartial.cshtml) build the markup without any string concatenations and spaghetti code mixing javascript and HTML:

@model MyViewModel

<div style="background-color:#FAFAFA;">
    Recently Added... 
    <br />
    @Html.ActionLink(Model.OwnerName, "Details", "Employee", new { id = Model.OwnerID }, null)
    @HtmlDisplayFor(x => x.cmtDateTime)
    <span>
        <button type="button" id="@Model.Id" class="deleteComment">Delete</button>
    </span>
    <br />
    @HtmlDisplayFor(x => x.msg)
</div>

Now all that's left in your AJAX success callback is to refresh the corresponding DOM section:

success: function(html) {
    $('p.p12').append(html);
}

Thanks...but I want clarification on double quotes... Can I use double quotes or I supposed to write \" insted " ? — user1668543, Sep 22 '12 at 11:23
In my example I have wrapped the string litteral in single quotes. This way you could directly use double quotes (please read my answer). You could of course still use double quotes to wrap the string litteral in javascript and in this case you will have to escape any possible double quotes with `\"` inside this literal. But as I have explicitly stated in my answer this is not the solution I would recommend. I would recommend you having your controller action returning a partial view instead of ending up with such a terrible javascript code. — Darin Dimitrov, Sep 22 '12 at 11:25

How to use HTML syntax in JavaScript?

1 Answers1