iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
Modern Web

從零開始使用Microsoft MVC架構來搭建web server系列 第 26

DAY 26 實作案例_忘記密碼程式詳解_View

  • 分享至 

  • xImage
  •  

在這個案例當中要比較注意的是參數的傳遞,Forget會傳遞一個Account參數那我們傳遞的順序是
view-Forget->Controller-DoForget函數-> view-Changepwd->controller-Dochange
Forget頁面
在這個頁面當中主要讓使用者輸入帳號
1.action="@Url.Action("Doforget", "Home")是將參數傳遞HomeController到Doforget這個函數當中
2.在 input當中,name="Account"中是對應到controller的參數當中
3.因為這個頁面當中會先做判斷帳號是否存在,因此在最底下有必須有一個來接收警示訊息的div

<h2>Forget</h2>

<b>忘記密碼</b>
<!--填入自己的帳號並傳送至Doforget函數-->
<div class="input-field">
    <form action="@Url.Action("Doforget", "Home")">
        <label for="account">帳號</label>
        <input type="text" class="input" id="Account" name="Account" required autocomplete="off">
        <button type="submit" class="btn btn-primary">送出</button>
</div>
<!--顯示錯誤資訊-->
<div style="color: red; margin-top: 10px;">@TempData["Errmsg"]</div>
                </div>

Changepwd
這裡我們在按下送出紐后理應要收到三個參數:newpassword、checkpassword、Account
1.在Changepwd的頁面當中我們主要是拿到使用者輸入的新密碼、確認密碼並傳輸到Dochange函數當中
2.input type='hidden'將這個輸入框設置為隱藏,所以使用者看不見,value="@TempData["Account"],將預設值為從Doforget的Account參數
3.

<h2>Changepwd</h2>
<!--填入新密碼與確認密碼並傳送至Dochange函數-->
<form action="@Url.Action("Dochange","Home")" method="post">
<!--這行相當於已經預設填入帳號並設置為隱藏,因此頁面中不會出現這個輸入框-->
    <input type='hidden' id="account" name="Account" value="@TempData["Account"]" />
    <div class="input-field">
        <label for="newpassword">密碼</label>
        <input type="password" class="input" id="newpassword" name="newpassword" required autocomplete="off">
    </div>
    <div class="input-field">
        <label for="checkpassword">確認密碼</label>
        <input type="password" class="input" id="checkpassword" name="checkpassword" required>
    </div>

    <div class="input-field">
        <input type="submit" class="submit" value="修改" required autocomplete="off">
    </div>
</form>
<!--顯示錯誤資訊-->
<div style="color: red; margin-top: 10px;">@TempData["Errmsg"]</div>
                </div>

上一篇
DAY 25 實作案例_忘記密碼
下一篇
DAY 27 實作案例_忘記密碼程式詳解_Controller
系列文
從零開始使用Microsoft MVC架構來搭建web server30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言