C#-按提交时加载图标

Question

我正在创建一个 MVC 网站，我想要的其中一件事是在按下我拥有的提交按钮时旋转的 gif，直到加载新视图。以下是我当前的代码，不幸的是它不起作用，我不知道为什么。

<p>
       @using (Ajax.BeginForm("Index", "Home", FormMethod.Get, new AjaxOptions ()
       {
           UpdateTargetId = "result",
           LoadingElementId = "myLoadingElement"
       }))
       {
           @Html.TextBox("search", null, new { style = "width:500px;" })<input type="submit" value="search" />
       }
  </p>                    

//some more code

<div id="myLoadingElement" style="display: none;">
    <img src="~/photos/image"/>
</div>

有谁知道我的问题是什么？我对 MVC 很陌生，这是我第一次尝试使用 AJAX 谢谢

Answer 1

LoadingElementId 应该直接指向 .gif 图片
您的图片 src 属性看起来不正确，应该类似于 src="~/photos/image/loading.gif"
最后，为了 AJAX 调用在 MVC 中正常工作，您需要添加对三个 javascript libraries.Please 注释的引用 - 订单事项:

3.1)jquery-1.8.0.js

3.2)jquery.validate.js

3.3)jquery.unobtrusive-ajax.js

下面的完整示例。

控制器：

public class HomeController : Controller
{
    public string Index(string search)
    {
        Thread.Sleep(5000);
        return "Hello " + search;
    }
}

查看：

<script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.validate.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

@using (Ajax.BeginForm("Index", "Home", null, new AjaxOptions()
        {
            UpdateTargetId = "result",
            LoadingElementId = "myLoadingElement"
        },
            null))
{
    @Html.TextBox("search", null, new { style = "width:500px;" })
    <input type="submit" value="search" />
}

<img id="myLoadingElement" src="~/photos/image/loading.gif" style="display:none;width:70px;height:70px;" />
<div id="result">
</div>

编辑：

Ajax.BeginForm 用于调用控制器操作并显示结果 page.If 调用控制器操作并在完成后重定向到不同的视图您应该使用标准 Html.BeginForm 并使用 jQuery:

使加载 .gif 出现

<script src="~/scripts/jquery-1.8.0.js"></script>
<script type="text/javascript">
    $(function () {
        $("#myform").submit(function (e) {
            $("#myLoadingElement").show();
        });
    });
</script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "myform" }))
{
    @Html.TextBox("search", null, new { style = "width:500px;" })
    <input type="submit" value="search" />
}
<img id="myLoadingElement" src="~/photos/image/loading.gif" style="display:none;width:70px;height:70px;" />

C#-按提交时加载图标

C#- Loading icon when pressing submit

c#

asp.net

ajax

jquery

asp.net-ajax