How to display partial HTML after post action in the same HTML?

Question

I want to display partial html after POST on my Form.

First, i have Index.cshtml file:

@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")
}

After clicking Submit button, form is passed to my method in HomeController.cs that for today's state its looking like this:

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

My question is, how to return Succes.cshtml from my FromInput method to Index.cshtml as partial view? I want to see output from FromInput method not as another Succes.cshtml but as part of Index.cshtml (thats why i mentioned Partial Html, maybe it will work but i dont know how) What i need to do first? What changes i need to make to make it simple?

EDIT:

Im trying some options:

To my Index.cshtml i added div on below of html document and another button :

<div id="output">

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

And to Index.cshtml i added script:

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

But it not work

Answer 1

You have to first call your Partial view in Index.cshtml and then after when you submit the form you can fill that partial view model and return the partial view.

I've created a demo for you please have look below code and change accordingly.

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

Partial Page

@model Example.Models.Test

@{ 
    Layout = null;
}

<h3>Partial view result</h3>

<h4>@Model.Result</h4>

Note: Let me know if you have any query for the above code.

Answer 2

You can change Begin.Form to Ajax.BeginForm

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

Change from

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

to

return PartialView("Success", model);

You can reference this link for more detail implementation How to use Simple Ajax Beginform in Asp.net MVC 4?