javascript - 如何在同一 HTML 中执行后操作后显示部分 HTML？

Question

我想在 Form 上的 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")
}

单击提交 按钮后，表单将传递到我在HomeController.cs 中的方法，对于今天的状态，它看起来像这样:

//i return Index.cshtml like that:
public ActionResult Index()
{
    var model = new IndexViewModel { Tasks = new List<SelectListItem>() };
    foreach (Models.Task task in this.db.Tasks)
    {
        model.Tasks.Add(new SelectListItem { Value = task.Id.ToString(), Text = task.Name });
    }

    return this.View(model);
}

//i recive form from Index.cshtml here
[ValidateInput(false)]
[HttpPost]
public ActionResult FromInput(IndexViewModel model)
{

    var result = new MethodViewModel() //app logic, look at another view models in Index and Method
    return this.View("Succes", model: result);            
}

我的问题是，如何将 Succes.cshtml 从我的 FromInput 方法返回到 Index.cshtml 作为部分 View ？我希望看到 FromInput 方法的输出不是另一个 Succes.cshtml 而是 Index.cshtml 的一部分(这就是为什么我提到 部分 Html，也许它会起作用，但我不知道如何)我首先需要做什么？我需要进行哪些更改才能使其变得简单？

编辑:

我正在尝试一些选择:

在我的 Index.cshtml 中，我在 html 文档 的下方添加了 div 和另一个按钮:

<div id="output">

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

在 Index.cshtml 中，我添加了 script:

<script>
document.getElementById("submit").onclick = function () { myFunction() };
function myFunction() {
    $.get('@Url.Action("FromInput", "Home")', function(data) {
    $('#output').replaceWith(data);
    });
}

但是不行

Answer 1

您必须先在 Index.cshtml 中调用您的局部 View ，然后在您提交表单后，您可以填充该局部 View 模型并返回局部 View 。

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

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>

Controller

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>

注意:如果您对上述代码有任何疑问，请告诉我。