Javascript Asp.net MVC使用Ajax从PartialView的actionlink加载父视图无效

我遇到一种情况，需要从局部视图调用ParentView。就像我在部分视图中看到的TODO列表一样，其中Ajax actionlink通过传递其id来编辑父级中的数据。在不使用Ajax的情况下，它也可以通过放置查询字符串来操作url。但我们希望通过Ajax进行内部调用，因为它不会启动

我们使用的代码是这样的：

<li>@Ajax.ActionLink(@item.ToDoTitle, "Index", new { tdid = @item.ToDoId }, new AjaxOptions { UpdateTargetId = "saved", InsertionMode = InsertionMode.Replace, HttpMethod="POST" })</li>

public ActionResult Index(int tdid =0)
    {
        if (tdid !=0)
        {
            ToDo t = new ToDo();
            t.ToDoTitle = "Ramlal";
            t.ToDoDesc = "Shyamlal";
            t.ToDoId = tdid;
            return Json(t);
        }
        else
        {
            return View();
        }
    }

我们在返回视图时也尝试了同样的方法，但什么都没有发生，所以我们尝试使用Json作为它的返回模型

如果我错了，请纠正我

仅供参考，这是父视图：

@model myTask.Models.ToDo
@{
    ViewBag.Title = "My Task";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@using (Ajax.BeginForm("Save", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "MyTaskList" }))
{
    @Html.AntiForgeryToken()
    <div class="MyTask">
        @Html.HiddenFor(t => t.ToDoId)
        <div class="row">
            <div class="col-lg-12">
                @Html.LabelFor(t => t.ToDoTitle)<br />
                @Html.TextBoxFor(t => t.ToDoTitle)
            </div>
            <div class="col-lg-12">
                @Html.LabelFor(t => t.ToDoDesc)<br />
                @Html.TextAreaFor(t => t.ToDoDesc)
            </div>
        </div>
        <script>
            $( "#ToDoTitle" ).blur( function() {
                $.ajax({
                    url: "Save",
                    type: "POST",
                data: $("#form0").serialize(),
                dataType: "json"
                }).done(function (model) {
                $("#ToDoId").val(model.ToDoId);
                $("#ToDoTitle").val(model.ToDoTitle);
                $("#ToDoDesc").val(model.ToDoDesc);
            });
            });

            $("#ToDoDesc").blur(function () {
                if ($("#ToDoId").val() > 0) {
                    $.ajax({
                        url: "Save",
                        type: "POST",
                        data: $("#form0").serialize(),
                        dataType: "json"
                    }).done(function (model) {
                        $("#ToDoId").val(model.ToDoId);
                        $("#ToDoTitle").val(model.ToDoTitle);
                        $("#ToDoDesc").val(model.ToDoDesc);
                    });
                }});
        </script>
    </div>
    <div class="ObjectList" id="MyTaskList">
        @Html.Action("TodoList")
    </div>
    <div class="clearfix"></div>
}

@model myTask.Models.ToDo
@{
ViewBag.Title=“我的任务”；
}
@使用（Ajax.BeginForm（“Save”，new AjaxOptions（）{InsertionMode=InsertionMode.Replace，UpdateTargetId=“MyTaskList”}））
{
@Html.AntiForgeryToken（）
@Html.HiddenFor（t=>t.ToDoId）
@Html.LabelFor（t=>t.ToDoTitle）

@TextBoxFor（t=>t.ToDoTitle）
@Html.LabelFor（t=>t.ToDoDesc）

@Html.TextAreaFor（t=>t.ToDoDesc）
$（“#ToDoTitle”）.blur（函数（）{
$.ajax({
网址：“保存”，
类型：“POST”，
数据：$（“#form0”）.serialize（），
数据类型：“json”
}).done（功能（模型）{
$（“#ToDoId”）.val（model.ToDoId）；
$（“#ToDoTitle”）.val（model.ToDoTitle）；
$（“#ToDoDesc”）.val（model.ToDoDesc）；
});
});
$（“#ToDoDesc”）.blur（函数（）{
if（$（“#ToDoId”）.val（）>0）{
$.ajax({
网址：“保存”，
类型：“POST”，
数据：$（“#form0”）.serialize（），
数据类型：“json”
}).done（功能（模型）{
$（“#ToDoId”）.val（model.ToDoId）；
$（“#ToDoTitle”）.val（model.ToDoTitle）；
$（“#ToDoDesc”）.val（model.ToDoDesc）；
});
}});
@Html.Action（“TodoList”）
}

这是使用@Html.Action（“TodoList”）调用的部分视图

@使用System.Linq
@模型myTask.Models.ToDoList
@{
ViewBag.Title=“Index”；
}
@如果（Model.ToDos.Count>0）
{

@foreach（Model.ToDos中的var项）
{
@*
@Html.ActionLink（@item.ToDoTitle，“Index”，new{tdid=@item.ToDoId}）
*@
@ActionLink（@item.ToDoTitle，“/Index”，new{tdid=@item.ToDoId}，new AjaxOptions{UpdateTargetId=“MyTask”，InsertionMode=InsertionMode.Replace，HttpMethod=“POST”}）
}

}

控制器：

using myTask.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;

