Question

我不能为我的生活弄清楚为什么这个postback 有时候会按照它应该做的ajax，有时却没有。以下是相关代码：

JS：

<html>
<head>
<title>Index</title>
<link href="/Content/screen.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link href="/Content/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href="/Content/plugins/fancy-type/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/buttons/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/link-icons/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="/Content/jQueryUI/css/cupertino/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/HelpDesk.css" rel="stylesheet" type="text/css" />
<link href="/Content/droppy.css" rel="stylesheet" type="text/css" />
<link href="/Content/tablesorter.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.droppy.js" type="text/javascript"></script>
<script src="/Scripts/jquery.cascadingDropDown.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(function () {
        $('#nav').droppy();
    });
</script>
<script type="text/javascript">
        $(document).ready(function () {
            $("#targetStartDate").datepicker();
            $("#targetEndDate").datepicker();
            $("#ticketsHTMLTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
            $(".fakeLink").mouseover(function () {
                $(this).css("color", "red");
            });
            $(".fakeLink").mouseout(function () {
                $(this).css("color", "black");
            });
        });
</script>
</head>

这是我的观点（剃刀）：

@using (Ajax.BeginForm("Index", "Problem", new AjaxOptions
{
    HttpMethod = "GET",
    UpdateTargetId = "ticketsTable",
    InsertionMode = InsertionMode.Replace

}))
{
       <div class="notice">
        <div class="prepend-1 span-2">
            <label for="targetPriorityID">
                Priority</label>
        </div>
        <div class="prepend-1 span-3">
            <label for="targetStatusID">
                Status</label>
        </div>
        <div class="span-3">
            <label for="targetBusinessUnitID">
                Business Unit</label>
        </div>
        <div class="span-3 prepend-1">
            <label for="targetStartDate">
                Start Date</label></div>
        <div class="span-3 prepend-2">
            <label for="targetEndDate">
                End Date</label></div>
        <div class="prepend-1 span-3 last">
            &nbsp
        </div>        <div class="prepend-1 span-2">
            @Html.DropDownList("targetPriorityID",
new SelectList(ViewBag.Priorities as System.Collections.IEnumerable,
"ID", "Title"), "All", new { @onchange = " this.form.submit();" })
        </div>
        <div class="prepend-1 span-3">
            @Html.DropDownList("targetStatusID",
new SelectList(ViewBag.Statuses as System.Collections.IEnumerable,
       "ID", "Title"),"All", new { @onchange="this.form.submit();" })
        </div>
        <div class="span-3">
            @Html.DropDownList("targetBusinessUnitID",
new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable,
       "ID", "Title"), "All", new { @onchange = "this.form.submit();" })
        </div>

        <div class="span-3 prepend-1">@Html.TextBox("targetStartDate", "", new { onchange = "this.form.submit();" })</div>
        <div class="span-3 prepend-2">@Html.TextBox("targetEndDate", "", new { onchange = "this.form.submit();" })</div>
        <div class="prepend-1 span-3 last">
            <input type="submit" value="Hide" />
        </div>
        <br />
        <br />
        <br />
    </div>
}
<div id="ticketsTable">
    @Html.Partial("_AllTickets", Model)
</div>

最后是控制器，

    [HttpPost]
    public ActionResult Index(int targetPriorityID = -1, int targetBusinessUnitID = -1, int targetStatusID = -1, string targetStartDate = "", string targetEndDate ="")
    {
        Repository<Priority> priorityRepository = new Repository<Priority>();
        Repository<BusinessUnit> businessUnitRepository = new Repository<BusinessUnit>();
        Repository<Status> statusRepository = new Repository<Status>();

        ViewBag.Priorities = priorityRepository.GetAll();
        ViewBag.BusinessUnits = businessUnitRepository.GetAll();
        ViewBag.Statuses = statusRepository.GetAll();

        var results = problemRepository.GetAll();

        results = (targetPriorityID != -1) ? results.Where(t => t.PriorityID == targetPriorityID) : results;
        results = (targetBusinessUnitID != -1) ? results.Where(t => t.BusinessUnitID == targetBusinessUnitID) : results;
        results = (targetStatusID != -1) ? results.Where(t => t.StatusID == targetStatusID) : results;
        results = (targetStartDate != "") ? results.Where(t => t.DateReported >= DateTime.Parse(targetStartDate)) : results;
        results = (targetEndDate != "") ? results.Where(t => t.DateReported <= DateTime.Parse(targetEndDate)) : results;


        if (Request.IsAjaxRequest())
        {
            return PartialView("__AllTickets", results);
        }

        return View(results);

    }

有什么想法？

Answer 1

我建议您使用以后将成为AJAXified的普通表格：

@using (Html.BeginForm("Index", "Problem")
{
    <div class="notice">
        <div class="prepend-1 span-2">
            <label for="targetPriorityID">Priority</label>
        </div>
        <div class="prepend-1 span-3">
            <label for="targetStatusID">Status</label>
        </div>
        <div class="span-3">
            <label for="targetBusinessUnitID">Business Unit</label>
        </div>
        <div class="span-3 prepend-1">
            <label for="targetStartDate">Start Date</label></div>
        <div class="span-3 prepend-2">
            <label for="targetEndDate">End Date</label>
        </div>
        <div class="prepend-1 span-3 last">
            &nbsp
        </div>        
        <div class="prepend-1 span-2">
            @Html.DropDownList("targetPriorityID", new SelectList(ViewBag.Priorities as System.Collections.IEnumerable, "ID", "Title"), "All")
        </div>
        <div class="prepend-1 span-3">
            @Html.DropDownList("targetStatusID", new SelectList(ViewBag.Statuses as System.Collections.IEnumerable, "ID", "Title"), "All")
        </div>
        <div class="span-3">
            @Html.DropDownList("targetBusinessUnitID", new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable, "ID", "Title"), "All")
        </div>

        <div class="span-3 prepend-1">
            @Html.TextBox("targetStartDate", "")
        </div>
        <div class="span-3 prepend-2">
            @Html.TextBox("targetEndDate", "")
        </div>
        <div class="prepend-1 span-3 last">
            <input type="submit" value="Hide" />
        </div>
        <br />
        <br />
        <br />
    </div>
}

<div id="ticketsTable">
    @Html.Partial("_AllTickets", Model)
</div>

然后在另一个文件AJAXify中：

$(function() {
    $('form :input').change(function() {
        var form = $('form');
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(result) {
                $('#ticketsTable').html(result);
            }
        });
    });
});

我建议你的另一个改进是使用视图模型并摆脱ViewData并使用强类型助手。

Answer 2

我想知道Request.IsAjaxRequest（）是否导致问题。我会考虑删除该代码并始终返回PartialView("__AllTickets", results);。

Answer 3

我可以看到的一个问题是Razor视图中的AJAX选项指定了GET HTTP方法，但控制器操作上的操作过滤器指定了POST。

使用ASP.NET MVC时，Ajax.BeginForm（...）并不总是有效，完全回发

3 个答案: