JQuery是View中的item.ID

时间:2014-05-29 20:28:07

标签: javascript jquery asp.net-mvc-5

在上一个问题之后我继续回答: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")

3 个答案:

答案 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();