namespace myTask.Controllers
{
    public class TasktdController : Controller
    {
        // GET: Tasktd
        public ActionResult Index(int tdid =0)
        {
            if (tdid !=0)
            {
                ToDo t = new ToDo();
                t.ToDoTitle = "Ramlal";
                t.ToDoDesc = "Shyamlal";
                t.ToDoId = tdid;
                return PartialView(t);
            }
            else
            {
                return View();
            }
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Save(ToDo td)
        {
            var errors = ModelState.Values.SelectMany(v => v.Errors);
            ModelState.Remove("ToDoId");
            if (ModelState.IsValid)
            {
                var t = await td.Save(td);
                return Json(td);
            }
            return Json("Oops! Error Occured");
        }
        [ChildActionOnly]
        public PartialViewResult TodoList()
        {
            ToDoList tdl = new ToDoList();
            List <ToDo> tds= new List<ToDo>();
            ToDo t = new ToDo();
            t.ToDoId = 1;
            t.ToDoTitle = "XXX";
            tds.Add(t);
            tdl.ToDos = tds;
            return PartialView(tdl);
        }
    }
}

使用myTask.Models；
使用制度；
使用System.Collections.Generic；
使用System.Linq；
使用System.Threading.Tasks；
使用System.Web；
使用System.Web.Mvc；
命名空间myTask.Controllers
{
公共类TasktdController:Controller
{
//获取：Tasktd
公共行动结果索引（int tdid=0）
{
如果（tdid！=0）
{
ToDo t=新ToDo（）；
t、 ToDoTitle=“Ramlal”；
t、 ToDoDesc=“Shyamlal”；
t、 ToDoId=tdid；
返回局部视图（t）；
}
其他的
{
返回视图（）；
}
}
[HttpPost]
[ValidateAntiForgeryToken]
公共异步任务保存（ToDo td）
{
var errors=ModelState.Values.SelectMany（v=>v.errors）；
ModelState.Remove（“ToDoId”）；
if（ModelState.IsValid）
{
var t=等待td.保存（td）；
返回Json（td）；
}
返回Json（“Oops！发生错误”）；
}
[仅限儿童]
公共PartialViewResult TodoList（）
{
ToDoList tdl=新ToDoList（）；
列表tds=新列表（）；
ToDo t=新ToDo（）；
t、 ToDoId=1；
t、 ToDoTitle=“XXX”；
tds.Add（t）；
tdl.ToDos=tds；
返回部分视图（tdl）；
}
}
}

您的代码存在许多问题。首先，使用

.ajax（）

提交表单，表单甚至没有提交按钮！替换

@using (Ajax.BeginForm("Save", new AjaxOptions() { ... })
{
  ....
}

与

您当前的脚本导致性能低下，并且是UI设计不好的结果。用户应该决定何时保存（即单击按钮），而不是您。考虑一下如果用户编辑标题和标签到描述中会发生什么，然后意识到所有的事情都是正确的，并且什么都不需要改变（你的代码已经改变了数据库中的数据，用户甚至不知道它）

注意：脚本应该紧跟在结束标记（非内联）之前。如果成功保存对象，则

Save（）

方法应返回

Json（true）

要处理单击“链接”的操作，请将部分更改为（注意，

@if

阻止它不是必需的）

控制器的方法是

public JsonResult Get(int id)
{
  // Look up the Description based on the id, for example
  string description = db.ToDo.Where(x => x.ToDoId == id).Select(x => x.ToDoDesc);
  return Json(description, JsonRequestBehavior.AllowGet);
}

---

注意，视图中已经有ID和Title属性，因此只需要返回描述（我建议您按照此处的建议更改属性名称，即

ID

、

Title

和

Description

）

为什么返回json？编辑您的问题（不要在注释中！）@StephenMuecke我们已经按照你的建议编辑了这个问题。仍然不清楚你想做什么。您的

@Ajax.ActionLink（）

方法调用

Index（）

方法，该方法返回json，而不是部分jsonview@StephenMuecke我们是MVC的初学者，所以don；我知道的不多

<form id="form">
  .... // add controls for properties
  <button id="save" type="button">Save</button>
</form>

<script>
  var form = $('#form');
  var saveUrl = '@Url.Action("Save")';
  $.post(saveUrl, form.serialize(), function(data) {
    if(data) {
      // save successful - give the user some feedback
    }
  }).fail(function (result) {
    // Oops and error occurred - give the user some feedback
  });
  .... // add script for editing here (see below0
</script>

<ul>
  @foreach (var item in Model.ToDos)
  {
    <li>
      <span>@item.ToDoTitle</span>
      <button class="edit" type="button" data-id="@item.@item.ToDoId">Edit</button>
    </li>
  }
</ul>

var editUrl = '@Url.Action("Get")';
$('.edit').click(function() {
  var id = $(this).data('id');
  var title = $(this).prev('span').text();
  $.getJSON(editUrl, { id: id, function(data) {
    // Populate form fields
    $('#ToDoId').val(id);
    $('#ToDoTitle').val(title);
    $('#ToDoDesc').val(data);
  });
});

public JsonResult Get(int id)
{
  // Look up the Description based on the id, for example
  string description = db.ToDo.Where(x => x.ToDoId == id).Select(x => x.ToDoDesc);
  return Json(description, JsonRequestBehavior.AllowGet);
}