.Net MVC-视图层使用Ajax怎么实现视图局部数据异步刷新

在web开发中会经常出现web页面视图需要局部数据刷新的情况,需要那么该怎么办呢?以笔者正在开发一个功能举例说明怎么样使用ajax来实现异步刷新页面数据。
场景
Html页面代码
后台action
javascript ajax代码
总结
场景

笔者目前在开发一个Web开发框架的辅助工具,该工具用来整合数据库某个表的数据,实现原数据再生成新数据,并且在界面展现给用户。
实现步骤:
1、用户通过界面选择数据库表里面需要整合的旧数据。
2、将旧数据回传给后台控制器action进行数据整合。
3、后台action整合好后将新数据传值给前台view视图进行展示。
由于不想让用户有刷新整个页面的感觉,我们只需要将数据填充到新数据的textarea数据控件,以提升用户体验,我们就只能通过异步提交Ajax解析技术来实现了。

Html页面代码

表fakearticledetailstb用于用户选择需要整合的数据,代码如下

        <table class="table table-bordered" id="fakearticledetailstb" style="width:1200px">
            <thead>
                <tr>
                    <th style="width:180px">@Html.ResourceTextFor(model => model.FakeArticleDetailList[0].IsChecked)</th>
                    <th style="width:180px">@Html.ResourceTextFor(model => model.FakeArticleDetailList[0].ArticleId)</th>
                    <th style="width:70px">@this.Intl("Common.Action")</th>
                </tr>
            </thead>
            <tbody>
                @for (var i = 0; i < Model.FakeArticleDetailList.Count; i++)
                {
                    <tr>
                        <td>
                            @Html.HiddenFor(model => model.FakeArticleDetailList[i].Id)
                            @Html.HiddenFor(model => model.FakeArticleDetailList[i].FakeArticleID)
                            @Html.Hidden("FakeArticleDetailList[" + i + "].EditStatu", "m", new { @class = "EditStatu" })
                            @Html.CheckBoxFor(model => model.FakeArticleDetailList[i].IsChecked, new { @class = "form-control" })
                            @Html.ResourceValidationMessageFor(model => model.FakeArticleDetailList[i].IsChecked)
                        </td>
                        <td>
                            @Html.TextBoxFor(model => model.FakeArticleDetailList[i].ArticleId, new { @class = "form-control" })
                            @Html.ResourceValidationMessageFor(model => model.FakeArticleDetailList[i].ArticleId)
                        </td>
                        <td><input type="button" value="@this.Intl("Common.Delete")" class="delete btn btn-default btn-xs btn-delete" /></td>
                    </tr>
                }
            </tbody>
        </table>

现在我们需要将用户选择的数据的Id集合通过javascript传给后台去整合,后台action和ajax代码如下:

后台action
        [HttpPost]
        public ActionResult PreCreate(List<int> ids)
        {
            IList<Articles> articles = _fakearticleService.GetFakeArticleByIds(ids);
            string articlecontent = string.Empty;
            articles.ToList().ForEach(t =>
            {
                switch (t.Type)
                {
                    case (int)ArticleType.首段:
                        articlecontent = articlecontent + "<div class=\"description\"> \r\n" +
                     t.Content + "</div>\r\n";
                        break;
                    case (int)ArticleType.Image:
                        articlecontent = articlecontent + "<img src=\"/Content/uploads/image/" + t.Content + "\" alt=\""+t.Description+"\"\r\n";  //图片的描述,手动赋值
                        break;
                    case (int)ArticleType.Code:
                        articlecontent = articlecontent + "<pre class=\"code\">\r\n";
                        articlecontent = articlecontent + t.Content + "\r\n";
                        articlecontent = articlecontent + "</pre>\r\n";
                        break;
                    default:
                        articlecontent = articlecontent + "<p>\r\n";
                        articlecontent = articlecontent + t.Content + "\r\n";
                        articlecontent = articlecontent + "</p>\r\n";
                        break;
                }
            });
            //<img src="/Content/uploads/image/20180928/20180928121520_1046.png" alt="" />
            //<h1 style="text-align:left;">   了你好  </h1>  <p>   <span style="font-size:12px;">跌IE诶的的</span>  </p>
            return Json(new { Code = 1, Data = articlecontent }, JsonRequestBehavior.AllowGet);
        }
javascript ajax代码

使用ajax json方式实现异步传值。

    function PreCreate() {
        var selectedIds = [];
            $("#fakearticledetailstb tbody tr").find(":input[type=checkbox]:checked").each(function () {
            var tablerow = $(this).parent("td").parent("tr");
            var sid = tablerow.children().children('.articleids').val();
            selectedIds.push(sid);
        });
        $.ajax({
            url: "/FakeArticle/PreCreate",
            data: { ids: selectedIds },
            type: "POST",
            async: false,
            success: function (data) {
                var trHtml = "";
                if (data.Code > 0) {
                    var fldata = data.Data;
                    $("#ArticleContent").val(fldata);
                } else {
                    $("#ArticleContent").val();
                }
            }
        })
    }

回传给前端Id为ArticleContent的控件显示,控件代码如下:

    <div class="form-group row">
        @Html.ResourceLabelFor(model => model.ArticleContent, new { @class = "control-label col-md-1" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.ArticleContent, new { @class = "form-control" })
            @Html.ResourceValidationMessageFor(model => model.ArticleContent, "", new { @class = "text-danger" })
        </div>
    </div>
总结

将整合后数据回传给运行后结果如下图,我们这个示例主要告诉了大家在.Net MVC视图层中使用Ajax怎么实现视图局部数据异步刷新。

运行结果

MVC模式三层交互如下图所示:

MVC模式三层交互

ajax组织结构如下图所示:

ajax组织结构

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » .Net MVC-视图层使用Ajax怎么实现视图局部数据异步刷新
本文标题:.Net MVC-视图层使用Ajax怎么实现视图局部数据异步刷新
本文地址:http://www.hocode.com/OrgTec/Back/0010.html

相关文章: 深入web框架-html页面使用Ajax实现与webapi直接交互

电话
电话 18718672256

扫一扫
二维码