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

1. LoadingElementId应直接指向.gif图片
2. 您的图片src属性看起来不对，应该是src="~/photos/image/loading.gif"

3. 最后，为了让AJAX调用在MVC中正常工作，你需要为三个javascript库添加一个参考。请注意 - 顺序重要：

   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。如果您想要调用控制器操作并在完成后重定向到其他视图，则应使用标准Html.BeginForm并使加载.gif出现使用jQuery：

<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;" />