从视图中传递 JsonData 并在视图中接收 JSON 返回值

问题描述

我正在尝试使用 ajax 通过用户输入将数据发送到控制器，并希望通过用户输入执行查询。后来我想通过 JsonResult 将查询结果返回到相同的视图。我已成功将数据发送到控制器，但找不到返回查询并在同一视图中显示的方法。

查看：

@{
    ViewBag.Title = "Deposit";
}

<table class="table table-bordered table-striped">
    <tr>
        <th>Sr No</th>
        <th>Party Name </th>
        <th>Phone Number</th>
        <th>Deposit</th>
        <th>Action</th>

    </tr>

    @{


        int count = 1;
    }

    @for (int i = 0; i < Model.Rows.Count; i++)
    {
        <tr>
            <td>@count</td>
            <td>@Model.Rows[i][1]</td>
            <td>@Model.Rows[i][2]</td>
            <td>@Html.TextBox("Deposit",null,new { placeholder = "Input" })</td>

            <td>   <input type="submit" value="Deposit" id="btnClick" /></td>

        </tr>

        count++;
    }

</table>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            var ProductPack = JSON.stringify({
                'Deposit': $("#Deposit").val(),});
            $("#btnClick").click(function () {
                var f = {};
                f.url = '@Url.Action("InsertDeposit","Admin")';
                f.type = "POST";
                f.dataType = "json";
                f.data = JSON.stringify({
                    'Deposit': $("#txtValue").val()

                });
                f.contentType = "application/json";
                f.success = function (response) {
                    location.reload();
                    if (response == true) {
                        window.location.href='Negative';
                    }
                    alert("success");
                };
                f.error = function (response) {
                    alert("Failed");
                };
                $.ajax(f);
            });
        });

    </script>
}
@{
    ViewBag.Title = "Deposit";
}

<table class="table table-bordered table-striped">
    <tr>
        <th>Sr No</th>
        <th>Party Name </th>
        <th>Phone Number</th>
        <th>Deposit</th>
        <th>Action</th>

    </tr>

    @{


        int count = 1;
    }

    @for (int i = 0; i < Model.Rows.Count; i++)
    {
        <tr>
            <td>@count</td>
            <td>@Model.Rows[i][1]</td>
            <td>@Model.Rows[i][2]</td>
            <td>@Html.TextBox("Deposit","Admin")';
                f.type = "POST";
                f.dataType = "json";
                f.data = JSON.stringify({
                    'Deposit': $("#txtValue").val()

                });
                f.contentType = "application/json";
                f.success = function (response) {
                    location.reload();
                    if (response == true) {
                        window.location.href='Negative';
                    }
                    alert("success");
                };
                f.error = function (response) {
                    alert("Failed");
                };
                $.ajax(f);
            });
        });

    </script>
}

控制器代码：

public JsonResult InsertDeposit(string Deposit,string PartyId,string EmployeId)
{
    DataTable dtbl = new DataTable();
    int Pid = Convert.ToInt32(PartyId);

    using (sqlConnection sqlcon = new sqlConnection(connectionString))
    {
        sqlcon.open();
        string query = $"Select  * from Party  where PartyId = @PartyId";

        sqlDataAdapter sqlDa = new sqlDataAdapter(query,sqlcon);
        sqlDa.SelectCommand.Parameters.AddWithValue("@PartyId",Pid);

        sqlDa.Fill(dtbl);
    }

    return Json(new
    {
        resut = "OK got it"
    });
}

解决方法

您可以通过将数据表传递给 ASP.NET 的 Json 方法来将数据表序列化为 json：

return Json(dtbl);

但是要知道，如果您使用 ajax 调用控制器并获得 json 格式的响应，则必须使用客户端脚本 (javascript) 在页面上呈现该数据。您将无法使用您在问题中粘贴的视图模板，因为它仅在 asp.net 的服务器端使用。

我不知道您为什么要使用 ajax，但也许更好的方法是使用经典的 html 表单并在单击按钮时提交它。然后将控制器更改为返回类型 IActionResult，最后一行返回 return View(dtbl);。这样您就可以利用您拥有的视图模板。