Ajax.BeginForm дублирующий просмотр

Question

Контекст: MVC3, JQuery

Привет всем!
я пытаюсь отфильтровать сетку, набрав в текстовом поле, проблема в том, что при использовании Ajax.BeginForm весь макет дублируется там, где должна быть сетка.

это та же проблема, что и здесь jquery.unobtrusive-ajax.min, вызывающий странное поведение в представлении

Контроллер

</p>

<pre><code>        [HttpPost]
        [ChildActionOnly]
        public ViewResult Files(string filePath)
        {
            IEnumerable<File> results = repository.FindBy(f => f.Path.StartsWith(filePath)).Take(5);
            return View("_grid", results);
        }
</code>

частичный вид

</p>

<pre><code>@model IEnumerable<DAL.File>
@{
    Layout = null;
}
@{var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "myGrid");
  grid.Pager(WebGridPagerModes.NextPrevious);

        @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                             grid.Column("Path", "File"),
                                      grid.Column("Size", "Size (bytes)", canSort: true),
                                               grid.Column("User", "Owner")
        ))}
</code>

основной вид

</p>

<pre><code>@model IEnumerable<DAL.File>
@{
    Layout = null;
}
@using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }))
{
    @Html.TextBox("filePath", null, new { onKeyUp = "$('form').submit()" })    
}
div id="myGrid">
    @Html.Partial("_grid", Model)
/div 
</code>

Спасибо за помощь, ребята, мне это действительно нужно:)

Answer 1

Кажется, есть несколько проблем с вашим кодом, которые я вижу на первый взгляд:

1. Вы отключили макет на главном экране => Я не вижу, где у вас естьссылаются на необходимые сценарии jQuery.js и jquery.unobtrusive-ajax.js
2. Ваше действие контроллера Files украшено атрибутом [ChildActionOnly], означающим, что к нему нельзя получить доступ с помощью вызова Ajax

Я попытался немного очистить ваш код и привел пример:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var files = IEnumerable<File> results = repository.FindAll();
        return View(files);
    }

    [HttpPost]
    public ActionResult Index(string filePath)
    {
        var files = repository.FindBy(f => f.Path.StartsWith(filePath)).Take(5);
        return View("_grid", files);
    }
}

, и тогда у вас может появиться соответствующее представление Index.cshtml:

@model IEnumerable<DAL.File>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

@using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }))
{
    @Html.TextBox("filePath", null, new { onkeyup = "$('form').submit()" })    
}

<div id="myGrid">
    @Html.Partial("_grid", Model)
</div>

и _grid.cshtml частичный:

@model IEnumerable<DAL.File>
@{
    Layout = null;
}
@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "myGrid");
    grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(
        tableStyle: "webGrid",
        headerStyle: "header",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column("Path", "File"),
            grid.Column("Size", "Size (bytes)", canSort: true),
            grid.Column("User", "Owner")
        )
    )
}

Также обратите внимание, что хамеринг вашего сервера AJAX-запросами каждый раз, когда пользователь вводит какой-либо ключ в текстовое поле, является очень плохой идеей.