通过Html.BeginForm提交激活加载动画 [英] Activating loading animation by Html.BeginForm submission

问题描述

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

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

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

推荐答案

编辑

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

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

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

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

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

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

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

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

---

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

---

(Original answer follows...)

使用 AjaxOptions 类设置 LoadingElementId ，并且Ajax助手将在等待来自服务器的响应时显示该元素：

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

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

然后只需将你的gif放在你想要的地方（最初隐藏）：

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

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

这篇关于通过Html.BeginForm提交激活加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！