html merge 2 columns in 1 with 100% width bootstrap 2

Question

I have the following HTML markup in my .NET MVC project:

<div class="row">
    <div class="span6">@Model.Data</div>
    <div class="span6">@Model.OtherData</div>
</div>

I'm getting data from server. So I want to do the following: If data is empty then show other data with width = 100%. Just to clarify I want to do something like that:

<div class="row">
    <div class="span12">@Model.OtherData</div>
</div>

Or vice versa.

Is there a way to do that? Maybe with using different HTML tags / CSS classes.

Answer 1

Essentially you just want conditionally display the @Model.Data only if it isn't null. You can also set the col class with a variable, and conditionally change that variable depending if @Model.Data exists or not. Try something like this:

@ {
    var colClass = 'span6';

    if (@Model.Data == null) {
      colClass = 'span12';
    }
}

<div class="row">
    @if (@Model.Data != null) {
        <div class="@colClass">@Model.Data</div>
    }
    <div class="@colClass">@Model.OtherData</div>
</div>