1

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

这是我的模型

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

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

我的视图文件，用于显示下拉列表、文本框、编辑按钮和保存按钮。

@model Pivot.Models.PlanViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<table>

    <tr id="ddl">

        <td>@Html.Label("Select Plan : ") </td>
        <td>@Html.DropDownList("PlanNames", Model.Plans, "--select--") </td>

    </tr>
    <tr id="editplan">
        <td>@Html.Label("Edit Plan : ")</td>
        <td><input id="plannames" type="text" /></td>        
    </tr>
    <tr>
        <td>@Html.Label("Hours  :")</td>
        <td><input id="planHours" type="text" /></td>        
    </tr>
    <tr>
        <td>@Html.Label("Edit  :")</td>
        <td><input id="Button1" type="button" value="Edit" /></td>
    </tr>
    <tr>
        <td>@Html.Label("Save Changes :")</td>
        <td><input id="savebutton" type="submit" value="Save" /></td>        
    </tr>
</table>




<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery.js"></script>
<script type="text/javascript">
    $(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();
        });


    });
</script>

我的表 Plan_S 如下所示：

  PlanId_PK   |    PlanNames    |     Hours     |      PlanCost

      1              Plan1             1hrs              $10
      2              Plan2             2hrs              $20
      3              Plan3             3hrs              $30

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

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

当我单击“编辑”按钮时，下拉菜单和其他两个文本框应转换为可编辑文本框，然后我应编辑计划名称、成本、小时数，然后当我单击“保存”按钮时，应将其保存到 Plan_S。

我正在用 JQuery 尝试这个...

由于我是 MVC 新手，所以我很困惑......

请给我建议......

提前致谢....：）

4

1 回答 1

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 以便在更新时它不会为空。请注意，我还使用类来隐藏计划字段，因此在隐藏多行时我们有正确的标记：

<tr id="ddl">
    <td>Select plan</td>
    <td>@Html.DropDownList("PlanNames", Model.Plans, "--select--") </td>
</tr>
<tr class="editplanfield">

    <td>@Html.Label("Edit Plan : ")</td>
    <td><input id="plannames" type="text" />
        <input type="hidden" id="planid"/>
        <input type="hidden" id="plancost"/>
    </td>        
</tr>
<tr class="editplanfield">
    <td>@Html.Label("Hours  :")</td>
    <td><input id="planHours" type="text" /></td>        
</tr>
<tr>
    <td>@Html.Label("Edit  :")</td>
    <td><input id="editbutton" type="button" value="Edit" /></td>
</tr>
<tr>
    <td>@Html.Label("Save Changes :")</td>
    <td><input id="savebutton" type="submit" value="Save" /></td>        
</tr>

然后点击编辑按钮，我们从服务器请求选择的计划并填写编辑字段：

$("#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");
    }
于 2013-05-30T10:27:10.530 回答