我来帮你一步步解决这个问题，你的核心需求是通过AJAX异步提交表单，将Success视图作为局部内容嵌入Index页面，而非跳转至新页面。之前的尝试存在几个关键问题，我们逐一修正：

你之前的方案失效主要有这几个原因：

• 原表单的默认提交行为未被阻止，点击按钮后页面直接跳转，AJAX请求没来得及执行
• AJAX使用了GET请求，但后台FromInput方法标记了[HttpPost]，请求方式不匹配
• 没有传递表单数据，后台无法接收IndexViewModel的参数
• 后台返回的是完整视图（包含布局页），插入页面会导致重复的HTML结构

1. 调整Index.cshtml：添加容器+阻止表单默认提交 #

首先在表单下方添加用来展示局部视图的容器，然后通过jQuery监听表单提交事件，阻止默认跳转并发送AJAX请求：

@model Models.IndexViewModel
@{ ViewBag.Title = "Home Page"; var taskList = ViewBag.TaskList; }
@section styles { <link rel="Stylesheet" href="@Href("~/Content/Index.css")" /> }
<div class="row">
 <div class="col-md-12">
 <section id="sendedTaskForm">
 @using (Html.BeginForm("FromInput", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) {
 <!-- 原表单内容保持不变 -->
 <div class="form-group">
 @Html.LabelFor(m => m.Code, new { @class = "col-md2 control-label" })
 <div class="col-md-12">
 @Html.TextAreaFor(m => m.Code, new { @class = "form-control", @cols = 100, @rows = 20 })
 @Html.ValidationMessageFor(m => m.Code)
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(x => x.TaskId)
 <div class="col-md-12">
 @Html.DropDownListFor(x => x.TaskId, Model.Tasks)
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-offset-2 col-md-10">
 <input type="submit" class="btn btn-default" value="Submit" />
 </div>
 </div>
 }
 <!-- 添加局部视图展示容器 -->
 <div id="output"></div>
 <div class="form-group">
 <div class="col-md-offset-2 col-md-10">
 <input type="submit" class="btn btn-default" value="Login " onclick="@("window.location.href='" + @Url.Action("Login", "Home") + "'");" />
 </div>
 </div>
 </section>
 </div>
 </div>
@section Scripts {
 @Scripts.Render("~/Scripts/jquery-3.6.0.min.js") <!-- 确保jQuery先加载 -->
 @Scripts.Render("~/Scripts/jquery.validate.min.js")
 @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
 <script>
 $(function() {
 // 监听表单提交事件
 $('#sendedTaskForm form').submit(function(e) {
 // 阻止默认的页面跳转行为
 e.preventDefault();
 
 var $form = $(this);
 // 先验证表单（如果需要）
 if (!$form.valid()) {
 return;
 }
 
 // 发送AJAX POST请求
 $.ajax({
 url: $form.attr('action'),
 type: $form.attr('method'),
 data: $form.serialize(), // 自动序列化表单所有参数
 success: function(data) {
 // 将返回的局部视图插入到容器中
 $('#output').html(data);
 },
 error: function(xhr) {
 $('#output').html('<div class="alert alert-danger">提交失败，请重试</div>');
 }
 });
 });
 });
 </script>
}

2. 修改HomeController：返回局部视图 #

将FromInput方法的返回值从View改为PartialView，这样后台只会返回Success视图的内容，不包含布局页：

[ValidateInput(false)]
[HttpPost]
public ActionResult FromInput(IndexViewModel model) {
 var result = new MethodViewModel(); 
 // 这里执行你的业务逻辑处理
 return this.PartialView("Success", model: result); // 返回局部视图
}

3. 确保Success.cshtml是局部视图 #

打开Success.cshtml，在顶部添加@{ Layout = null; }，确保它不会加载布局页：

@{ Layout = null; }
<!-- 原Success视图的内容保持不变 -->
<div class="success-message">
  <!-- 展示业务处理结果 -->
  <p>提交成功！</p>
  <!-- 可以使用Model（MethodViewModel）展示数据 -->
</div>

• 确保jQuery的引用顺序正确：必须先加载jQuery，再加载验证脚本和自定义脚本
• 如果你的表单有客户端验证，$form.valid()会自动触发验证，只有验证通过才会发送AJAX请求
• 可以根据业务需求，在AJAX的error回调里添加更友好的错误提示

内容的提问来源于stack exchange，提问作者michasaucer