首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用$.ajax成功回调中的数据返回更新索引视图.Asp.Net Mvc 3

使用$.ajax成功回调中的数据返回更新索引视图.Asp.Net Mvc 3
EN

Stack Overflow用户
提问于 2011-09-05 16:24:12
回答 1查看 2.5K关注 0票数 0

我有一个非常简单的"InddexView“,它显示了已经在数据库中的条目的细节。在相同的视图中,我有一个create条目链接。使用Ajax.Actionlink单击create链接以更新同一个"IndexView“上的div,并显示带有文本框和按钮的create视图.现在,在“创建”View.cshtml上,我使用$.ajax通过ajax创建新条目。正在数据库中创建条目,但没有刷新主"IndexView“以显示新创建的条目。请帮助我如何做那件事?

这是我的_Create.Cshtml代码,用于显示所有条目。

代码语言:javascript
复制
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        <fieldset id="fsShowCreatestatus">
            <legend>Entries</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Body)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Body)
                @Html.ValidationMessageFor(model => model.Body)
            </div>

            <p>
                <input type="submit" value="Create" id="btnCreate" />
            </p>
        </fieldset>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

    <script type="text/javascript">
        $('#btnCreate').click(function (e) {
            var title = $('#Title').val();
            var body = $('#Body').val();
            var postdata = {
                "Title": title,
                "Body": body
            };
            e.preventDefault();
            callajax(postdata);

        });

      function callajax(data) {
          $.ajax({
              url: '@Url.Action("CreateViaAjax","Home")',
              data: data,
              success: function (returnData) {
                  $('#divCreateNew').slideUp(100).fadeOut(50);
                  alert('Ajax-completed');
                  $('#divShowDetails').appendTo('#divEdit');
              },
              error: function (returndata) {
                  $('#divCreateNew').appendTo('#fsShowCreateStatus').html('there was an error while adding the entry');
              }
          });
        }
    </script>

here is my index view which the main view and using for showing partial view(_Create) and the link for creating the new one..
=======================================
<h2>Index</h2>
<div id="divCreateLink">
    <p>
        @Ajax.ActionLink("Create New", "Create","Home", new AjaxOptions { 
                InsertionMode = InsertionMode.Replace,
                HttpMethod = "GET",
                UpdateTargetId = "divCreateNew",

   })


    </p>
</div>

<div id="divCreateNew">

</div>

<div id="divEdit">

</div>

@Html.Partial("PartialCreate")

执行代码,但不刷新"IndexView“

寻求帮助..。

这是我的控制器动作"CreateViaAjax“

代码语言:javascript
复制
public ActionResult CreateViaAjax(Entries entries)
        {
            if (ModelState.IsValid)
            {
                db.DBEntries.Add(entries);
                db.SaveChanges();
                return RedirectToAction("Index");  
            }

            return View(entries);
        }

以下是返回主视图的“我的索引操作”

代码语言:javascript
复制
public ViewResult Index()
        {

            return View(db.DBEntries.ToList());
        }

下面是我在CreateEntry链接上点击时调用的CreateEntry

代码语言:javascript
复制
public ActionResult Create()
        {
            return PartialView("_Create");
        }

=================================

EN

回答 1

Stack Overflow用户

发布于 2011-09-06 05:38:01

以下是几种可能性:

  • 包装需要在容器和部分视图中刷新的部分。然后,在创建条目后,在success回调中,向控制器操作发送另一个AJAX请求,该操作将读取条目并返回其刷新状态。当这个AJAX调用成功后,用新的内容替换容器:$('#entriesContainer').html(result);
  • Because,您可以在成功回调中获得新创建的条目的信息,您可以手动操作html来使用整个页面的$('#entries').append('<li>new entry info</li>');
  • Reload附加这个新条目,而不需要使用AJAX:window.location.href = '@Url.Action("Index", "Home")';

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7310603

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档