时间戳

首页 > 解决方案 > Edit bootstrap modal 可以工作，或者 Jquery .validate 函数可以工作

c# - Edit bootstrap modal 可以工作，或者 Jquery .validate 函数可以工作

问题描述

我的主视图中有一个编辑弹出模式

加载.cshtml

<div class="modal fade" id="EditVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <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>
                <h4 class="modal-title" style="font-weight: bold; font-size: 25px">
                    Edit Volunteer Details
                </h4>
            </div>
            <div class="modal-body">
                <form id="EditForm"> @*ID of my form*@

                </form>
            </div>
        </div>
    </div>
</div>

这是我在Load.cshtml中的 Jquery

$("#EditForm").validate({
    errorClass: 'errors',
    rules: {
        PhoneNumber: {
            required: true,

        },
        EmailAddress: {
            required: true,

        },
        DonationForWhom: {
            required: true,

        },
        DonationValue: {
            required: true,

        }

    },
    messages: {
        PhoneNumber: {
            required: "Please Enter Phone Number",
            color: "#FF0000"
        },
        EmailAddress: {
            required: "Please Enter Email Id",

        },
        DonationForWhom: {
            required: "Please enter whom the donation is for",

        },
        DonationValue: {
            required: "Please Enter Donation Value",

        },

    }
});

这是我在上面的编辑模式中加载视图的功能

function EditVolunteer(vId) {
    $.ajax({
        url: '@Url.Action("EditVolunteerById","ViewEditVolunteer")',
        data: { id: vId },
        type: "GET"
    }).done(function(data) {
        $("#EditVolunteerModal .modal-body #EditForm").html(data);
    });
}

我的问题：

当我进行编辑时，如果我在我的完成功能中使用它，它不会在数据库中更新

$("#EditVolunteerModal .modal-body #EditForm").html(data);

但是，如果我使用以下内容，我可以对我的数据库进行更新，但不会触发验证。

$("#EditVolunteerModal .modal-body").html(data);

我认为不需要我的部分视图，但如果需要，请告诉我。

我的尝试

  1. 尝试按照答案中的建议替换 div 标签以在我的模态中形成
  2. 尝试添加@Html.PartialView("Name")我的模态但没有用
  3. 尝试了其他几件事。

我如何让这两件事都正常工作？我的编辑和验证一起？请指导我。谢谢你。

为更清晰而编辑

这是我的主视图（Load.cshtml）

    @model IEnumerable<VMS.Models.VolunteerInfo>
@{
    ViewBag.Title = "Load Volunteer";
}

<head>
    <script src="~/Scripts/jquery.validate-vsdoc.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>



</head>



<h2 style="margin-bottom: 1em">
    Registered Volunteers

    <button type="button" class="btn btn-group-sm btn-success pull-right" id="Excel_Btn">Export to Excel</button>


</h2>

