Ajax.BeginForm复制视图

问题描述：

上下文：MVC3，JQuery

hello all！
即时尝试通过输入到一个文本框过滤webgrid，问题是，当使用Ajax.BeginForm整个布局是重复的webgrid应该在哪里。

这是相同的问题这里jquery.unobtrusive-ajax.min causing strange behavior on the view

控制器
Ajax.BeginForm复制视图

 

 [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

谢谢你的帮助球员，我真的需要它:)

答

似乎有一对夫妇与您的代码的问题，我可以在第一眼看到：

已经禁用布局你的主视图=>我没有看到你引用了所需要的jQuery.js和jquery.unobtrusive-ajax.js脚本
你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请求对服务器进行哈希处理用户在文本框中键入一些键是一个非常糟糕的主意。

Ajax.BeginForm复制视图

相关推荐