通過Html.BeginForm提交激活加載動畫

我想在用戶單擊提交按鈕時顯示加載動畫。簡單的gif將完成這項工作。這是我的代碼：通過Html.BeginForm提交激活加載動畫

@using (Html.BeginForm("SData","Crawl")) 
{ 
    <p> 
     Enter Starting URL:<input class="txt" type="text" id="sUrl" name="sUrl" title="Enter Starting URL"/> 
    </p> 

    <p> 
     Enter Number of Threads:<input class="txt" type="text" id="Nbt" name="Nbt" title="Enter number of threads"/> 
    </p> 

    <p> 
     <input class="button" id="submit" type="submit" value="Submit" /> 
    </p> 
}

來源

2012-11-06 Dr_Freeman

編輯

我誤以爲問題有關AJAX幫手。以下是如何使用HtmlHelper進行操作的方法。

首先，添加一個ID的形式，這樣你就可以使用JQuery抓住它：

@using (Html.BeginForm("SData", "Crawl", FormMethod.Post, new { id = "myform" })) 
{ 
    // the form 
}

接下來，添加JavaScript事件處理程序來截取表單提交，並顯示加載GIF。

$("#myform").submit(function(e) { 
    $("#myLoadingElement").show(); 
});

（原來的答覆如下...）

使用AjaxOptions類設置LoadingElementId和阿賈克斯助手將顯示元素在等待服務器的響應：

@using (Html.BeginForm("SData","Crawl", new AjaxOptions() { 
    LoadingElementId="myLoadingElement" 
})) 
{ 
    // form 
}

然後，只需將您的GIF，無論你希望它顯示（最初隱藏）：

<div id="myLoadingElement" style="display: none;"> 
    <img src="loading.gif" alt="Loading..." /> 
</div>

來源

2012-11-06 21:07:58 McGarnagle

我測試了你的代碼沒有成功。我打電話給SData操作方法，它會在完成後返回不同的視圖。這個想法是顯示加載gif，直到SData重定向到另一個視圖。我錯過了什麼嗎？ –

@JasminPvvlovic對不起，我完全分開。以爲你使用的是Ajax幫手。請看我更新的答案。 – McGarnagle

這個解決方案並不適合我。 ajaxOptions不是Html.BeginForm中的元素。這是拋出一個錯誤。 – paaone

通過Html.BeginForm提交激活加載動畫

回答

相關問題