通过Html.BeginForm提交激活加载动画

Question

我想在用户点击提交按钮时显示加载动画.简单的gif将完成这项工作.这是我的代码:

@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>   
}

Answer 1

编辑

我错误地认为这个问题与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该类设置a LoadingElementId,Ajax帮助器将在等待服务器响应时显示该元素:

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

然后只需将您的gif放在您想要显示的位置(最初隐藏):

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