Javascript 如何在相同的HTML中显示post操作后的部分HTML？

我想在我的

表单

上的

POST

之后显示

部分html

首先，我有

Index.cshtml

文件：

@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 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.validate.min.js")
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
}

我的问题是，如何将

success.cshtml

作为部分视图从我的

FromInput

方法返回到

Index.cshtml

？我不想把

FromInput

方法的输出看作另一个

success.cshtml

，而是作为

Index.cshtml

的一部分（这就是为什么我提到了

部分Html

，也许它会工作，但我不知道如何）我首先需要做什么？我需要做些什么改变来简化它

编辑：

我正在尝试一些选择：

在我的

Index.cshtml

中，我在

html文档的下方添加了
div
和另一个按钮：

<div id="output">

</div>
<button id="submit">submit</button>


但是它不起作用
您可以将
Begin.Form
更改为
Ajax.BeginForm

@using (Ajax.BeginForm("FromInput", "Home", new AjaxOptions {
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "yourDivId"
}))

从

return this.View("Succes", model: result);

到

您可以参考此链接以了解更详细的实现
您必须首先在Index.cshtml中调用您的局部视图，然后在提交表单后，您可以填写该局部视图模型并返回局部视图

我已经为您创建了一个演示，请查看下面的代码并进行相应的更改

Index.cshtml

@model Example.Models.Test
@{
    Layout = null;
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<div class="">
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "Form1" }))
    {
        @Html.TextBoxFor(m => m.Result, new { @class = "form-control" })

        <input type="submit" id="btnSubmit" value="Submit" />
    }
</div>

<div>
    @if (ViewBag.Sucess != null)
    {
        @Html.Partial("_PartialPage", Model);
    }
</div>

部分页面

@model Example.Models.Test

@{ 
    Layout = null;
}

<h3>Partial view result</h3>

<h4>@Model.Result</h4>

@model-Example.Models.Test
@{ 
布局=空；
}
局部视图结果
@模型。结果

注意：如果您对上述代码有任何疑问，请告诉我。
您能告诉我它将如何工作吗？我单击Submit，然后在表单下方显示
success.cshtml
的显示方式（例如）？很抱歉，您的示例无法正常工作。单击“提交”后，我们确实停留在
索引
路线上，但是
cshtml
被重新加载到
\u PartialPage
。我想保留
Index.cshtml
中的所有内容，并（例如）在页面底部添加您的
\u PartialPagr
。我不想只看到
\u partialPage
内容，但是
Index.cshtml
内容和
\u partialPage.cshtml
内容在相同的HTML中我已经在上面的答案中添加了新的部分页面代码，希望您的部分页面与相同，返回其他部分页面时不要重新加载Index.cshtml。
return PartialView("Success", model);

@model Example.Models.Test
@{
    Layout = null;
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<div class="">
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "Form1" }))
    {
        @Html.TextBoxFor(m => m.Result, new { @class = "form-control" })

        <input type="submit" id="btnSubmit" value="Submit" />
    }
</div>

<div>
    @if (ViewBag.Sucess != null)
    {
        @Html.Partial("_PartialPage", Model);
    }
</div>

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(Test  mdltest)
{
   //Your data processing over here
   ViewBag.Sucess = "yes"; //For prevent partial view calling when form not submit
   return View("_PartialPage", mdltest);
}

@model Example.Models.Test

@{ 
    Layout = null;
}

<h3>Partial view result</h3>

<h4>@Model.Result</h4>