Question

我不是一个前端Web开发人员。我更喜欢在后端工作，但是我一直试图在一天的大部分时间内解决此问题。

无论我尝试什么，该模型始终为空。如果我将“保存”按钮更改为键入“提交”，则可以正常工作，但这只是跳过了确认对话框。

我整理了一个简化的MVC项目（如下）以突出我的问题。

任何帮助将不胜感激。

我尝试过：

$（“＃PersonalDetailsForm”）。submit（）;
$（“＃PersonalDetailsForm”）[0] .submit（）;
$（“＃PersonalDetailsForm”）[1] .submit（）;
使用ajax调用
将确认模式放入表单中，并将其更改为“ submit”
将模型重命名为“模型”（如下）

欢呼

基本视图

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

Answer 1

还以ajax的形式发送数据作为数据：打开花括号名称：$（“＃a”）。val（），姓氏：$（“＃b”）。val（）结束花括号名称和姓氏应与Model中以及任何元素的name属性中的相同

Answer 2

对于感兴趣的人，如上所述，$（“＃PersonalDetailsForm：input”）。prop（“ disabled”，true）;线使一切无效。在提交之后，我将其移至，现在一切正常。

在JQuery提交上，模型为null

2 个答案: