在上一个问题之后我继续回答:On Click - Make @Html.DisplayFor an editable text field
我想在JQuery中获取一个电影项目的ID,我只需要在" var"形式。
我目前可以通过文本框条目获取.Name,但我似乎无法使用此代码来获取ID。任何帮助表示赞赏!
查看摘录
@Html.HiddenFor(modelItem => item.ID) // <-- this is above it a bit
<span class="item-display">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Name)</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.Name)
</span>
这是让我获得项目字段值
的JQuery.on("focusout", "span.item-field", function (event) {
console.log("this is a log");
var $field = $(event.currentTarget),
$display = $field.prev("span.item-display");
$display.html($field.find(":input:first").val());
$display.show();
$field.hide();
var name1 = $field.find(":input:first").val(); // get's the .Name
我是JQuery的新手,所以我不确定这是否足以帮助解决我的问题。我非常乐意附上更多代码,我只是试图了解情况。
谢谢!
修改
上下文的完整视图代码(仅关注td
中的第一个@foreach (var item in Model)
,其他td&#39}尚未格式化,直到我使用此工具。
@model IEnumerable<WebApplication2.Entities.Movie>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
table tr button {
opacity: 0.5;
float: right;
}
table tr:hover button {
opacity: 1;
}
</style>
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-film"></span>Movies</span></span>
</div>
<div class="col-lg-offset-8 col-lg-4">
<button type="button" style="margin:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"><span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h4>
</th>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h4>
</th>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Description)</span></h4>
</th>
<th>
@using (Html.BeginForm("Index", "Movie"))
{
<div class="dropdown">
<select class="btn btn-group-lg btn-default col-lg-4" style="margin-top: 15px; width:40%; height: 36px; opacity: 1" data-toggle="dropdown" name="Filter">
<option value="0" disabled selected>Filter By...</option>
<option value="1">Movie Name</option>
<option value="2">Description</option>
</select>
</div>
<input type="text" name="searchString" class="col-lg-6" style="margin-top: 16px; width:50%; text-align:center; height:35px; font-size:20px" placeholder="enter text" />
<button type="submit" class="btn btn-group-lg btn-primary col-lg-2 glyphicon glyphicon-arrow-right" style="margin-top: 15px; width:10%; height:36px; opacity:1" value="" />
}
</th>
</tr>
@foreach (var item in Model)
{
@Html.HiddenFor(modelItem => item.ID)
<tr>
<td class="col-lg-2">
<span class="item-display">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Name)</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.Name)
</span>
</td>
<td class="col-lg-3">
<span class="item-display">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.ReleaseDate)</span>
</span>
<span class="item-field">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.HiddenFor(modelItem => item.ID)
@Html.EditorFor(modelItem => item.ReleaseDate)
@Html.ValidationMessageFor(modelItem => item.Name)
<button type="submit" value="Save" class="form-group btn-success col-lg-11"><span style="margin-right: 5px" class="glyphicon glyphicon-floppy-save"></span>Save</button>
}
</span>
</td>
<td class="col-lg-3">
<span class="item-display">
<span style="font-size: 17px; font-style:italic">@Html.DisplayFor(modelItem => item.Description)</span>
</span>
<span class="item-field">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.HiddenFor(modelItem => item.ID)
@Html.EditorFor(modelItem => item.Description)
@Html.ValidationMessageFor(modelItem => item.Name)
<button type="submit" value="Save" class="form-group btn-success col-lg-11"><span style="margin-right: 5px" class="glyphicon glyphicon-floppy-save"></span>Save</button>
}
</span>
</td>
<td class="col-lg-3 col-lg-offset-1">
<span class="item-display">
<button type="button" class="btn btn-warning col-lg-4" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.ID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-display">
<button type="button" class="btn btn-danger col-lg-4 col-lg-offset-4" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.ID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>
</td>
</tr>
<tr>
<td colspan="12">
<p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
Movie ID: @Html.DisplayFor(modelItem => item.ID)
<br />
Placeholder
</p>
</td>
</tr>
}
</table>
<span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" />click for details</span>
</div>
<script>
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function () {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
});
});
</script>
<script>
$(document.documentElement)
.on("click", "span.item-display", function (event) {
$(event.currentTarget)
.hide()
.next("span.item-field")
.show()
.find(":input:first")
.focus()
.select();
})
.on("focusout", "span.item-field", function (event) {
console.log("this is a log");
var $field = $(event.currentTarget),
$display = $field.prev("span.item-display");
$display.html($field.find(":input:first").val());
$display.show();
$field.hide();
var id1 = $field.find(":input:first").attr('id');
alert(id1);
var name1 = $field.find(":input:first").val();
$.post(
'@Url.Action("UpdateTitle", "Movie")',
{
'id': '1',
'name': name1
},
function(data){},
"json"
);
});
</script>
@Scripts.Render("~/bundles/myscript")
答案 0 :(得分:1)
var ID = $field.siblings("#ID").val();
或
var ID = $field.siblings("[name=ID]").val();
答案 1 :(得分:0)
可以使用此
var name1 = $field.find("[id$=Name]").val();
答案 2 :(得分:0)
我所做的是添加隐藏字段来存储我的ID
<span style="visibility:hidden">@Html.DisplayFor(modelItem => item.ID)</span>
然后我才导航到它。对于这个例子,我必须使用下面的代码,因为$this
位于我当前位置之前的两个span
中。
var id = $(this).prev("span").prev("span").text();