<div id="VolunteerGrid">
    <table class="table" id="tblVolunteers">
        <thead>
        <tr>
            <th>
                Name
            </th>
            @*<th>
                Email
            </th>*@
            <th>
                Phone Number
            </th>
            <th>
                Donation For Whom
            </th>
            <th>
                Date Donation To Be Used
            </th>
            <th>
                Donation Kind
            </th>
            <th>
                Donation Value
            </th>
            <th>
                Date Volunteer Added
            </th>
            <th>
                Action
            </th>
        </tr>
        </thead>

        <tbody>
        @foreach (var volunteer in Model)
        {

            <tr>
                <td>
                    @Html.DisplayFor(modelItem => volunteer.Name)
                </td>
                @*<td>
                    @Html.DisplayFor(modelItem => volunteer.EmailAddress)
                </td>*@
                <td>
                    @Html.DisplayFor(modelItem => volunteer.PhoneNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => volunteer.DonationForWhom)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => volunteer.DateDonationToBeUsed)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => volunteer.DonationKind)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => volunteer.DonationValue)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => volunteer.DateWhenVolunteerWasAdded)
                </td>
                <td>
                    <a href="javascript:void(0)" class="Edit_btn" onclick="EditVolunteer(@volunteer.VolunteerId)">Edit</a> | <a href="javascript:void(0)" class="Delete_btn" id="Delete_btn" onclick="DeleteVolunteer(@volunteer.VolunteerId)">Delete</a>
                </td>
            </tr>
        }

        </tbody>

    </table>

    <div class="modal fade" id="EditVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <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>
                    <h4 class="modal-title" style="font-weight: bold; font-size: 25px">
                        Edit Volunteer Details
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="EditForm">@*ID of my form*@

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="DeleteVolunteerModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <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>
                    <h4 class="modal-title" style="font-weight: bold;font-size: 25px">
                        Delete Volunteer 
                    </h4>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">

    $(document).ready(function() {

        $('#Excel_Btn').on('click', function() {

            $.ajax({
                url: '@Url.Action("ExportToExcel","ViewEditVolunteer")'

            });

        });

    });
    $("#EditForm").validate({
        errorClass: 'errors',
        rules: {
            PhoneNumber: {
                required: true,

            },
            EmailAddress: {
                required: true,

            },
            DonationForWhom: {
                required: true,

            },
            DonationValue: {
                required: true,

            }

        },
        messages: {
            PhoneNumber: {
                required: "Please Enter Phone Number",
                color: "#FF0000"
            },
            EmailAddress: {
                required: "Please Enter Email Id",

            },
            DonationForWhom: {
                required: "Please enter whom the donation is for",

            },
            DonationValue: {
                required: "Please Enter Donation Value",

            },

        }
    });



    $('#tblVolunteers').dataTable();

    $(".Edit_btn").on('click', function() {
        $("#EditVolunteerModal").modal("show");
    });
    $(".Delete_btn").on('click', function() {
        $("#DeleteVolunteerModal").modal("show");
    });

    function EditVolunteer(vId) {
        $.ajax({
            url: '@Url.Action("EditVolunteerById","ViewEditVolunteer")',
            data: { id: vId },
            type: "GET"
        }).done(function(data) {
            $("#EditVolunteerModal .modal-body").html(data);
        });
    }

    function DeleteVolunteer(vId) {
        $.ajax({
            url: '@Url.Action("DeleteVolunteerById","ViewEditVolunteer")',
            data: { id: vId },
            type: "GET"
        }).done(function(data) {
            $("#DeleteVolunteerModal .modal-body").html(data);
        });
    }





</script>

这是我的部分观点

    <html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit Volunteer</title>
</head>
<body>
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor( model => model.VolunteerId)
            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    @Html.HiddenFor(model => model.Name)
                </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.BirthdayDay_AnniversaryDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BirthdayDay_AnniversaryDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BirthdayDay_AnniversaryDate, "", new { @class = "text-danger" })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Who the donatin is for?*", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DonationForWhom, new { htmlAttributes = new { @class = "form-control"} })
                @Html.ValidationMessageFor(model => model.DonationForWhom, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.OccasionsID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.OccasionsID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.OccasionsID, "", new { @class = "text-danger" })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.DonationKind, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.RadioButtonFor(v => v.DonationKind, "Money", new { id = "RadioMoney", name = "RadioMoney" }) Money
                @Html.RadioButtonFor(v => v.DonationKind, "Kind Donation", new { id = "RadioKindDonation", name = "RadioKindDonation" }) Kind Donation
                @Html.ValidationMessageFor(model => model.DonationKind, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Donation Value*", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DonationValue, new { htmlAttributes = new { @class = "form-control"} })
                @Html.ValidationMessageFor(model => model.DonationValue, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.DateWhenVolunteerWasAdded, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateWhenVolunteerWasAdded, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DateWhenVolunteerWasAdded, "", new { @class = "text-danger" })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.DateDonationToBeUsed, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateDonationToBeUsed, new { htmlAttributes = new { @class = "form-control", placeholder = "mm/dd/yyyy" } })
                @Html.ValidationMessageFor(model => model.DateDonationToBeUsed, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" />
            </div>
        </div>
    </div>
}

这是它在 HTML 中呈现的方式

