加載加載消息partial view jquery mvc3

Question

我有一個非常簡單的註冊嚮導窗體。這是一個用vb編寫的mvc3 \ razor項目。

我的問題是：我最後一步顯示了用戶輸入的詳細信息的局部視圖。由於部分可能需要一秒鐘才能加載，因此表單看起來很奇怪，直到它出現 - 帶有幾個按鈕的空白表單。有沒有一種乾淨的，正確的方式來顯示一個小的加載圖像/消息，而部分正在加載，所以對用戶來說顯然需要他/她保持秒。

我的針對寄存器視圖代碼：

$（函數（）{

$(".wizardstep:first").fadeIn(); // show first step 

    // attach back button handler 
    // hide on first step 
    $("#register-backstep").hide().click(function() { 
     var $step = $(".wizardstep:visible"); // get current step 
     if ($step.prev().hasClass("wizardstep")) { // is there any previous step? 
      $step.hide().prev().fadeIn(); // show it and hide current step 

      // disable backstep button? 
      if (!$step.prev().prev().hasClass("wizardstep")) { 
       $("#register-backstep").hide(); 
      } 
     } 
    }); 


    // attach next button handler  
    $("#register-nextstep").click(function() { 

     var $step = $(".wizardstep:visible"); // get current step 

     var validator = $("form").validate(); // obtain validator 
     var anyError = false; 
     $step.find("input").each(function() { 
      if (!validator.element(this)) { // validate every input element inside this step 
       anyError = true; 
      } 

     }); 

     if (anyError) 
      return false; // exit if any error found 

     if ($step.next().hasClass("confirm")) { // is it the confirmation div? 
      // post to the controller and show confirmation partial view asynchronously 
      $.post("ConfirmRegister", $("form").serialize(), function (r) { 
       // inject response in confirmation step 
       $(".wizardstep.confirm").html(r); 
      }); 

     } 

     if ($step.next().hasClass("wizardstep")) { // is there a next step? 
      $step.hide().next().fadeIn(); // show it and hide the current step 
      $("#register-backstep").show(); // recall to show back button 
     } 

     else { // this is last step, submit form 
      $("form").submit(); 
     } 


    }); 

}); 

<div class="uni-form"> 
    <fieldset> 
     <div class="wizardstep"> 
      <h2>Step 1: Your Username</h2> 
      <p class="wizardnote">Please choose a username you will use to login to >your account.</p>     
     </div> 
     <div class="wizardstep"> 
      <h2>Step 2: Your Email Address</h2> 
      <p class="wizardnote"></p>     
     </div> 
     <div class="wizardstep"> 
      <h2>Step 3: Choose a Password</h2> 
      <p class="wizardnote"></p>     
     </div> 
     <div class="wizardstep confirm"></div> 
     <div class="buttoncontainer"> 
      <input type="button" value="&larr;Back" id="register-backstep" /> 
      <input type="button" value="Next Step" id="register-nextstep" /> 
     </div> 
    </fieldset> 
</div> 

對於現在的局部視圖是模型元素的只是一個虛擬顯示

Answer 1

使用一個固定的位置div，它是包含div（uni-form）的高度/寬度，並可能將它的z-index向上移動，因此它絕對位於當可見時形成。

var h= $(.uni-form).height(); 
var w= $(.uni-form).width(); 

定位加載圖標，只要適當。

您可以使用CSS設置疊加（加載）div的不透明度，以便他們可以看到它後面的表單，並且它正在運行。當表單完成加載後，淡出覆蓋div。

希望有幫助。如果您試圖阻止用戶在所有內容加載時都不停地撥動，我建議使用此路線。