如何動態更改mvc3 html頁面中的值

Question

 <tr> 
      <td> 
       Delivery 
      </td> 
      <td> 
       <div class="confdelivery"> 
        <select id="NxtDay" name="NxtDay"> 
         <option selected="selected" value="1">Normal Devliery + 10.00</option> 
          <option value="2">Next Day Delivery + 20.00</option> 
         </select> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Total 
       </td> 
       <td> 
        @{ 
       var total = Model.CartTotal; 
      } 
      @total 
       </td> 
      </tr> 

基本上如果用戶選擇次日發貨。我想將20添加到@total？

Answer 1

我想說的是，這是錯誤的方式。您可以使用javascript更新某些輸入值，也可以使用控制器操作中的NxtDay值分配正確的值，具體取決於所選內容。

新增：

你想要做的是這樣的：（我假設你正在使用jQuery，因爲它配備了MVC3）。

然而，如果你開始，你應該檢查一些教程。這是非常基本的東西，除非閱讀這篇文章，否則如果不必回到這裏，就不會走得太遠。

<tr> 
    <td> 
     Delivery 
    </td> 
    <td> 
     <div class="confdelivery"> 
      <select id="NxtDay" name="NxtDay"> 
       <option selected="selected" value="10">Normal Devliery + 10.00</option> 
       <option value="20">Next Day Delivery + 20.00</option> 
      </select> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     Total 
    </td> 
    <td> 
     <span id="totalValue" style="display: none">@Model.CartTotal</span> 
     <span id="totalWithShipping">0</span> 
     <input id="hiddenTotal" type="hidden" value="0"> 
    </td> 
</tr> 

<script> 
    $(document).ready(function() { 
     $('#NxtDay').change(function() { 
      addToTotal(); 
     }); 
    }); 
    function addToTotal(){ 
     $('#totalWithShipping').html($('#totalValue').html() + $("#NxtDay option:selected").val()); 
     $('#hiddenTotal').val($('#totalWithShipping').html()); 
    } 
</script>