Ajax.BeginForm (...) не всегда работает, иногда полная обратная передача, используя ASP.NET MVC - PullRequest
Новая
       12

Ajax.BeginForm (...) не всегда работает, иногда полная обратная передача, используя ASP.NET MVC

1 голос
/ 31 марта 2011

Я не могу на всю жизнь понять, почему этот постбэк иногда делает 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);

    }

Есть мысли?

Ответы [ 3 ]

1 голос
/ 31 марта 2011

Я бы предложил вам использовать обычную форму, которая будет 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 и использовать строго типизированные помощники.

0 голосов
/ 11 апреля 2011

Одна проблема, которую я вижу, состоит в том, что ваши параметры AJAX в представлении Razor указывают метод GET HTTP, а фильтр действий в действии контроллера указывает POST.

0 голосов
/ 04 апреля 2011

Интересно, вызывает ли Request.IsAjaxRequest () проблему? Я бы посмотрел на удаление этого кода и всегда возвращал PartialView("__AllTickets", results);.

...