<form action="/ViewEditVolunteer/EditVolunteerById?id=1063" method="post"><input name="__RequestVerificationToken" type="hidden" value="UQY-eF0sZ-3s1wFWFtmdeoHrY-IAcH9feGh0u9_EJiDHp0ilifxJbemVY7WEx3qtYHN0CL7z3IEqMS3acgKW-xnMM4iVGTECC4xbavo5Uxc1">        <div class="form-horizontal">


        <input data-val="true" data-val-number="The field VolunteerId must be a number." data-val-required="The VolunteerId field is required." id="VolunteerId" name="VolunteerId" type="hidden" value="1063">
        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name*</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="Name is required" disabled="disabled" id="Name" name="Name" type="text" value="Nikhil">
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
                <input id="Name" name="Name" type="hidden" value="Nikhil">
            </div>
        </div>



        <div class="form-group">
            <label class="control-label col-md-2" for="PhoneNumber">Phone Number*</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-number="The field Phone Number* must be a number." data-val-required="Phone number is required" id="PhoneNumber" name="PhoneNumber" type="number" value="0">
                <span class="field-validation-valid text-danger" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Address">Address</label>
            <div class="col-md-10">
                <textarea cols="20" htmlattributes="{ class = form-control }" id="Address" name="Address" rows="2">sndkas</textarea>
                <span class="field-validation-valid text-danger" data-valmsg-for="Address" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="EmailAddress">Email*</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-regex="Email is not valid" data-val-regex-pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" data-val-required="Email is required" id="EmailAddress" name="EmailAddress" type="text" value="naina@gmail.com">
                <span class="field-validation-valid text-danger" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Who_the_donatin_is_for__">Who the donatin is for?*</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="DonationForWhom" name="DonationForWhom" type="text" value="Nikhil">
                <span class="field-validation-valid text-danger" data-valmsg-for="DonationForWhom" data-valmsg-replace="true"></span>
            </div>
        </div>



        <div class="form-group">
            <label class="control-label col-md-2" for="DonationKind">What kind of donation?*</label>
            <div class="col-md-10">
                <input data-val="true" data-val-required="Please select one" id="RadioMoney" name="DonationKind" type="radio" value="Money"> Money
                <input checked="checked" id="RadioKindDonation" name="DonationKind" type="radio" value="Kind Donation"> Kind Donation
                <span class="field-validation-valid text-danger" data-valmsg-for="DonationKind" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Donation_Value_">Donation Value*</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="Please Enter Value" id="DonationValue" name="DonationValue" type="text" value="50Kg Daal">
                <span class="field-validation-valid text-danger" data-valmsg-for="DonationValue" data-valmsg-replace="true"></span>
            </div>
        </div>



        <div class="form-group">
            <label class="control-label col-md-2" for="DateDonationToBeUsed">What day the donation is to be used?</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="DateDonationToBeUsed" name="DateDonationToBeUsed" placeholder="mm/dd/yyyy" type="text" value="07/08/2018">
                <span class="field-validation-valid text-danger" data-valmsg-for="DateDonationToBeUsed" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-success">
            </div>
        </div>
    </div>

标签： c#jqueryasp.net-mvcjquery-validatebootstrap-modal

解决方案

  1. 消除<form id="EditForm"></form>
  2. 把ID放在这里@using (Html.BeginForm("EditActionMethodName","ControllerName",FormMethod.Post,new {@id = "EditForm"})
  3. 剪切表单验证代码块表单主视图并复制到编辑志愿者局部视图

.

$("#EditForm").validate({
    errorClass: 'errors',
    rules: {
        PhoneNumber: {
            required: true,

        },
        EmailAddress: {
            required: true,

        },
        DonationForWhom: {
            required: true,

        },
        DonationValue: {
            required: true,

        }

    },
    messages: {
        PhoneNumber: {
            required: "Please Enter Phone Number",
            color: "#FF0000"
        },
        EmailAddress: {
            required: "Please Enter Email Id",

        },
        DonationForWhom: {
            required: "Please enter whom the donation is for",

        },
        DonationValue: {
            required: "Please Enter Donation Value",

        },

    }
});

应该管用。

推荐阅读