Asp.NET MVC中的模态

Question

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

有人能帮我吗？

我的桌子

我的模态需要打开填充数据

我的守则

表

<table class="table table-hover table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Produto</th>
            <th>Custo</th>
            <th>Lucro</th>
            <th>Opcoes</th>
        </tr>
    </thead>
    <tbody>
        @if (Model != null)
        {
            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-toggle="modal" href="#updateModal" 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>
            }
        }
    </tbody>
</table>
    enter code here

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();
    });
});

语气

<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" name="idProduct" id="idProduct" class="form-control" placeholder="ID do produto"/>
                        <input type="text" name="nameProduct" id="nameProduct" class="form-control" placeholder="ID do produto" required />
                        <input type="text" name="costProduct" id="costProduct" class="form-control" placeholder="Custo do Produto" required />
                        <input type="text" name="profitProduct" id="profitProduct" class="form-control" 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>
</div>

Answer 1

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

<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();
    });
});

Answer 2

您的modal仅包含输入。

要设置输入值，您使用$('#nameProduct').text(nameProduct) ，这是错误的。 你需要val()方法。

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

.text()方法专门用于div ， span等。

UPDATE

<td>@Html.DisplayFor(model => sale.idProduct)</td>产生span与后续的属性： id和name具有值idProduct 。 问题是你有两个具有相同id元素（在表格和模态中）。 id属性在DOM必须是唯一的。

语气

<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>

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>

HTML

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>
 }

Answer 3

你必须使用val（）。你像文本（“asda”）一样使用。你改变了这些问题的解决方法