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

I want to display loading animation when the user clicks on submit button. Simple gif will do the job. This is my code:

我想在用户点击提交按钮时显示加载动画。简单的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>   
}

1 个解决方案

#1

Edit

编辑

I mistakenly thought the question concerned the AJAX helper. Here's how you could do it using the HtmlHelper.

我错误地认为这个问题与AJAX助手有关。以下是使用HtmlHelper的方法。

First, add an ID to the form so you can grab it using JQuery:

首先，在表单中添加一个ID，以便您可以使用JQuery获取它：

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

Next, add a Javascript event handler to intercept the form submission and display the loading GIF.

接下来，添加一个Javascript事件处理程序来拦截表单提交并显示加载GIF。

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

(Original answer follows...)

（原始答案如下......）

Use the AjaxOptions class to set a LoadingElementId, and the Ajax helper will display that element while waiting for the response from the server:

使用AjaxOptions类设置LoadingElementId，Ajax帮助器将在等待服务器响应时显示该元素：

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

Then simply place your gif wherever you want it to display (hide it initially):

然后只需将您的gif放在您想要显示的位置（最初隐藏）：

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

#1