title: How to change a DropdownList to a editable textbox on Clicking EDIT button in MVC...?
body: <p>I have to change my dropdownlist to editable textbox on clicking Edit button. Here I have a Dropdownlist in my CSHTML file, and When i select a value in DDL the textbox populates corresponding value from the table.</p>
  
  <p>here is my model</p>
  
  <p>This Plan_S Model class is autogenerated by VS when I connect the table from database to MVC with ADO.NET Entity</p>
  
  <pre><code>public partial class Plan_S
      {
          public int PlanId_PK { get; set; }
          public string PlanNames { get; set; }
          public string Hours { get; set; }
          public string PlanCost{ get; set;}
  </code></pre>
  
  <p>public
          }</p>
  
  <p>This class is created for listing the class Plan_S</p>
  
  <pre><code>public class PlanViewModel
      {
  
          public List&lt;SelectListItem&gt; Plans { get; set; }        
      }
  </code></pre>
  
  <p>My controller is </p>
  
  <pre><code>public class dropdownController : Controller
      {
  
  
          private PivotEntities db = new PivotEntities();
  
          //
          // GET: /dropdown/
  
          public ActionResult Index()
          {
              var model = new PlanViewModel();
  
              //model.Plan = CurrentPlan; //Replace this with the current plan you're editing
              model.Plans = db.Plan_S
                  .Select(p =&gt; new SelectListItem
                  {
  
                      Value = p.Hours,                   
                      Text = p.PlanNames
  
                  })
                  .ToList();
  
              return View(model);
          }
  protected override void Dispose(bool disposing)
          {
              db.Dispose();
              base.Dispose(disposing);
          }
  }
  </code></pre>
  
  <p>My View file for displaying the dropdownlist,TextBox,Edit button and Save button.</p>
  
  <pre><code>@model Pivot.Models.PlanViewModel
  
  @{
      ViewBag.Title = "Index";
  }
  
  &lt;h2&gt;Index&lt;/h2&gt;
  &lt;table&gt;
  
      &lt;tr id="ddl"&gt;
  
          &lt;td&gt;@Html.Label("Select Plan : ") &lt;/td&gt;
          &lt;td&gt;@Html.DropDownList("PlanNames", Model.Plans, "--select--") &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr id="editplan"&gt;
          &lt;td&gt;@Html.Label("Edit Plan : ")&lt;/td&gt;
          &lt;td&gt;&lt;input id="plannames" type="text" /&gt;&lt;/td&gt;        
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;@Html.Label("Hours  :")&lt;/td&gt;
          &lt;td&gt;&lt;input id="planHours" type="text" /&gt;&lt;/td&gt;        
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;@Html.Label("Edit  :")&lt;/td&gt;
          &lt;td&gt;&lt;input id="Button1" type="button" value="Edit" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;@Html.Label("Save Changes :")&lt;/td&gt;
          &lt;td&gt;&lt;input id="savebutton" type="submit" value="Save" /&gt;&lt;/td&gt;        
      &lt;/tr&gt;
  &lt;/table&gt;
  
  
  
  
  &lt;script src="~/Scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          $("[name='PlanNames']").change(function () {
              $("#planHours").val($(this).val());
          });
          $("#plannames").val($(this).val(""));
      });
      $(document).ready(function () {
          $("#editplan").hide();
          $("#Button1").click(function () {
              $("#ddl").hide();
              $("#editplan").show();
          });
          $("#savebutton").click(function () {
              $("#editplan").hide();
              $("#ddl").show();
          });
  
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My Table Plan_S looks like this:</p>
  
  <pre><code>  PlanId_PK   |    PlanNames    |     Hours     |      PlanCost
  
        1              Plan1             1hrs              $10
        2              Plan2             2hrs              $20
        3              Plan3             3hrs              $30
  </code></pre>
  
  <p>Here What I need is, When selecting dropdownlist from PlanNmes.</p>
  
  <p>i.e.,)when selecting Plan2 in DDL, there are two textboxes, one should be populated with corresponding value from Hours and the another textbox should be populated from PlanCost. </p>
  
  <p>When I click the Edit button the dropdown and the other two textboxes should be converted to be editable textbox and after that i should edit the plannames,plnacost,hours and
  then when I click the save button it should be saved to the Plan_S.</p>
  
  <p>I am trying this with the JQuery...</p>
  
  <p>As I'm new to MVC I got confused......</p>
  
  <p>Please advise me on that......</p>
  
  <p>Thanks in Advance....:)</p>