Как отобразить частичный HTML после действия публикации в том же HTML?

Question

Я хочу отобразить 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 я добавил div внизу html 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);
    });
}

Но это не такработа

Answer 1

Вы должны сначала вызвать Частичное представление в 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>

Контроллер

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>

Примечание. Дайте мне знать, если у вас есть запрос по вышеуказанному коду.

Answer 2

Вы можете изменить Begin.Form на Ajax.BeginForm

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

Изменить с

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

на

return PartialView("Success", model);

Вы можете ссылаться на эту ссылку для болееподробное описание Как использовать Простой Ajax Beginform в Asp.net MVC 4?