如何在MVC中点击EDIT按钮将DropdownList更改为可编辑的文本框？

我必须在单击“编辑”按钮后将我的下拉列表更改为可编辑的文本框。 这里我在CSHTML文件中有一个Dropdownlist，当我在DDL中选择一个值时，文本框会从表中填充相应的值。

这是我的模特

当我使用ADO.NET实体将表从数据库连接到MVC时，VS会自动生成此Plan_S Model类

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;} 

上市 }

创建此类是为了列出Plan_S类

 public class PlanViewModel { public List Plans { get; set; } } 

我的控制器是

 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 => new SelectListItem { Value = p.Hours, Text = p.PlanNames }) .ToList(); return View(model); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } 

我的View文件用于显示下拉列表，TextBox，Edit按钮和Save按钮。

 @model Pivot.Models.PlanViewModel @{ ViewBag.Title = "Index"; } 
Index
 
 
 
@Html.Label("Select Plan : ") 
 
@Html.DropDownList("PlanNames", Model.Plans, "--select--") 
 
 
 
@Html.Label("Edit Plan : ")
 
 
 
 
@Html.Label("Hours :")
 
 
 
 
@Html.Label("Edit :")
 
 
 
 
@Html.Label("Save Changes :")
 
 
 
     $(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(); }); });  

我的Table Plan_S看起来像这样：

  PlanId_PK | PlanNames | Hours | PlanCost 1 Plan1 1hrs $10 2 Plan2 2hrs $20 3 Plan3 3hrs $30 

这里我需要的是，从PlanNmes中选择下拉列表时。

即，）在DDL中选择Plan2时，有两个文本框，一个应填充相应的小时值，另一个文本框应从PlanCost填充。

当我单击“编辑”按钮时，下拉列表和其他两个文本框应该转换为可编辑的文本框，然后我应该编辑计划名，plnacost，小时，然后当我单击“保存”按钮时，它应该保存到Plan_S。

我正在尝试使用JQuery …

由于我是MVC的新手，我感到困惑……

请告诉我……

提前致谢….：）

Answer 1

这需要对ajax进行相当多的修补。 希望你能得到这个想法。

我只是用SelectListItems填充下拉列表，其中Value是Plan_S的主键，就像你通常那样。 这允许您的Plan_S扩展到代码的可伸缩性，并且您将需要更多编辑字段：

 model.Plans = db.Plan_S .Select(p => new SelectListItem { Value = p.PlanId_PK, Text = p.PlanNames }) .ToList(); 

在html中，为id添加一个隐藏字段，以便我们知道我们正在编辑的计划。 我们还需要保存plancost，以便在更新时不会为null。 请注意，我还使用class来隐藏计划字段，因此在隐藏多行时我们有正确的标记：

  Select plan @Html.DropDownList("PlanNames", Model.Plans, "--select--")    @Html.Label("Edit Plan : ")       @Html.Label("Hours :")    @Html.Label("Edit :")    @Html.Label("Save Changes :")   

然后在编辑按钮上单击，我们从服务器请求所选计划并填写编辑字段：

 $("#editbutton").click(function () { $("#ddl").hide(); $(".editplanfield").show(); // Request plan of selected id from server $.getJSON('@Url.Action("GetPlan")', { planId: $("[name='PlanNames']").val() }, function (plan) { // Fill the fields according to the Jsondata we requested $("#planid").val(plan["PlanId_PK"]); $("#plannames").val(plan["PlanNames"]); $("#planHours").val(plan["Hours"]); $("#plancost").val(plan["PlanCost"]); }); }); 

以下是请求的服务器端控制器代码：

  public JsonResult GetPlan(int planId) { var plan = db.Plan_S.Find(planId); return Json(plan, JsonRequestBehavior.AllowGet); } 

现在我们需要保存更改而不回发，因此我们需要更多的ajax：

 $("#savebutton").click(function () { // Parse the plan from fields var plan = new Object(); plan.PlanId_PK = $("#planid").val(); plan.PlanNames = $("#plannames").val(); plan.Hours = $("#planHours").val(); plan.PlanCost = $("#plancost").val() // Post it to server $.ajax({ type: "POST", url: "@Url.Action("UpdatePlan")", success: function (result) { //Postback success $(".editplanfield").hide(); $("#ddl").show(); }, data: plan, accept: 'application/json' }); }); 

然后在服务器端，我们需要更新计划的操作：

  [HttpPost] public JsonResult UpdatePlan(Plan_S plan) { /* Update the plan in database */ /* Just return something for now */ return Json("Success"); }