Ajax接收到的asp.net return View(model)返回值是整个Html页面

最新推荐文章于 2024-06-28 13:34:22 发布

祝福纱雾荼梻

最新推荐文章于 2024-06-28 13:34:22 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Bug修复

本文链接：https://blog.youkuaiyun.com/weixin_41355260/article/details/79664601

Bug修复专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种利用Ajax改进表格筛选功能的方法，通过阻止默认的表单提交行为，并使用Ajax来异步提交数据，实现了页面不刷新情况下的数据筛选。文章详细展示了如何绑定表单的submit事件以及处理后台返回的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能需求描述：按条件在表格中进行筛选

前台通过<form>提交表单数据到后台，后来需要通过Ajax提交数据到后台，所以为表单绑定了onsubmit="return false”属性，阻止表单提交后的跳转。视图代码如下：

<div id="tab_permission" class="tab-pane tab-permission">
    <div class="form-body padding-bottom-0 permission-form">
        <div class="filter-bar clearfix permission-fliter">
            @using (Html.BeginForm("Detail", "Accounts", FormMethod.Get, new { @class = "search-form", id = @Model.ID, onsubmit = "return false" }))
            {
                <div class="wrap company-warp">
                    <label for="company">Company</label>
                    <div class="inner">
                        @Html.DropDownListFor(m => m.Permission.CompanyID, (List<SelectListItem>)ViewData["_companies"], new { @class = "company-id" })
                    </div>
                </div>
                <div class="wrap range-warp">
                    <label for="range">Range</label>
                    <div class="inner">
                        @Html.DropDownListFor(m => m.Permission.RangeID, (List<SelectListItem>)ViewData["_ranges"], new { @class = "range-id" })
                    </div>
                </div>
                <div class="wrap category-warp">
                    <label for="category">Category</label>
                    <div class="inner">
                        @Html.DropDownListFor(m => m.Permission.CategaryID, (List<SelectListItem>)ViewData["_categaries"], new { @class = "categary-id" })
                    </div>
                </div>
                <div class="wrap search-warp">
                    <div class="inner">
                        <button class="btn btn-sm permission-search"><i class="fa fa-search"></i>

 <span>SEARCH (<strong>@Model.Permission.Items.Count</strong>)</span></button>
                    </div>
                </div>
            }
        </div>
        <div class="table-scrollable">
            <table class="table table-condensed table-bordered ">
                <thead>
                    <tr role="row" class="heading">
                        <th>
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" class="select-all-item" data-id="20164">
                                <span></span>
                            </label>
                        </th>
                        <th class="t-images">Images</th>
                        <th>Title</th>
                        <th class="t-company">Company</th>
                        <th class="t-range">Range</th>
                        <th class="t-category">Category</th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.Permission.Items.Count > 0 && Model.Permission.Items != null)
                    {
                        foreach (var item in Model.Permission.Items)
                        {
                            <tr role="row" class="heading">
                                <td>
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" class="checkboxes">
                                        <span></span>
                                    </label>
                                </td>
                                <td>
                                    <a class="fancybox-button main-image" rel="image-1" href="@Url.Action("Detail", "Products", new { id = @item.ProductID, tab = "general" })" title="Basico Wood White Oak  4,2 - 0,3mm">
                                        <img src="~/Upload/Images/@item.ImagFn" width="95" height="95" alt="">
                                    </a>
                                </td>
                                <td>
                                    <div>
                                        <strong>
                                            @item.Title
                                        </strong>
                                    </div>
                                </td>
                                <td>@item.Company</td>
                                <td>@item.Range</td>
                                <td>
                                    @if (item.Categary.Count > 0 && item.Categary != null)
                                    {
                                        foreach (var _item in item.Categary)
                                        {
                                            <span>@_item.Categary</span>
                                        }
                                    }
                                </td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </div>
        <div class="">
            <button type="submit" class="btn btn-sm blue" data-loading-text="SUBMITTING...">SUBMIT</button>
        </div>
    </div>
</div>

Ajax给表单.search-form绑定submit事件提交表单，代码如下：

var $permission = $('.tab-permission');

$permission.find('.search-form').submit(function () {
    var $this = $(this),
        company = $this.find('.company-id').val(),
        range = $this.find('.range-id').val(),
        category = $this.find('.categary-id').val(),
        keywords = $this.find('.keywords');

    $.ajax({
        url: getUncachedUrl($this.attr('action')),
        data: {
            categaryid: category,
            rangeid: range,
            companyid: company,
            keywords: keywords
        },
        success: function (data) {
            var $dataTablescrollable = $('.table-scrollable', data),
                $tablescrollable = $('.table-scrollable'),
                $dataPermissionsearch = $('.permission-search', data),
                $permissionSearch = $('.permission-search');

            $tablescrollable.html($dataTablescrollable.html());
            $permissionSearch.html($dataPermissionsearch.html());
        },
        error: function () {
            showNotificationError();
        }
    });
});

注意：

1、加命名空间，确保要操作的元素唯一定位
2、Ajax需要判断loading，避免多次触发ajax请求

3、声明变量时如果是Val值则不需要$符

4、因为后台返回了整个HTML页面，所以把原有HTML需要更改的地方用返回页面的对应部分进行了替换。