Javascript Asp.NETMVC中的模式

我有一个Asp.NET MVC应用程序，我试图使用一个模式来更新数据，我有两个模式用于注册和更新，注册是可以的，但更新不起作用，当点击“Alterar”按钮时，需要打开一个填充了数据的模式，我试图使用JavaScript来完成这项工作

有人能帮我吗

我的桌子

我的模型需要打开并填充数据

我的代码

桌子

身份证件
普罗杜托
库斯托
卢克罗
眼镜
@如果（型号！=null）
{
foreach（模型中的var销售）
{
@DisplayFor（model=>sale.idProduct）
@DisplayFor（model=>sale.nameProduct）
@Html.DisplayFor（model=>sale.costProduct）
@DisplayFor（model=>sale.profitProduct）
}
}
在这里输入代码

JavaScript

<script type="text/javascript">
$(document).ready(function () {
    $('.update').on('click', function () {
        var $this = $(this);
        var idProduct = $this.data('id');
        var nameProduct = $this.data('name');
        var costProduct = $this.data('cost')
        var profitProduct = $this.data('profit')
        $('#nameProduct').text(nameProduct);
        $('#costProduct').text(costProduct);
        $('#profitProduct').text(profitProduct);
        $("#updateModal #form_update #idProduct").val(idProduct);
        $('#updateModal').modal();
    });
});

$（文档）.ready（函数（）{
$（'.update'）。在（'click'，函数（）{
var$this=$（this）；
var idProduct=$this.data（'id'）；
var nameProduct=$this.data（'name'）；
var costProduct=$this.data（'成本'）
var profitProduct=$this.data（'利润'）
$（“#名称产品”）.text（名称产品）；
$（'costProduct'）。文本（costProduct）；
$（'profitProduct'）.text（profitProduct）；
$（“#updateModel#form#update#idProduct”）.val（idProduct）；
$（'#updateModel'）.modal（）；
});
});

模态

&时代；
Alterar Produto
取消者

要更改输入值，需要使用val（）：

$（文档）.ready（函数（）{
$（'.update'）。在（'click'，函数（）{
var$this=$（this）；
var idProduct=$this.data（'id'）；
var nameProduct=$this.data（'name'）；
var costProduct=$this.data（'成本'）
var profitProduct=$this.data（'利润'）
$（'nameProduct'）.val（nameProduct）；
$（'costProduct'）.val（costProduct）；
$（'profitProduct'）.val（profitProduct）；
$（“#updateModel#form#update#idProduct”）.val（idProduct）；
$（'#updateModel'）.modal（）；
});
});

您的

模式

仅包含输入

用于设置您使用的输入值

$（'#nameProduct'）.text（nameProduct）

，这是错误的。您需要

val（）

方法

$('#nameProduct').val(nameProduct);

.text（）

方法专门用于

div

、

span

等

更新

@Html.DisplayFor（model=>sale.idProduct）

生成具有以下属性的

span

：

id

和

name

具有值

idProduct

。问题是有两个元素具有相同的

id

（在表和模式中）

id

属性在

DOM

中必须是唯一的

模态

&时代；
Alterar Produto
取消者

JAVASCRIPT

<script type="text/javascript">
   $(document).ready(function () {
      $('.update').on('click', function () {
         var modal=$('#updateModal');
         var idInput = modal.find('input.modalInput').eq(0);
         var nameInput = modal.find('input.modalInput').eq(1);
         var costInput = modal.find('input.modalInput').eq(2);
         var profitInput = modal.find('input.modalInput').eq(3);
         idInput.val($(this).data('id'));
         nameInput .val($(this).data('name'));
         costInput.val($(this).data('cost'));
         profitInput .val($(this).data('profit'));
         modal.modal();
     });
   });
</script>

