MVC3 用Ajax删除数据和无刷新更新数据

来源：互联网发布：为什么淘宝不能买烟编辑：程序博客网时间：2024/04/27 16:33

1.首先将界面编辑好

<div class="table-responsive mt20">    <div class="">        <div class="col-md-3">            <div class="input-group">                <span class="input-group-addon">标题</span>                <input type="text" class="form-control" placeholder="输入查询关字" name="Title" id="Title">            </div>        </div>        <div class="col-md-3">            <div class="input-group">                <span class="input-group-addon">文章类型</span>                @{Html.RenderAction("_GetAllArticleType", "Common");}            </div>        </div>        <div class="col-md-3">            <div class="input-group">                <span class="input-group-addon">发布时间</span>                <input type="input" class="form-control" placeholder="选择时间" onclick="laydate()" name="RealeaseTime"                    id="RealeaseTime">            </div>        </div>        <div class="col-md-3">            <div class="input-group">                <button class="btn btn-primary" onclick="javascript:LoadData();">                    查询</button>            </div>        </div>    </div>    <div id="ajax">@*加载数据*@</div>

加载数据的地方是用于后面用Ajax 获取部分也的视图之后，替换div#ajax里面的内容

2.创建好部分页的视图

@model IEnumerable<JOB.Model.Article><table class="table table-hover">    <thead>        @*<td>                    编号                </td>*@        <td>            标题        </td>        <td>            文章类型         </td>        <td>            发布时间        </td>        <td>            操作        </td>    </thead>    <tbody>        @foreach (var item in Model)        {            <tr>                @*<td>                            @item.Id                        </td>*@                <td>                    @item.Title                </td>                <td>                    @item.ArticleType.TypeName                </td>                <td>                    @item.RealeaseTime                </td>                <td>                    @Html.ActionLink("编辑", "EditArticle", "AdminManage", new { id = item.Id }, new { })                    <a href="#" onclick="javascript:deleteByid(@item.Id)">删除</a>                </td>            </tr>                }    </tbody></table>

3.Ajax编写

<script type="text/javascript">    $().ready(function myfunction() {        LoadData();<span style="white-space:pre">//获取部分页    });    function deleteByid(id) {        $.ajax({            type: "POST",            url: "/AdminManage/Delete/" + id,            dataType: "text",            error: function (response, statusm, xhr) {                            },            success: function (response, statusm, xhr) {                LoadData();            }        })    };    function LoadData() {        $.ajax({            url: "/AdminManage/GetNewData",            data: { "Title": $('#Title').val(), "ArticleTypeId": $('#ArticleTypeId').val(), "RealeaseTime": $('#RealeaseTime').val() },<span style="white-space:pre"></span>//jq直接获取input 的值,将其作为参数传到后台            dataType: "text",            error: function (response, statusm, xhr) {                alert(response);            },            success: function (response, statusm, xhr) {                $('#ajax').html(response);            }        });    }</script>

4.控制器

[HttpPost]<span style="white-space:pre">//这里一定要用HttpPost，因为Ajax那里使用了Post方式提交数据public bool Delete(int id){      return DeleteArticleById(id);<span style="white-space:pre">//这里就不写出删除实体的方法了}

public ActionResult GetNewData(string Title, int? ArticleTypeId, DateTime? RealeaseTime)<span style="white-space:pre"></span>        {            IQueryable<Article> data = objBLLArticle.GetAllArticleList();            if (!string.IsNullOrWhiteSpace(Title))            {                data = data.Where(c => c.Title.Contains(Title));            }            if (ArticleTypeId != 0 && ArticleTypeId != null)            {                data = data.Where(c => c.ArticleTypeId == ArticleTypeId);            }            if (RealeaseTime != null)            {                data = data.Where(c => c.RealeaseTime == RealeaseTime);            }                        return PartialView(data);<span style="white-space:pre">//直接返回部分视图        }

0 0