Fatal编程技术网
  • jquery/
  • Jquery 在表视图ASP.NET MVC中显示从AJAX请求到控制器的动态数据

Jquery 在表视图ASP.NET MVC中显示从AJAX请求到控制器的动态数据

jquery json ajax asp.net-mvc model-view-controller

Jquery 在表视图ASP.NET MVC中显示从AJAX请求到控制器的动态数据,jquery,json,ajax,asp.net-mvc,model-view-controller,Jquery,Json,Ajax,Asp.net Mvc,Model View Controller,我正试图将通过AJAX调用从控制器返回的数据传递到视图中的表中，在视图中请求这些数据（使用过滤器）。更准确地说，有3个过滤器：日期和时间、员工和访客。根据您选择的组合，控制器将从数据库返回过滤后的数据 加载视图时，它会显示数据库中所有在字段中有值的访问者。我希望它在应用过滤器后显示过滤后的访问者 Archive.cshtml @model IEnumerable<Visitor_Management.Models.Visitor> @{ ViewBag.Title = "A

我正试图将通过AJAX调用从控制器返回的数据传递到视图中的表中，在视图中请求这些数据（使用过滤器）。更准确地说，有3个过滤器：日期和时间、员工和访客。根据您选择的组合，控制器将从数据库返回过滤后的数据

加载视图时，它会显示数据库中所有在字段
中有值的访问者。我希望它在应用过滤器后显示过滤后的访问者

Archive.cshtml


@model IEnumerable<Visitor_Management.Models.Visitor>

@{
    ViewBag.Title = "Archive";
}

<div>
    <h2>"Archive"</h2>
    <div>&nbsp;</div>
</div>
<form class="form-inline" id="formFilters" runat="server">
    <div>
        <label style="margin-left:10px;">Date and time:</label>
        <input type="text" name="picker" id="picker" class="form-control" size="30" />
        <label style="margin-left:10px;">Employee:</label>
        <input type="text" id="employee" class="form-control" placeholder="select an employee" />
        <label style="margin-left:10px;">Visitor:</label>
        <input type="text" id="visitor" placeholder="select a visitor" class="form-control" style="margin-right:20px;" />
        <button type="submit" class="btn navbar-btn btn-primary " name="filter" id="filter" value="filter">Filter</button>
    </div>

    <div>&nbsp;</div>
</form>
<table class="table table-bordered table-condensed table-striped text-center" id="archiveTable">

    <tr>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.ID)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Date)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Arrival)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Departure)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.Surname)
        </th>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.Employee)
        </th>
        <th class="text-center">
            ID Card
        </th>
        <th class="text-center">
            Pass ID
        </th>

    </tr>

    @foreach (var item in Model)
    {
     var Date = item.Datum.ToShortDateString();
     <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => Date)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Arrival)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Departure)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Surname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Employee)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CardID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PassID)
        </td>

     </tr>

     }

</table>



@model IEnumerable
@{
ViewBag.Title=“存档”；
}
“档案”
日期和时间：
雇员：
参观者：
滤器
@DisplayNameFor（model=>model.ID）
@DisplayNameFor（model=>model.Date）
@DisplayNameFor（model=>model.Arrival）
@DisplayNameFor（model=>model.department）
@DisplayNameFor（model=>model.Name）
@Html.DisplayNameFor（model=>model.name）
@DisplayNameFor（model=>model.Employee）
身份证
通行证
@foreach（模型中的var项目）
{
var Date=item.Datum.ToShortDateString（）；
@DisplayFor（modeleItem=>item.ID）
@DisplayFor（modelItem=>Date）
@DisplayFor（modelItem=>item.Arrival）
@DisplayFor（modeleItem=>item.department）
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modeleItem=>item.姓氏）
@DisplayFor（modelItem=>item.Employee）
@DisplayFor（modelItem=>item.CardID）
@DisplayFor（modelItem=>item.PassID）
}


AJAX调用


<script>
    $('#filter').click(function () {
        $.ajax({
            url: "Filter",
            data: {
                'datepicker': $('#picker').val().toString(),
                'employee': $('#employee').val().toString(),
                'visitor' : $('#visitor').val().toString()
            },
            async: false,
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            type: "POST", 
            success: function (result) {
                alert("Works");
                $('#archiveTable').html(result)
            },
            error: function (result) {
                alert("Error")
            }
        }); 
    });  
</script>




