Correct use of #Html.Raw() - asp.net-mvc-4

Question

I am trying to generate a view that has collapsing panels in it. I need each panel to have a unique ID. I have successfully done it with the code below. but was warned in a different post that using #Html.Raw() is bad practice.
What is my alternative?
#Html.Raw("<div id=\"collapse")#Html.DisplayFor(modelitem => item.NAME)#Html.Raw("\" class=\"panel-collapse collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading")#Html.DisplayFor(modelitem => item.NAME)#Html.Raw("\">")

Answer 1

You need to understand why Html.Raw is a so-called "bad practice." If it were universally bad and should never be used then it wouldn't have been created in the first place. It's bad when it is used to write non-sanitized content to the browser because it leaves you vulnerable to an XSS attack.
Having that understanding, we can look at what you're doing and see that you are not writing out any user-provided data in your calls to Html.Raw so in this case it is probably an acceptable use.
Having said that, it seems like you could simplify things by passing a collection of divs to create in your model and just loop over them, something like the following, which may require some tweaking to get it just right.
#foreach(var panelName in model.PanelNames)
{
<div id="collapse#panelName
class="panel-collapse collapse collapse"
role="tabpanel"
aria-labelledby="heading#panelName">
}

Answer 2

You can simplify your code by combining text, markup, and razor Code.
In your case, use HTML with inline Razor expression :
<div id="#("collapse" + Html.DisplayFor(modelitem => item.NAME))" class="panel-collapse collapse collapse" role="tabpanel" aria-labelledby="#("heading" + Html.DisplayFor(modelitem => item.NAME))"></div>
More information about Razor syntax.