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

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

改變輸入你需要使用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 3

必須使用VAL（）。您可以使用像一個文本（ 「ASDA」）。你改變這些問題解決