asp.net mvc中的ajax以及分页入门

来源：互联网发布：网络说的生煎什么意思编辑：程序博客网时间：2024/05/22 17:01

在asp.net mvc中如果使用jquery来写ajax的话，成功的时候返回的数据保存在dada中，不用写data.d,而web中是data.d.

<span style="font-size:18px;"> <script type="text/javascript">        $(function () {            //点击按钮刷新时间            $('#btn1').click(function () {                GetServerDate();            })            //页面加载之后，就不停的刷新时间            //setInterval(GetServerDate, 1000);        })        function GetServerDate() {            $.ajax({                url: "Home/GetDate",                contentType: "application/json",                data: "",                type: "post",                success: function (data) {                                       $('#mydiv').text(data);                }            })        }           </script></span>

另一种方法使用ajax，需要注意的是：要引用
<script src="../../scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../../scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
这两个插件，要不页面会刷新。
例子：
<%using (Ajax.BeginForm("GetDate", "Home", new AjaxOptions()
      {
          HttpMethod = "post",
          InsertionMode = InsertionMode.Replace, //在mydiv中以什么样的方式显示，是向后累加，还是向前累加还是替换，自己测试。
          UpdateTargetId = "mydiv",
          //OnSuccess = "showinfo",
          Confirm="真的要从服务器获取吗？",
          LoadingElementId = "imgload"
      })) //html标签可以写在下面的一对花括号中，凡是写在其间的html元素，都以ajax的方式向服务器提交内容
      {%>
    <input type="submit" value="获取服务器事件" />
    <%} %>
    <div id="mydiv">
    </div>
    <img src="../../images/load.gif" id="imgload" />

这种方法是微软提供的一种方法。
参考文献：点击打开链接

分页：（这只是简单的分页）

控制器中的代码：
MyTestEntities db = new MyTestEntities();
public ActionResult Index(int pageindex,int pagesize)
        {
            //pageindex=2 返回的是>10行
            //pageindex=3 返回的是>20行
            //pageindex=4 返回的是>30行
            //Skip 跳过指定数量的元素，返回剩余的元素，它前面要有OrderBy
            //Take 从序列的开头返回指定数量的连续元素
            var user = db.T_User.OrderBy(n => n.UserId).Skip<T_User>(pagesize * (pageindex

- 1)).Take<T_User>(10);
            //总的行数，ViewBag.TotalPage为总的页数
            int total=db.T_User.Count();
            if (total % pagesize == 0)
            {
                ViewBag.TotalPage = total / pagesize;
            }
            else
            {
                ViewBag.TotalPage = total / pagesize + 1;
            }

            return View(user);
            //没有分页
            //return View(db.T_User.ToList());
        }
视图中的代码：

<html><head runat="server">    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <style type="text/css">        table        {            width: 800px;            border: 1px solid blue;        }        td        {            border: 1px solid blue;        }    </style>    <script src="../../scripts/jquery-1.10.2.js" type="text/javascript"></script>    <script type="text/javascript">        //ajax删除分为两部分，第一步将当前行的UserId提交的控制器，然后在控制器中从数据库中将此行删除；第二部，在当前视图中，将选择的行给删除掉。        $(function () {            $('.class1').click(function () {                var current = $(this);                //调用ajax从数据库中将此行删除掉                $.ajax({                    type: "post",                    contentType: "application/json",                    data: "{id:" + current.attr("userid") + "}",                    url: "User/Delete",                    success: function (data) {                        if (data == "TRUE") {                            current.parent().parent().fadeOut(2000);                        }                        else {                            alert('删除失败');                        }                    }                })            })        })            </script></head><body>    <div>        <table>            <!--标题行-->            <tr>                <td>                    用户编号                </td>                <td>                    用户名                </td>                <td>                    密码                </td>                <td>                    姓名                </td>                <td>                    电话                </td>                <td>                    用户编号                </td>                <td>                    性别                </td>                <td>                    操作                </td>            </tr>            <!--数据行-->            <%foreach (ajaxmvc.T_User item in Model)              {%>            <tr>                <td>                    <%:item.UserId %>                </td>                <td>                    <%:item.UserName %>                </td>                <td>                    <%:item.Password %>                </td>                <td>                    <%:item.Name %>                </td>                <td>                    <%:item.Tel %>                </td>                <td>                    <%:item.DepartMent %>                </td>                <td>                    <%:item.Gender %>                </td>                <td>                    <a href="#" class="class1" userid="<%:item.UserId %>">删除</a>                </td>            </tr>            <%} %>            <tr>                <%                    for (int i = 1; i <=ViewBag.TotalPage; i++)                    {%>                <%:Html.ActionLink(i.ToString(), "Index", new {pagesize=10,pageindex=i})%>                <%} %>            </tr>        </table>    </div></body></html>

访问的时候第一次要传递参数，或者是更改路由中的代码。为其传递参数。

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{pageindex}/{pagesize}",
                defaults: new { controller = "User", action = "Index", pageindex

=1,pagesize=10 }
);
}

0 0