Razor view of Asp.Net MVC, the C # code word can not directly be nested

The problem I do not know so well described that specific issue see the following code

<a href="#" class="btn btn--sm btn--color1 btn--icon">
	@if (Model.Gender=="男")
	{
	    <span class="fa fa-mars"></span>男
	}
	else if (Model.Gender=="女")
	{
	    <span class="fa fa-venus"></span>女
	}
	else
	{
	    <span class="fa fa-genderless"></span>未知
	}
</a>

The value of Model.Gender want here to generate different combination of icons and text blocks

To achieve the effect that FIG.

, But in C # code written will be given of such nested <span class="fa fa-mars"></span>男

such wording can not be recognized, of course, write no problem <span class="fa fa-mars">男</span>, but the effect will be somewhat deformed so write (gap is too small icons and text)

Solution one,

When writing text, first stringa variable assignment

else if (Model.Gender.=="女")
{
    string sex = "女";
    <span class="fa fa-venus"></span>@sex
}

This method is cumbersome, text multiplied a bit of trouble, it is recommended that the following method

Solution two,

Use <text></text>blocks, this method convenient
to use the following

<a href="#" class="btn btn--sm btn--color1 btn--icon">
	@if (Model.Gender=="男")
	{
	    <span class="fa fa-mars"></span><text>男</text>
	}
	else if (Model.Gender=="女")
	{
	    <span class="fa fa-venus"></span><text>女</text>
	}
	else
	{
	    <span class="fa fa-genderless"></span><text>未知</text>
	}
</a>