$（“#过滤器”）。单击（函数（）{
$.ajax({
url:“过滤器”，
数据：{
“datepicker”：$（“#picker”）.val（）.toString（），
'employee'：$（'#employee'）.val（）.toString（），
“访问者”：$（“#访问者”）.val（）.toString（）
},
async:false，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
类型：“POST”，
成功：功能（结果）{
警惕（“工作”）；
$（'#archiveTable'）.html（结果）
},
错误：函数（结果）{
警报（“错误”）
}
}); 
});  


VisitorsController.cs


public ActionResult Filter(string datepicker,string employee,string visitor)
        {
         List<Visitor> filterList = new List<Visitor>();

            //filter data to get an filtered list

            return View("Archive",filterList);
        }



public ActionResult过滤器（字符串日期选择器、字符串雇员、字符串访问者）
{
列表过滤器列表=新列表（）；
//筛选数据以获得筛选列表
返回视图（“存档”，过滤器列表）；
}


它说它在AJAX的成功部分的alert中“工作”，但我并没有在表中获得任何新的（过滤的）数据，就像什么都并没有发生，视图只是被重新加载（刷新）


如果我返回
JSON
type，而
ActionResult
为
JsonResult
，我可以读取数据，并且过滤后的数据是真实和正确的，但我仍然无法将该数据加载到我的表中。
尝试在部分视图中取出您的表（我们称之为_resultable，并将表放在视图中具有resultable id的div中）：


@model IEnumerable
@{
ViewBag.Title=“存档”；
}
“档案”
日期和时间：
雇员：
参观者：
滤器
@Html.Partial（“\u resultable”，Model）


局部视图：


@model IEnumerable<Visitor_Management.Models.Visitor>
<table class="table table-bordered table-condensed table-striped text-center" id="archiveTable">

        <tr>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.ID)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Date)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Arrival)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Departure)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Surname)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Employee)
            </th>
            <th class="text-center">
                ID Card
            </th>
            <th class="text-center">
                Pass ID
            </th>

        </tr>

        @foreach (var item in Model)
        {
         var Date = item.Datum.ToShortDateString();
         <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Arrival)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Departure)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Surname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Employee)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CardID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PassID)
            </td>

         </tr>

         }

    </table>



@model IEnumerable
@DisplayNameFor（model=>model.ID）
@DisplayNameFor（model=>model.Date）
@DisplayNameFor（model=>model.Arrival）
@DisplayNameFor（model=>model.department）
@DisplayNameFor（model=>model.Name）
@Html.DisplayNameFor（model=>model.name）
@DisplayNameFor（model=>model.Employee）
身份证
通行证
@foreach（模型中的var项目）
{
var Date=item.Datum.ToShortDateString（）；
@DisplayFor（modeleItem=>item.ID）
@DisplayFor（modelItem=>Date）
@DisplayFor（modelItem=>item.Arrival）
@DisplayFor（modeleItem=>item.department）
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modeleItem=>item.姓氏）
@DisplayFor（modelItem=>item.Employee）
@DisplayFor（modelItem=>item.CardID）
@DisplayFor（modelItem=>item.PassID）
}


然后从控制器操作返回：


public ActionResult Filter(string datepicker,string employee,string visitor)
{
    List<Visitor> filterList = new List<Visitor>();

     //filter data to get an filtered list

     return PartialView("_ResultTable",filterList);
 }



public ActionResult过滤器（字符串日期选择器、字符串雇员、字符串访问者）
{
列表过滤器列表=新列表（）；
//筛选数据以获得筛选列表
返回PartialView（“\u resultable”，filterList）；
}


在您的ajax帖子中，只需将div的html设置为action result，并且您需要添加preventdefaulttosubmit按钮，这样它就可以

public ActionResult Filter(string datepicker,string employee,string visitor)
{
    List<Visitor> filterList = new List<Visitor>();

     //filter data to get an filtered list

     return PartialView("_ResultTable",filterList);
 }



<script>
    $('#filter').click(function (e) {
        e.preventDefault();
        $.ajax({
            url: "Filter",
            data: {
                'datepicker': $('#picker').val().toString(),
                'employee': $('#employee').val().toString(),
                'visitor' : $('#visitor').val().toString()
            },
            async: false,
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            type: "POST", 
            success: function (result) {
                alert("Works");
                $('#resultTable').html(result)
            },
            error: function (result) {
                alert("Error")
            }
        }); 
    });  
</script>