时间戳

首页 > 解决方案 > 如何在同一 HTML 中发布操作后显示部分 HTML？

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

问题描述

我想partial html在POST我的Form.

首先，我有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")
}

单击Submit按钮后，表单将传递给我的方法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部分视图？我想看到FromInput方法的输出不是另一个Succes.cshtml，而是作为Index.cshtml（这就是我提到的原因Partial Html，也许它会起作用但我不知道如何）我首先需要做什么？我需要进行哪些更改才能使其变得简单？

编辑：

我尝试了一些选择：

我在下面Index.cshtml添加了另一个按钮：divhtml document

<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);
    });
}

但它不起作用

标签： javascriptc#htmlasp.net-mvc

解决方案

您必须首先在Index.cshtml中调用您的部分视图，然后在提交表单后，您可以填写该部分视图模型并返回部分视图。

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

索引.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>

控制器 

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>

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

推荐阅读