如何改变一个DropDownList到一个文本编辑在MVC单击编辑按钮...？ [英] How to change a DropdownList to a editable textbox on Clicking EDIT button in MVC...?
问题描述
我要我的DropDownList更改为可编辑的文本框上单击编辑按钮。在这里，我有一个DropDownList我CSHTML文件，当我选择DDL值文本框填充从表中相应的值。
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.
这里是我的模型
这Plan_S Model类是由VS当我从数据库ADO.NET实体连接表自动生成MVC
This Plan_S Model class is autogenerated by VS when I connect the table from database to MVC with ADO.NET Entity
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;}
公开
}
public }
针对列出该类Plan_S创建该类
This class is created for listing the class 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);
}
}
显示DropDownList的，文本框，编辑按钮和保存按钮我的视图文件。
My View file for displaying the dropdownlist,TextBox,Edit button and Save button.
@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看起来是这样的：
My Table Plan_S looks like this:
PlanId_PK | PlanNames | Hours | PlanCost
1 Plan1 1hrs $10
2 Plan2 2hrs $20
3 Plan3 3hrs $30
在这里，我需要的是，当来自PlanNmes选择的DropDownList。
Here What I need is, When selecting dropdownlist from PlanNmes.
即，）选择在DDL计划2时，有两个文本框，一要与时间对应的值和所述另一个文本应从PlanCost填充填充。
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.
当我点击编辑按钮的下拉，另两个文本框应该被转换为可编辑的文本框，之后我应该编辑plannames，plnacost，小时
然后当我点击保存按钮，它应该被保存到Plan_S。
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.
我与JQuery的...
I am trying this with the JQuery...
由于我是新来的MVC我糊涂了......
As I'm new to MVC I got confused......
请告诉我上......
Please advise me on that......
在此先感谢....：）
Thanks in Advance....:)
推荐答案
这需要相当多的使用Ajax的修修补补。希望你的想法。
This requires quite a bit of tinkering with ajax. Hope you get the idea.
我只是填充SelectListItems将DropDownList其中value是Plan_S的主键，就像你通常会做。这使得可扩展性，在code柜面你Plan_S扩大，你会需要更多的编辑字段：
I'd just populate the dropdownlist with SelectListItems where Value is the primary key of Plan_S like you would normally do. This allows scalability to the code incase your Plan_S expands and you'll need more edit fields:
model.Plans = db.Plan_S
.Select(p => new SelectListItem
{
Value = p.PlanId_PK,
Text = p.PlanNames
})
.ToList();
在HTML中，添加一个隐藏字段的ID，所以我们知道我们此刻的编辑有什么计划。我们还需要保存plancost所以它不会对更新空。请注意，我还使用类隐藏计划领域，所以我们躲在多行的时候有正确的标记：
In html, add a hidden field for the id so we know what plan we are editing at the moment. We also need to save the plancost so it won't be null on update. Note that I also use class to hide plan fields so we have correct markup when hiding multiple rows:
<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一下，我们从服务器请求所选计划，并填补了editfields：
Then on editbutton click, we request the selected plan from server and fill the editfields:
$("#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"]);
});
});
下面是服务器端控制器code的请求：
Here is the server side controller code for the request:
public JsonResult GetPlan(int planId)
{
var plan = db.Plan_S.Find(planId);
return Json(plan, JsonRequestBehavior.AllowGet);
}
现在，我们需要保存而不回发的变化，所以我们需要更多的ajax：
Now we need to save changes without postback so we need more 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'
});
});
然后在服务器端，我们需要采取行动来更新计划：
Then on serverside we need the action to update the plan:
[HttpPost]
public JsonResult UpdatePlan(Plan_S plan)
{
/* Update the plan in database */
/* Just return something for now */
return Json("Success");
}
这篇关于如何改变一个DropDownList到一个文本编辑在MVC单击编辑按钮...？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
