Ajax.BeginForm重複表示

Question

コンテキスト：MVC3、JQuery

こんにちは！
テキストボックスに入力することでwebgridをフィルタリングしようとしています。問題は、Ajax.BeginFormを使用すると、webgridを配置する場所全体が複製されます。

本明細書で同じ問題であるjquery.unobtrusive-ajax.min causing strange behavior on the view

コントローラ

 

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

部分図

 

@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") 
     ))} 
 

メインビュー

 

@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 
 

は、私は本当にそれを必要とする、ヘルプみんなありがとう:)

Answer 1

私は一目で見ることができるあなたのコードに問題のカップルがあるように思える：

1. あなたはレイアウトを無効にしていますメインビューには、=>私はあなたが必要としているjQuery.jsとjquery.unobtrusive-ajax.jsスクリプトを参照した場所を確認していないあなたのFilesコントローラのアクションは、それがAjax呼び出しを介してアクセスすることができないことを意味[ChildActionOnly]属性で飾られている

は、私は少しをあなたのコードをきれいにし、例を提供しようとしている：

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リクエストをサーバーに送信することに注意してくださいユーザーがテキストボックスにキーを入力することは非常に悪い考えです。