为什么Ajax.BeginForm在partialview之前再次加载索引?

时间:2016-07-26 08:42:51

标签: c# ajax asp.net-mvc razor

我正在使用Ajax.BeginForm来更新具有partialview的div(根据搜索字段中的搜索输入加载日志)。

一般的想法是在您第一次使用默认值登录时加载索引,然后在从那里搜索时仅更新日志(部分视图)。

问题 - 当我调试我的程序时,它会在加载局部视图之前在控制器的Index处停止 - 导致加载时间过长。

问题 - 如何才能使Ajax请求只加载局部视图?

代码

_LogLayout.cshtml

 <div id="log" class="tab">
     <h1>Log</h1>

     @using (Ajax.BeginForm("LogPartialView", "LogModelsController",
         new AjaxOptions
         {
             HttpMethod = "POST",
             InsertionMode = InsertionMode.Replace,
             UpdateTargetId = "divLogs",
         }, new
         {
             id = "NewTableId"
         }))
         {
             <p>@Html.TextBox("SearchString", null, new { @placeholder = "Message" })</p>
             if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Admin"))
             {
                 <p>
                     @Html.DropDownList("SelectedCustomer", Model.LogModelVmObject.CustomerList, new { @id = "logdropdownlabel", @class = "dropdownlabels" })
                 </p>
             }

             <p>
                 <input type="submit" class="standardbutton logsearch" name="submit" value="Search" />
             </p>
         }

         @using (Html.BeginForm("ExportData", "LogModels"))
         {
             <input type="submit" name="export" class="standardbutton export" value="Export to Excel" />
         }

         <div id="divLogs">
             @Html.Raw(ViewBag.Data)
             @Html.Partial("_LogPartialLayout")
         </div>
     </div>
</div>

LogModelsController.cs

/// <returns>   
///     Returns the populated log with the current customers information if the user is of the Role Member,     
///     otherwise if the user is in the Role Admin - then show all customers logs by default.
/// </returns>
public async Task<ActionResult> Index()
{
    if (Session["myID"] == null)
        return ExpireSession();

    const int pageNumber = 1;
    var lmvm = new LogModelVm { CurrentSort = null };
    var myId = Convert.ToInt32(Session["myID"].ToString());

    if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Admin"))
    {
        _customer = _cdvdb.GetAllCustomerIds();
        _message = _db.GetLogs();
    }
    else if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Member"))
    {
        _message = _db.GetLogsById(myId);
    }

    var logs = _message.OrderByDescending(i => i.Timestamp).ToPagedList(pageNumber, PageSize);

    if (Roles.IsUserInRole(WebSecurity.CurrentUserName, "Admin"))
    {
        if (_customer != null)
        {
            var selectListItems = _customer as SelectListItem[] ?? _customer.ToArray();
            foreach (var log in logs)
                log.Name = selectListItems.FirstOrDefault(a => a.Value == log.CustomerId.ToString())?.Text;
            lmvm.CustomerList = selectListItems;
        }
    }

    lmvm.Logs = logs;

    var model = new LogStatisticsModel
    {
        LogModelObject = new LogModel(),
        StatisticsModel = await StatisticsData.GetAllCurrentStatisticsValues(1, DateTime.Now),
        LogModelVmObject = lmvm
    };

    return View(model);
}

/// <returns> 
///     Returns a partial view of the log. 
/// </returns>
[HttpPost]
public ActionResult LogPartialView(string searchString, int? selectedCustomer, string currentMessageFilter, string currentCustomerFilter, int? page, string sortOrder)
{
    // Some code.
    return PartialView("_LogPartialLayout", model);
}

RouteConfig.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace MyProject
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute("Default", "{controller}/{action}/{id}", new { controller = "Login", action = "Index", id = UrlParameter.Optional });

            routes.MapRoute("Log", "{controller}/{action}/{Id}");

            routes.MapRoute("Admin", "");
        }
    }
}

Index.cshtml

@model MyProject.Models.LogStatisticsModel
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    ViewBag.Title = "MyPortal";
    Layout = "~/Views/Shared/_LogLayout.cshtml";
}

1 个答案:

答案 0 :(得分:0)

经过与@StephenMuecke的长时间讨论(其中有很多有用的东西)告诉我试着在_LogLayout.cshtml文件中注释掉每一个javascript并逐个取消注释,看看是否有任何一个引起了问题。

我发现以下脚本导致了这个问题。

<script type="text/javascript">
    $('#loadercheck').click(function () 
    {
        $('#loader').show();
        $.ajax(
        {
            success: function () 
            {
                $('#loader').delay(1200).hide(400);
            }
        });
    })
</script>

以下脚本用于在日志加载数据时显示旋转加载程序。显然这会导致再次调用Index()。所以我必须找到一种新的方式来显示一个装载机......