<th id="v9g6b"><track id="v9g6b"></track></th>

  • <em id="v9g6b"><acronym id="v9g6b"></acronym></em>
    <progress id="v9g6b"><pre id="v9g6b"></pre></progress>
    <tbody id="v9g6b"></tbody>
    <button id="v9g6b"><acronym id="v9g6b"></acronym></button>
    <rp id="v9g6b"><ruby id="v9g6b"></ruby></rp>

        <dd id="v9g6b"></dd>

        <em id="v9g6b"></em>

          .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.sajuice.com/OrgTec/Back/0010.html

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

          电话
          电话 18718672256

          扫一扫
          二维码
          本港台开奖 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>