Я не очень сторонний веб-разработчик. Я предпочитаю работать в бэк-энде, но я пытался решить эту проблему большую часть дня.
Что бы я ни пытался, модель всегда пуста. Если я изменю кнопку «Сохранить» на «Отправить», она будет работать нормально, но при этом пропускается диалоговое окно подтверждения.
Я выделил упрощенный проект MVC (ниже), чтобы осветить мою проблему.
Любая помощь будет принята с благодарностью.
Я пробовал:
- $ ( "# PersonalDetailsForm") представляет ();.
- $ ( "# PersonalDetailsForm") [0] .submit ();
- $ ( "# PersonalDetailsForm") [1] .submit ();
- Использование вызова ajax
- Поместить модальное подтверждение внутри формы и изменить его на тип «отправить»
- Переименование модели в «модель» (как показано ниже)
Приветствия
Базовый вид
<div class="row">
<a id="collectDetailsLink">Collect Personal Details</a>
</div>
<div class="modal fade" id="personalDetailsModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div id="personalDetailsModalContent"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#collectDetailsLink").click(function () {
$.ajax({
type: "GET",
url: '@Url.Action("PersonalDetails", "Home")',
success: function (data) {
$('#personalDetailsModalContent').html(data);
$('#personalDetailsModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
},
cache: false
});
});
});
</script>
Частичное представление
@model JavaScriptFormPost.Models.PersonalDetailsModel
@using (Html.BeginForm("PersonalDetails", "Home", FormMethod.Post, new { id = "PersonalDetailsForm" }))
{
<div>
@Html.DisplayNameFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName)
</div>
<div>
@Html.DisplayNameFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName)
</div>
<div>
<input type="button" id="saveButton" value="Save" />
<input type="button" id="cancelButton" value="Cancel" />
</div>
}
<div id="confirmationModal" class="modal">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-body">
<div>Are you sure?</div>
</div>
<div class="modal-footer">
<input type="button" id="yesButton" value="Yes" />
<input type="button" id="noButton" value="No" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#saveButton").click(function() {
var options = { "backdrop": "static", keyboard: true };
$('#confirmationModal').modal(options);
$('#confirmationModal').modal('show');
});
$("#yesButton").click(function() {
$("#PersonalDetailsForm :input").prop("disabled", true);
$('#confirmationModal').modal('hide');
$("#PersonalDetailsForm").submit();
});
$("#noButton").click(function() {
$('#confirmationModal').modal('hide');
});
});
</script>
Контроллер
using System.Web.Mvc;
using JavaScriptFormPost.Models;
namespace JavaScriptFormPost.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult PersonalDetails()
{
return View();
}
[HttpPost]
public ActionResult PersonalDetails(PersonalDetailsModel model)
{
return RedirectToAction("Index", "Home");
}
}
}
Модель
using System.ComponentModel;
namespace JavaScriptFormPost.Models
{
public class PersonalDetailsModel
{
[DisplayName("First Name")]
public string FirstName { get; set; }
[DisplayName("Last Name")]
public string LastName { get; set; }
}
}