$（文档）.ready（函数（）{
$（'.update'）。在（'click'，函数（）{
var modal=$（'#updateModal'）；
var idInput=modal.find（'input.modalInput'）.eq（0）；
var nameInput=modal.find（'input.modalInput'）.eq（1）；
var costInput=modal.find（'input.modalInput'）.eq（2）；
var profitInput=modal.find（'input.modalInput'）.eq（3）；
idInput.val（$（this.data（'id'））；
nameInput.val（$（this.data（'name'））；
costInput.val（$（this.data（'cost'））；
profitInput.val（$（this.data（'profit'））；
modal.modal（）；
});
});

HTML

foreach（模型中的var销售）
{
@DisplayFor（model=>sale.idProduct）
@DisplayFor（model=>sale.nameProduct）
@Html.DisplayFor（model=>sale.costProduct）
@DisplayFor（model=>sale.profitProduct）
奥特拉尔
}

您必须使用val（）。您像文本一样使用（“asda”）。您更改这些问题解决方案仍然不起作用！我从表中获取值的方法正确吗？是的。尝试用$（this）替换$this.data（'id'）。数据（'id'）仍然无法工作！我试图在javaScript上调试变量，但没有收到数据！尝试使用

$this.attr（'data-id'）$this.data（'id'）仍然不工作！我从表中获得价值的方式正确吗？@GabrielGomes，我知道问题所在！我会在几分钟内更新答案。@GabrielGomes，现在看一下。这是我举的一个简短的例子：仍然不起作用！我从表中获取值的方式正确吗？
<script type="text/javascript">
$(document).ready(function () {
    $('.update').on('click', function () {
        var $this = $(this);
        var idProduct = $this.data('id');
        var nameProduct = $this.data('name');
        var costProduct = $this.data('cost')
        var profitProduct = $this.data('profit')
        $('#nameProduct').val(nameProduct);
        $('#costProduct').val(costProduct);
        $('#profitProduct').val(profitProduct);
        $("#updateModal #form_update #idProduct").val(idProduct);
        $('#updateModal').modal();
    });
});

$('#nameProduct').val(nameProduct);

<div id="updateModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dissmiss="modal">&times;</button>
            <h4 class="modal-title">Alterar Produto<span id="name_product"></span></h4>
        </div>
        <form method="post" id="form_update" action="/Dashboard/Product">
            <div class="modal-body">
                <div class="form-group">
                    <input type="hidden" class="form-control modalInput" placeholder="ID do produto"/>
                    <input type="text" class="form-control modalInput" placeholder="ID do produto" required />
                    <input type="text" class="form-control modalInput" placeholder="Custo do Produto" required />
                    <input type="text" class="form-control modalInput" placeholder="Lucro do Produto" required />
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-warning" value="Atualizar" />
                <button type="button" class="btn btn-warning" data-dissmiss="modal">Cancelar</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
   $(document).ready(function () {
      $('.update').on('click', function () {
         var modal=$('#updateModal');
         var idInput = modal.find('input.modalInput').eq(0);
         var nameInput = modal.find('input.modalInput').eq(1);
         var costInput = modal.find('input.modalInput').eq(2);
         var profitInput = modal.find('input.modalInput').eq(3);
         idInput.val($(this).data('id'));
         nameInput .val($(this).data('name'));
         costInput.val($(this).data('cost'));
         profitInput .val($(this).data('profit'));
         modal.modal();
     });
   });
</script>

foreach(var sale in Model)
{
            <tr>
                <td>@Html.DisplayFor(model => sale.idProduct)</td>
                <td>@Html.DisplayFor(model => sale.nameProduct)</td>
                <td>@Html.DisplayFor(model => sale.costProduct)</td>
                <td>@Html.DisplayFor(model => sale.profitProduct)</td>
                <!--Get values to put on Modal-->
                <td><a class="update" data-id="@sale.idProduct" data-name="@sale.nameProduct" data-cost="@sale.costProduct" data-profit="@sale.profitProduct"><span class="glyphicon glyphicon-edit">Alterar</span></a></td>
            </tr>
 }