如何在 MVC 中使用 Jquery 获取 ID？答案

【问题标题】：How to get Id using Jquery in MVC?如何在 MVC 中使用 Jquery 获取 ID？
【发布时间】：2013-04-26 08:24:02
【问题描述】：

我正在开发 MVC 应用程序。当我单击删除链接时，我想获取记录的 ID。在警报窗口中，我想显示我删除的记录 ID。

如何做到这一点？

  @model PaymentAdviceEntity.CompanyType

     <script type="text/javascript">

         $(document).ready(function () {
             $('.remove').click(function () {   
                alert(?????);         
               $(this).parent().parent().remove();   


        });          

         });

     </script>          


     <div id='InvoiceList' class='divInvoiceList span12' style='margin-bottom:5px;margin-left:0px;'>
            @if (Model != null)
       {
               <span class="span3" style="margin-left:0px;">@Html.TextBox("InvoiceId", @Model.Name , new { @onkeypress = "return isNumberKey(event)", @onblur = "CalculateNetValue()", @style = "width:75%; text-align:right;", @class = "clsInvoiceId" })</span>  

<span class="span1" style="margin-left:0px;padding-top:6px;">@Html.HiddenFor(model=>model.Id) <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span>

       }

    </div>

我可以看到记录 ID，即 data-id = 4，但在运行应用程序后无法查看以下 HTML 代码。

<span class="span3" style="margin-left:0px;" data-id="4"><input class="clsInvoiceId valid" id="InvoiceId" name="InvoiceId" onblur="CalculateNetValue()" onkeypress="return isNumberKey(event)" style="width:75%; text-align:right;" type="text" value="asdasd"></span>

【问题讨论】：

为什么在移除之前不获取 ID 或者只是隐藏而不是移除？
我认为您的标记不正确。如果你使用 $(this).parent().parent().remove();您将删除您的父 div，即“InvoiceList”，而不是包含 recordID 的另一个跨度
好的，我会检查一下，但我的首要任务是获取跨度的 Id...
你想得到哪一个？跨度的 ID 还是文本框的 ID？
记录ID，现在我已经写了这段代码...<span class="span1" style="margin-left:0px;padding-top:6px;">@Html.HiddenFor(model=>model.Id) <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span>

标签： jquery asp.net-mvc asp.net-mvc-3

【解决方案1】：

$('.remove').click(function () {  
   var $ele = $(this).parent().parent();

   var id = $ele.attr("id");

   $ele.remove();   

   alert(id);                
});

【讨论】：

【解决方案2】：

您必须将 ID 放在 HTML 标记中的某个位置，因为一旦进入客户端，您将无法再访问模型。

基本上你可以使用新的data- HTML5 属性：

<span class="span1" data-id="@Model.ID"> <-- this is the important bit
  <a href='#' id='lnkRemove' class='clsRemove remove'>X</a>
</span>

然后：

 $(document).ready(function () {
     $('.remove').click(function () {   
       alert($(this).parent().data("id")); // here we read the data-id...
       $(this).parent().parent().remove();   
     });          
 });

【讨论】：

你能检查生成的 HTML 吗？它应该有data-id="..."，里面有ID号。确保你使用 parent() 的次数正确......我只使用了一次 parent() 并将 data-id 放在跨度上......
yes data-id 出现在 HTML 代码中，但它在警报中显示“未定义”消息。
你能创建一个小提琴吗？这个工作正常：jsfiddle.net/9Meg9

【解决方案3】：

$('.remove').click(function () {
     var removedId = $(this).closest('.clsInvoiceId').val();
     $(this).parent().parent().remove();   
     alert(removedId); 
}

【讨论】：

【解决方案4】：

更新

如果你的 HTML 看起来像这样，

    <span class="span3" style="margin-left:0px;" data-id="4">
        <input class="clsInvoiceId valid" id="InvoiceId" name="InvoiceId" onblur="CalculateNetValue()" onkeypress="return isNumberKey(event)" style="width:75%; text-align:right;" type="text" value="asdasd">
    </span>
    <span class="span1" style="margin-left:0px;padding-top:6px;"> 
        <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a>
    </span>

然后，当您单击链接时，应该会得到 data-id

$('.remove').live("click", function () {     
     var removedId = $(this).parent().prev().attr("data-id");
     $(this).parent().parent().remove();  
     alert(removedId);
});

【讨论】：

“未定义”消息出现在警报窗口中。
这个怎么样？而且，如果您向我展示输出标记、没有剃须刀代码的纯 HTML，我更容易为您提供帮助。我不知道这个“@Html.HiddenFor(model=>model.Id)”会产生什么......：/
代码如下 <span class="span3" style="margin-left:0px;" data-id="4"><input class="clsInvoiceId valid" id="InvoiceId" name="InvoiceId" onblur="CalculateNetValue()" onkeypress="return isNumberKey(event)" style="width:75%; text-align:right;" type="text" value="asdasd"></span> 我可以看到数据 ID，但在警报窗口中显示时失败。
parent().parent() 将不起作用：另一个跨度是兄弟。将data-id 放在a 标签周围的范围内，或者使用siblings() 或closest() 导航到它，正如其他答案中已经建议的那样

【解决方案5】：

如果您在谈论模型中的 ID 属性，那么您可以简单地将其添加到跨度内的隐藏字段中

<span class="span1" style="margin-left:0px;padding-top:6px;">@Html.HiddenFor(model=>model.ID) <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span>

并像在客户端一样访问它

 $(document).ready(function () {
         $('.remove').click(function () {
           var id = $(this).closest("input").val();   
           $(this).parent().parent().remove();   

           alert(id);                
    });

编辑

如果正在生成以下 HTML

<span class="span3" style="margin-left:0px;" data-id="4"><input class="clsInvoiceId valid" id="InvoiceId" name="InvoiceId" onblur="CalculateNetValue()" onkeypress="return isNumberKey(event)" style="width:75%; text-align:right;" type="text" value="asdasd"></span>

那么，你应该使用下面的 jQuery 代码

$('.remove').click(function () {
    var id = $(this).parent().prev().attr("data-id");
    $(this).parent().parent().remove();
    alert(id);
});

你可以看到它在工作here

【讨论】：