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

Question

我正在尝试使用 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", 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>
}

控制器代码：

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

Answer 1

您可以将数据表序列化为 json，方法是将其传递给 ASP.NET 的 Json 方法：

return Json(dtbl);

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

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