.Net MVC-视图层使用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>