我如何在 asp MVC 中捕获下拉列表的值文本?
How i can catch the value text of dropdownlist in asp MVC?
我正在尝试让 webgrid 用户可以在线编辑和删除它,所以我把它变成了 webgrid 并且我成功地绑定了它并且更新功能会工作,当我按下编辑按钮标签转换为文本和下拉列表时那里是我的 ajax 代码
<script type="text/javascript">
$(function () {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});
$('.save-user').on('click', function () {
var getValue;
var tr = $(this).parents('tr:first');
var FirstName = tr.find("#FirstName").val();
var Phone = tr.find("#Phone").val();
var Branch = tr.find("#Branch-drop").val();
getValue = $("#Branch-drop option:selected").text();
var UserID = tr.find("#UserID").html();
tr.find("#lblFirstName").text(FirstName);
tr.find("#lblPhone").text(Phone);
tr.find("#lblBracnh").text(getValue);
tr.find('.edit-mode, .display-mode').toggle();
var UserModel = {
"IdEmp": UserID,
"EmpName": FirstName,
"Phone": Phone,
"BranchName": Branch
};
$.ajax({
url: '/Home/UpdateUser/',
data: JSON.stringify(UserModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
});
})
</script>
webgrid 代码是
@{
var grid = new WebGrid(Model);
}
<div id="gridContent" style=" padding:20px; ">
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns(
grid.Column("IdEmp", "ID", format: @<text> <span class="display-mode">@item.IdEmp </span> <label id="UserID" class="edit-mode">@item.IdEmp</label> </text>, style: "col1Width" ),
grid.Column("EmpName","Employee Name", format: @<text> <span class="display-mode"> <label id="lblFirstName">@item.EmpName</label> </span> <input type="text" id="FirstName" value="@item.EmpName" class="edit-mode" /></text>, style: "col2Width"),
grid.Column("Phone", "Phone", format: @<text> <span class="display-mode"> <label id="lblPhone">@item.Phone</label> </span> <input type="text" id="Phone" value="@item.Phone" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("BranchName","Branches", format: @<text><span class="display-mode"> <label id="lblBracnh">@item.BranchName</label> </span> @Html.DropDownList("MyDropdowen", (SelectList)ViewBag.DropDowenValue, new { id = "Branch-drop", @class = "edit-mode" })</text>,style:"col2Width"),
grid.Column("Action", format: @<text>
<button class="edit-user display-mode">Edit</button>
<button class="save-user edit-mode">Save</button>
<button class="cancel-user edit-mode">Cancel</button>
<button class="Delete-user ">Delete</button>
</text>, style: "col3Width", canSort: false)
))
问题是下拉列表出现时没有显示在当前值上,当我更改它时,文本标签不采用新值所以我如何使下拉列表采用当前值以及何时用户选择了新文本并按保存下拉菜单是否采用新值?
获取下拉列表值文本的语法错误
这是我的代码:
getValue = $("#Branch-drop option:selected").text();
应该是:
getValue = tr.find("#Branch-drop option:selected").text();
成功了
谢谢大家
我正在尝试让 webgrid 用户可以在线编辑和删除它,所以我把它变成了 webgrid 并且我成功地绑定了它并且更新功能会工作,当我按下编辑按钮标签转换为文本和下拉列表时那里是我的 ajax 代码
<script type="text/javascript">
$(function () {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function () {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});
$('.save-user').on('click', function () {
var getValue;
var tr = $(this).parents('tr:first');
var FirstName = tr.find("#FirstName").val();
var Phone = tr.find("#Phone").val();
var Branch = tr.find("#Branch-drop").val();
getValue = $("#Branch-drop option:selected").text();
var UserID = tr.find("#UserID").html();
tr.find("#lblFirstName").text(FirstName);
tr.find("#lblPhone").text(Phone);
tr.find("#lblBracnh").text(getValue);
tr.find('.edit-mode, .display-mode').toggle();
var UserModel = {
"IdEmp": UserID,
"EmpName": FirstName,
"Phone": Phone,
"BranchName": Branch
};
$.ajax({
url: '/Home/UpdateUser/',
data: JSON.stringify(UserModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
});
})
</script>
webgrid 代码是
@{
var grid = new WebGrid(Model);
}
<div id="gridContent" style=" padding:20px; ">
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns(
grid.Column("IdEmp", "ID", format: @<text> <span class="display-mode">@item.IdEmp </span> <label id="UserID" class="edit-mode">@item.IdEmp</label> </text>, style: "col1Width" ),
grid.Column("EmpName","Employee Name", format: @<text> <span class="display-mode"> <label id="lblFirstName">@item.EmpName</label> </span> <input type="text" id="FirstName" value="@item.EmpName" class="edit-mode" /></text>, style: "col2Width"),
grid.Column("Phone", "Phone", format: @<text> <span class="display-mode"> <label id="lblPhone">@item.Phone</label> </span> <input type="text" id="Phone" value="@item.Phone" class="edit-mode" /> </text>, style: "col2Width"),
grid.Column("BranchName","Branches", format: @<text><span class="display-mode"> <label id="lblBracnh">@item.BranchName</label> </span> @Html.DropDownList("MyDropdowen", (SelectList)ViewBag.DropDowenValue, new { id = "Branch-drop", @class = "edit-mode" })</text>,style:"col2Width"),
grid.Column("Action", format: @<text>
<button class="edit-user display-mode">Edit</button>
<button class="save-user edit-mode">Save</button>
<button class="cancel-user edit-mode">Cancel</button>
<button class="Delete-user ">Delete</button>
</text>, style: "col3Width", canSort: false)
))
问题是下拉列表出现时没有显示在当前值上,当我更改它时,文本标签不采用新值所以我如何使下拉列表采用当前值以及何时用户选择了新文本并按保存下拉菜单是否采用新值?
获取下拉列表值文本的语法错误 这是我的代码:
getValue = $("#Branch-drop option:selected").text();
应该是:
getValue = tr.find("#Branch-drop option:selected").text();
成功了 谢谢大家