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

最新推荐文章于 2021-12-30 14:59:01 发布

猿猿网页设计(yywyss365)

最新推荐文章于 2021-12-30 14:59:01 发布

阅读量963

点赞数 1

本文链接：https://blog.csdn.net/u011955860/article/details/26604083

版权

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