asp.net mvc - Using jQuery to toggle between DisplayFor and EditorFor in MVC -
In my view, there should be a way to toggle between a DisplayFor and EditorFor div. I want to click on an "edit" button next to a display field and I have the DisplayFor element hidden and the EditorFor field is visible. Once I update the text, I want to submit the form and data in the editor field.
I'm not sure why this is not working, tips?
My jQuery
& lt; Script type = "text / javascript" & gt; Myfunction (element) {$ (element) Find ("span.item-display"). Html ($ (element) Find ("span.item-field") Find (": input: first"). Val ()); $ (Element) .Find ("span.item-display"). Show () .next ("span.item-field") .hide (); }
My HTML view
& lt; Dt & gt; & Lt; Strong & gt; @ Html.labelFor (m = & gt; m .FirstName) & lt; / Strong> & Lt; / Dt & gt; & Lt; Dd & gt; & Lt; Span class = "item-display" & gt; @html DisplayForm (M => M.Fst_Name) & lt; / Span & gt; & Lt; Span class = "item-field" style = "display: none" & gt; @ Html.EditorFor (m = & gt; m.FirstName) & lt; / Span & gt; & Lt; Period & gt; & Lt; Button type = "button" onclick = "myfunction (this)" /> & Lt; / Span & gt; & Lt; / Dd>
Use Jquery toggle below: & lt; Dt & gt; & Lt; Strong & gt; @ Html.labelFor (m = & gt; m.FirstName) & lt; / Strong> & Lt; / Dt & gt; & Lt; Dd & gt; & Lt; Span class = "item-display toggle-control" & gt; @html DisplayForm (M => M.Fst_Name) & lt; / Span & gt; & Lt; Span class = "item field toggle-control" style = "display: none" & gt; @ Html.EditorFor (m = & gt; m.FirstName) & lt; / Span & gt; & Lt; Period & gt; & Lt; Button type = "button" onclick = "toggler ()" /> & Lt; / Span & gt; & Lt; / Dd> & Lt; / Dt & gt; & Lt; Script & gt; Function toggler () {$ (". Toggle-Control"). Toggle (); } & Lt; / Script & gt;
Comments
Post a Comment