C# 在ASP.net MVC中使用ajax搜索表中的数据_C#_Jquery_Asp.net_Ajax_Asp.net Mvc

C# 在ASP.net MVC中使用ajax搜索表中的数据

c# jquery asp.net ajax asp.net-mvc

C# 在ASP.net MVC中使用ajax搜索表中的数据,c#,jquery,asp.net,ajax,asp.net-mvc,C#,Jquery,Asp.net,Ajax,Asp.net Mvc,我想根据文本框中的搜索条件在表中显示数据。我没有使用Ajax实现它，但不知道如何使用jquery调用controller方法并更新表数据。请设法解决我的问题。谢谢 Index.cshtml @model IEnumerable<MvcApplication4.Models.tbl_product> @{ Layout = null; } <!DOCTYPE html> <html> <head> <script sr

我想根据文本框中的搜索条件在表中显示数据。我没有使用Ajax实现它，但不知道如何使用jquery调用controller方法并更新表数据。请设法解决我的问题。谢谢

Index.cshtml

@model IEnumerable<MvcApplication4.Models.tbl_product>
@{
    Layout = null;
}

    <!DOCTYPE html>
<html>
<head>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
    <title>Index</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Button1').click(function () {
                alert("button clicked");
                $.ajax({
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    url: 'Home/Index',
                    data: "{'searchString':'" + document.getElementById('searchString').value + "'}",
                    async: false,
                    Success: function (response) {
                        alert("Success");

                           window.location.reload();
                    },
                    error: function () { alert("error"); }
                });

            });
        });
    </script>
</head>
<body>
    @*  @using (@Html.BeginForm("Index", "Home"))
    {*@
    @Html.TextBox("searchString");
    <input type="button" value="filter" id="Button1" />
    @* }*@
    <table id="showData">
        @{Html.RenderPartial("SearchList");}
    </table>
</body>
</html>

您的ajax请求应该如下所示：

        $.ajax({
        url: '/<ControllerName>/<MethodName>',
        type: "POST",
        data: requestData,
        contentType: "application/json;charset=utf-8",
        success: function (data, textStatus, XMLHTTPRequest) {

            //Success callback handling
        },
        error: function (XMLHTTPRequest, textStatus, errorThrown) {
            //Error callback handling
        },
        cache: false //whether you want to cache the response or not.
    });

$.ajax({
url:“/”，
类型：“POST”，
数据：请求数据，
contentType:“应用程序/json；字符集=utf-8”，
成功：函数（数据、textStatus、XMLHTTPRequest）{
//成功回调处理
},
错误：函数（XMLHTTPRequest、textStatus、errorshown）{
//错误回调处理
},
cache:false//是否要缓存响应。
});

//写ControllerName时不要使用按键控制器。

我不会给你确切的答案，而是帮助你得到答案

有两个步骤：

首先您必须确保请求已完成，并且响应已在浏览器上获得

要做到这一点，你可以

在路上做：只留下

警报（“成功”）并检查它是否正在运行


比这更好的是，使用F12打开浏览器的开发者控制台（我更喜欢Chrome，但你也可以使用IE或FireFox+FireBug插件）。设置断点并检查变量值和代码流。见
在服务器操作上设置断点，并检查其是否已执行


Second一旦确定第一部分工作正常，使用success函数将表内容替换为响应中接收到的数据。使用jQuery可以通过多种方式实现。比如说
$('#showData').html(response);

同样，您可以在浏览器中从开发人员控制台执行此代码并检查响应内容。当您开始使用javascript时，这会使事情变得更加复杂
（如果您的操作生成了整个表，您可以使用jQuery的replaceWith
，它将替换目标，而不是其内容。在这种情况下不要使用此选项）
最后注意：请删除此代码window.location.reload（）！！！这将使用当前URL重新加载整个页面，因此您事先所做的任何事情都将丢失
                $.ajax({
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    url: 'Home/Index',
                    data: JSON.stringify({'searchString':document.getElementById('searchString').value }),
                    async: false,
                    Success: function (response) {
                        alert("Success");
                        //append the data in between table tbody like,
                        $('table tbody').html(response);
                        //No window.location.reload(); It will cause page reload initial data will appear in grid.
                    },
                    error: function () { alert("error"); }
                });
                return false

希望这有帮助。我做了一些更改，但ajax部分没有执行，我编辑了上面的代码……我更改了上面的代码并实现了ajax，但它不起作用，表也没有更新。
$.ajax({
            url: '/ControllerName/ActionName',
            type: "POST",
            data: {criteria: 'criteria'},
            contentType: "application/json",
            success: function (data) {
            //Replace existing table with the new view (with the table).
            }
        });

$('#showData').html(response);

                $.ajax({
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    url: 'Home/Index',
                    data: JSON.stringify({'searchString':document.getElementById('searchString').value }),
                    async: false,
                    Success: function (response) {
                        alert("Success");
                        //append the data in between table tbody like,
                        $('table tbody').html(response);
                        //No window.location.reload(); It will cause page reload initial data will appear in grid.
                    },
                    error: function () { alert("error"); }
                });
                return false