Как отобразить частичный 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 я добавил 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);
    });
}

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
92
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

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

Не могли бы вы рассказать мне, как это будет работать? Я нажимаю «Отправить», тогда как Succes.cshtml будет отображаться (например) под формой?

michasaucer 09.04.2019 14:44
Ответ принят как подходящий

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

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

Извините, но ваш пример не работает должным образом. После нажатия «Отправить» верно, что мы остаемся на Index маршруте, но cshtml перезагружается в _PartialPage. Я хочу остаться в Index.cshtml со всем его содержанием и (например) добавить свой _PartialPagr внизу страницы. Я не хочу видеть только _partialPage контент, но Index.cshtml контент и _PartialPage.cshtml контент в одном HTML

michasaucer 09.04.2019 18:00

Я добавил новый код частичной страницы в приведенный выше ответ, надеюсь, что ваша частичная страница будет такой же, как Index.cshtml никогда не перезагружается, когда вы возвращаете другие частичные страницы.

Krishnakumar Patel 10.04.2019 08:20

Другие вопросы по теме