相关疑难解决方法(0)

如何使用带有验证的jQuery在Modal中创建.NET MVC表单

我真的很想知道怎么把这些放在一起.我已经在.net MVC页面中构建了很多次表单,无论有没有验证.我使用jQuery构建了表单,有和没有验证.我已经在模态中构建了表单,但从未使用过MVC.

我从原来的问题中理解,因为这个形式在一个模态中,我需要使用jQuery来处理提交.我正好想弄清楚如何把所有这些活动的部分组合在一起.到目前为止,我还没有找到将这些全部放在一起的教程(或教程组合).

这就是我需要的:

  • 在我的MVC视图中,有一个按钮可以打开一个模态. (这很好.)
  • 模态打开后,它包含一个包含多个文本字段和下拉列表的表单.每个都是必需的. (为了使字段成为必需字段,我是否会在视图的模型中定义它们,就像我通常使用MVC表单一样?或者我是否在jQuery中创建需求?)
  • 如果用户尝试提交表单并且它们为空或无效,则模式保持打开状态并显示验证消息. (我理解,从我最初的问题来看,使用直接MVC是不可能的,因为模态,并且需要一些jQuery.我迷失在这里.)
  • 如果用户尝试提交表单并且所有字段都有效,则模态关闭,我们点击控制器并将字段保存到数据库. (不知道如何逃离jQuery,只需点击普通控制器来处理最终的逻辑.)

编辑:

谢谢杰森,谢谢你的帮助!根据您的建议,这就是我的工作方式.

父视图:

模式:

<div class="modal fade" id="AccountEditModal" tabindex="-1" role="dialog" aria-labelledby="AccountEditModalLabel">
    <div class="modal-dialog modalAccountEdit" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3>
            </div>

            <div class="modal-body">
                <div id="formContent">
                    @Html.Partial("_AccountProfileEdit", new GEDCPatientPortal.Models.AccountProfileEditViewModel())
                </div>
            </div>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

接下来是脚本:

@section Scripts {
    <script>
        $(document).ready(function () {

            $('#AccountEditModal').on('shown.bs.modal', function () {
                $('#myInput').focus()
            })



        $("#AccountEditModal").on("submit", "#form-accountprofileedit", function (e) {
            e.preventDefault(); …
Run Code Online (Sandbox Code Playgroud)

forms asp.net-mvc jquery modal-dialog

21
推荐指数
1
解决办法
4万
查看次数

标签 统计

asp.net-mvc ×1

forms ×1

jquery ×1

modal-dialog ×1