CODEWITHSUNDEEP
asp.net-mvcrazor
MartinaL
MartinaL

Reputation: 151

Switch between EditorFor and DisplayFor

I have a partial view which is setup as a table/grid showing records from a DB - I can easily get it to display my Display or Editor template for the row, but how can I switch the row from displayFor to editorFor when I click and edit or save link?

<div id="compQuestionListContainer">
    <div class="divQuestionItems">
        <div class="divQuestionItemsHeaderRow">
            <div class="QuestionHeader">Question Type</div>
            <div class="QuestionHeader question-name">Question Name</div>
            <div class="QuestionHeader question-required">Required</div>
            <div class="QuestionHeader question-group">Question Group</div>
            <div class="QuestionHeader">Modified By</div>
            <div class="QuestionHeader">Modified Date</div>
            <div class="QuestionHeader question-edit">Edit</div>
            <div class="QuestionHeader question-delete">Delete</div>
        </div>
        <div class="divOrderItemsBody">
            @Html.EditorFor(m => m.CompetitionQuestionList)
            @Html.DisplayFor(m => m.CompetitionQuestionList)
        </div>
    </div>
</div>

Upvotes: 4

Views: 2362

Answers (1)

thepirat000
thepirat000

Reputation: 13114

You can do things like this in Razor:

@{
   if (someCondition)
   {
      Html.EditorFor(m => m.CompetitionQuestionList);
   }
   else
   {
      Html.DisplayFor(m => m.CompetitionQuestionList);
   }
}

Update

If you are trying to change from one view to another depending on user actions you will have to take another approach.

For example, you can render both in the view:

<div id="editor" style="display:none;">
    Html.EditorFor(m => m.CompetitionQuestionList)
</div>
<div id="display">
    Html.DisplayFor(m => m.CompetitionQuestionList)
</div>

And then, in your client code (assuming you load jQuery), you can do:

$("#editor").show();
$("#display").hide();

To switch from display to editor.

Upvotes: 6

Related Questions