如何使用json在WebGrid中搜索结果？ [英] How to search result in WebGrid using json ?

问题描述

我尝试根据ajax搜索内容。我在按钮点击上成功构建搜索功能。

现在我想在搜索文本框中输入时显示搜索结果。



我的行动方法下ProjectManager控制器

I try to search content based on ajax. i successfully build search function on button click.
Now i want to show search result when typing in search textbox.

My Action Method under ProjectManager Controller

public ActionResult SearchAjax(string SearchKey )
        {
            ProjectUtility OProjectUtility = new ProjectUtility();
            IEnumerable<Project> obj = ProjectUtility.SearchByKey(Request.Url.Segments[3].ToString());
           
            return Json(obj);
        }

我的搜索功能

my search function

public IEnumerable<Project> SearchByKey(string SearchKey)
       {
           var context = new MountSinaiEntities1();

           var matches = from m in context.Project
                         where m.projectName.Contains(SearchKey)
                         select m;

           return matches;
       }

我的java脚本代码

my java script code

function Search() {                
              var GetURL = location.protocol + "//" + location.host + "/ProjectUtility/SearchAjax";

                $.ajax({
                    cache: false,
                    type: "POST",
                    async: false,
                    url: GetURL,
                    dataType: "json",
                    success: function (Projects) {
                        //What to do here
                    }
                });
            }

搜索TextBox

Search TextBox

<input type="text" id="inputForm" name="txtSearch"  placeholder="Search"   önkeyup="Search()" /> 

绑定WebGrid的代码

Code to bind WebGrid

var grid = new WebGrid(Model, defaultSort: "projectName", rowsPerPage: 10, canPage: true, canSort: true, ajaxUpdateContainerId: "Grid");

推荐答案

.ajax（{
cache： false ，
type ： POST，
async： false ，
url：GetURL，
dataType： json，
成功： function （Projects）{
// 这里做什么
}
}）;
}

.ajax({ cache: false, type: "POST", async: false, url: GetURL, dataType: "json", success: function (Projects) { //What to do here } }); }

搜索TextBox

Search TextBox

<input type="text" id="inputForm" name="txtSearch"  placeholder="Search"   önkeyup="Search()" /> 

绑定WebGrid的代码

Code to bind WebGrid

var grid = new WebGrid(Model, defaultSort: "projectName", rowsPerPage: 10, canPage: true, canSort: true, ajaxUpdateContainerId: "Grid");

This are just my suggestions :)
1)If you go by your current approach where you return a json object to the UI, you might need a UIGrid such as (JqGrid,Jquery Table Grid) else you can also write to create your own grid which can consume the json.
2) Another approach, You can achieve this with the following steps.
   a) Put the web grid in a separate view
   b) Your main CsHtml should contain the textbox, ajax call.
   c) Modify your searchAjax method to return the model instead of the json. something like 
      // return view( "MyWebGridView" , model);
   d) in your main csHtml create a div with an ID.
   e) Now in the

.ajax成功方法中，您将以html模式接收视图（包含网格）。
f）现在你所要做的就是将html内容绑定到你的div。
//

.ajax success method you will receive the view(containing web grid) in html mode. f) Now all you have to do is, bind the html content to your div. //

这篇关于如何使用json在WebGrid中搜索结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！