1

我正在开发一个 Asp.Net MVC3 webapplication。我有一个文本框和一个按钮。我使用 MVC WebGrid 根据搜索字符串在 UI 中显示数据。我正在尝试使用 jquery 拉出没有页面回发的 mvc webgrid。我需要 Jquery 代码中的一些帮助来填充数据而无需回发。

我现在正在做的是 jquery on button click 或 on selected item 我正在将选定的 id 重定向到页面，如下所示。

 select: function (event, ui) { 
                $.ajax({ url: 'ControllerName', 
                    type: 'POST', 
                    data: { id: ui.item.id 
                    }, 
                    async: false, 
                    success: function (result) { 
                        window.location.replace("ControllerName" + '?id=' + ui.item.id); 
                    } 
                });
4

1 回答 1

2

通过使用$.support（参见http://api.jquery.com/jQuery.support/），您可以检查是否启用了 AJAX：

 $.support.ajax

一旦我们知道是否启用了 AJAX，我们就可以构建一个智能搜索按钮。让我们在 MVC 中设置你的控制器/动作：

public ActionResult Search(string q)
{
     //TODO: Some logic to perform a search
     MySearchResultsModel results = new MySearchResultsModel(); //Populate results with some model of data

     if (Request.IsAjaxRequest())
          return PartialView("_Results", results); //partial view w/ results
     else
          return View("Search",results); //Returns a full page
}

现在我们的控制器操作已设置为执行搜索，我们需要两个不同的视图：

  • 将呈现搜索结果的 HTML 的局部视图（称为“_Results”）
  • 如果浏览器不（称为“搜索”）支持 AJAX，将包装部分视图的完整视图

现在，“搜索”页面看起来像：

@model MySearchResultsModel
<h2>Search Results</h2>
@Html.Partial("_Results",model)

“_Results”将包含原始 HTMl 或使用您的 MVC WebGrid：

 @model  MySearchResultsModel
 <ul>
 @foreach(var result in MySearchResultsModel.Results)
 {
      <li>@result.SomeProperty</li>
 }
 </ul>

现在，如何使这一切正常工作？假设您的页面上有一个 id 为“searchResults”的 div：

 <div id="searchResults"></div>

您需要一个表格进行搜索：

 <form action="@Url.Action("Search")" id="searchForm">
      <input type="text" name="q" value=""/>
      <input type="submit" value="Search"/>
 </form>

你需要一些 JS 来捕获表单提交

 $(function(){
      $('#searchForm').submit(function(e){
           if($.support.ajax) //Is AJAX enalbed?
           {
                e.preventDefault(); //prevent the form from submitting

               //Send the request via AJAX
               $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'), //Read the action from the FORM url OR you could use @Url.Action('Search')
                    data: $(this).serialize(),  //The forms data
                    success: function (response) {
                        $('#searchResults').html(response); //This sets the DIV's contents to the AJAX response
                    },
                    error: function () {
                        alert('An error occured while performing your search');
                    }
                });

           } 
      });
 });
于 2012-05-15T18:56:55.663 回答