Question

我正在开发Asp.Net MVC3 webapplication。我有一个文本框和一个按钮。我使用MVC WebGrid根据搜索字符串在UI中显示数据。我试图使用jquery将mvc webgrid拉出页面回发。我需要在Jquery代码中提供一些帮助，以便在回发后填充数据。

我现在正在做的是点击按钮或选择项目上的jquery我正在选择的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); 
                    } 
                });

Answer 1

使用$.support（请参阅http://api.jquery.com/jQuery.support/），您可以查看是否启用了AJAX：

 $.support.ajax

一旦我们知道AJAX是否启用，我们就可以构建一个智能搜索按钮。让我们在MVC中设置Controller / Actions：

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>

现在，如何让一切顺利？让我们说你的页面上有一个div，其id为“searchResults”：

 <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');
                    }
                });

           } 
      });
 });

使用Jquery的mvc3搜索结果

1 个答案: