2016-10-17 54 views
0

所以目前,我試圖用ajax替換刷新的局部視圖。我試圖用裝載機替換它加載時用「LoadingElementId」替換「UpdateTargetId」?

下面的圖片應該解釋我正在嘗試做什麼。 enter image description here

當按鈕被點擊時,它應該呈現加載器(藍色矩形)來代替局部視圖(紅色矩形和它上面的文本,我忘記把文本放在那裏),但是,作爲你可以看到它分開渲染它們。

這裏是如何的按鈕被稱爲:

@{using (Ajax.BeginForm("_LogOut", "User", 
       new AjaxOptions 
       { 
        UpdateTargetId = "userInformation", 
        LoadingElementId = "loader-container", 
        InsertionMode = InsertionMode.Replace, 
        HttpMethod = "GET" 
       })) 
      { 
       <button type="submit" class="btn btn-danger btn-raised text-center"> 
        <i class="material-icons">refresh</i> 
        Refresh Data 
       </button> 
      } 
     } 

如果你想的是如何局部視圖建立在一個更加深入的樣子:http://pastebin.com/1mMfpQyB

按鈕刷新數據properly-所以它的工作原理!唯一的問題是(我認爲是)「UpdateTargetId」和「LoadingElementId」的交互。

回答

0

我不知道這是否是最好的實際解決方案,但它工程─雖然有點哈克:

  @{ 
      using (Ajax.BeginForm("_LogOut", "User", 
       new AjaxOptions 
       { 
        UpdateTargetId = "userInformation", 
        LoadingElementId = "loadercontainer", 
        InsertionMode = InsertionMode.Replace, 
        HttpMethod = "GET", 
        OnBegin = "$('#userInformation').slideUp(); $('#loadercontainer').slideDown()", 
        OnComplete = "$('#userInformation').slideDown(); $('#loadercontainer').slideUp()" 
       })) 
      { 
       <button type="submit" class="btn btn-danger btn-raised text-center"> 
        <i class="material-icons">refresh</i> 
        Refresh Data 
       </button> 
      } 
     } 

總之,我委派了ajaxoptions onbegin和的onComplete調用一些jQuery的:

OnBegin = "$('#userInformation').slideUp(); $('#loadercontainer').slideDown()", 
OnComplete = "$('#userInformation').slideDown(); $('#loadercontainer').slideUp()"