Question

我的应用程序调用API，返回将以表格格式显示的数据列表。它将在局部视图中放置。

我希望在页面加载时显示加载屏幕，并在格式化表格后隐藏它。我怎么做到这一点？我知道我应该使用jquery，但这就是我所知道的，

这是我的显示代码。

<table>

<tr>
   @{ 
       var count = typeof(ModelType).GetProperties().Count() - 1;
       for (int i = count; i != 0; i--)
       {
        <th></th>
       }
     }
<tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Phone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
        </tr>                    
    }     

</table>

修改

我希望在格式化表格数据之前显示blockUI。

我的JS使用BlockUI。

function LoadPartialFile()
{
    $('#blocker').block({ message: null });

    $.ajax({
        cache: false,
        url: '/User/GetFilePartialTable',
        type: 'GET',
        dataType: 'html',
        contentType: 'application/html; charset=utf-8',
        success: function (viewHTML) {
            $('#replaced').html(viewHTML);
            },
        error: function (request, status, err) {
            alert(status);
            alert(err);
        }
    });
    $('#blocker').unblock();
}

我的观点

<div><button onclick="LoadPartialFile()">Load Chart</button> 
<button onclick="LoadPartialFile()">Load Chart</button> 
</div>
<div id="blocker">        
    <div id="replaced" style="height:500px;width:100%">          
    </div>
</div>

Answer 1

jQuery BlockUI插件的示例。 HTH

1 / Download并在您的asp.net mvc项目中加入jquery.blockUI.js。

2 /包括jquery.blockUI.js到BundleConfig。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.blockUI.js"));
    }
}

3 /检查_Layout.cshtml是否呈现包

<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

4 /在视图中，在ajax开始时调用$.blockUI()，在调用ajax时调用$.unblockUI()。

<div>
    <button onclick="LoadPartialFile()">Load Chart</button>
</div>

<div id="replaced" style="height:500px;width:100%"></div>

@section Scripts {
    <script type="text/javascript">
        function LoadPartialFile() {

            $.blockUI({
                css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                }
            });

            $.ajax({
                cache: false,
                url: "@Url.Action("ListOfData", "BlockingUi")",
                type: 'GET',
                dataType: 'html',
                contentType: 'application/html; charset=utf-8'
            })
            .done(function(viewHtml) {
                $('#replaced').html(viewHtml);
            })
            .fail(function(request, status, err) {
                alert(status);
                alert(err);
            })
            .always(function() {
                $.unblockUI();
            });
        }
    </script>
}

5 /添加控制器，其中包含返回部分视图的操作

public class BlockingUiController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public ActionResult ListOfData()
    {
        Thread.Sleep(2500); // For testing of the blocking UI
        var model = new List<ListOfDataModel>
        {
            new ListOfDataModel
            {
                Name = "John", 
                LastName = "Doe", 
                Phone = "111-222-333"
            }
        };
    }
}

显示加载屏幕并在格式化数据后隐藏它

修改

1 个答案: