Я хочу отображать 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);
});
}
Но это не работает
Вы можете изменить 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?
Вы должны сначала вызвать свой Частичный вид в Индекс.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
Я добавил новый код частичной страницы в приведенный выше ответ, надеюсь, что ваша частичная страница будет такой же, как Index.cshtml никогда не перезагружается, когда вы возвращаете другие частичные страницы.
Не могли бы вы рассказать мне, как это будет работать? Я нажимаю «Отправить», тогда как
Succes.cshtml
будет отображаться (например) под формой?