Как включить формы проверки кода html, сгенерированного методом jquery. html ()? - PullRequest
0 голосов
/ 07 апреля 2020

Я конвертирую PartialView в html строку, и эта строка рисует в модальном. ParticalView - это форма для регистра «CriterioPutuacion», но когда я отправляю форму, я пытаюсь проверить параметры. Валидация для этой формы не показывается и форма отправляется. Мне нужно показать подтверждение перед отправкой формы.

C# Код

[AcceptVerbs(HttpVerbs.Get)]
public async Task<ActionResult> Edit(long? id)
{
            var user = await GetUser();
            var criterioModel = new CriteriosPuntuacionModel(user.Id, user.IdEvento);

            var criterio = id == null
                ? new Respuesta<CriterioPuntuacion>()
                {
                    Error = false,
                    Result = new CriterioPuntuacion()
                }
                : await criterioModel.GetById(id.Value);

            if (criterio.Error || criterio.Result == null)
            {
                return Json(new { Success = false, Message = "Error al obtener la información" }, JsonRequestBehavior.AllowGet);
            }


            var vm = new CriteriosPuntuacionViewModel();

            vm.Nombre = criterio.Result.Nombre;
            vm.Descripcion = criterio.Result.Descripcion;

            return Json(new { Success = true, Html = (PartialView("_CreateEdit", vm)).RenderToString() }, JsonRequestBehavior.AllowGet);


        }

JS Код

var main = function () {

            var initButtons = function () {

                $('#btnGuardar').click(function (e) {

                    e.preventDefault();

                    if ($('#form_registro').valid()) {
                        $('#form_registro').submit();
                    }
                    else {
                        toastr['error']("Se encontraron errores, revisa tu información.", "");
                    }

                });

                $('#Registrar').click(function (e) {
                    e.preventDefault();
                    showForm();
                    main.init();

                });

                $("#form_registro").submit(
                    function (e) {

                        e.preventDefault();
                        guardar();

                    });

            };

            var showForm = function (id=null) {

                var url = siteLocation + "CriterioPuntuacion/Edit";


                $.blockUI();

                $.ajax({
                    cache: false,
                    type: 'GET',
                    data: { id: id },
                    url: url,
                    success: function (e) {

                        if (e.Success) {
                            $("#formCriterio").empty().html(e.Html);
                        }
                        else
                        {
                            mensaje(e.Success, e.Message)
                        }

                        $.unblockUI();
                    },
                    error: function (e) {
                        mensaje(e.Success, e.Message);                       
                        $.unblockUI();
                    }
                });

            };

            var mensaje = function (success, message)
            {
                if (success)
                {
                    toastr['success'](message, '');
                }
                else
                {
                    toastr['error'](message, '');
                }
            }

            var guardar = function () {

                var url = siteLocation + "CriterioPuntuacion/Save";

                var form = $('#form_registro')[0];

                // Create an FormData object
                var data = new FormData(form);

                $.blockUI();

                $.ajax({
                    cache: false,
                    type: 'POST',
                    data: data,
                    processData: false, // tell jQuery not to process the data
                    contentType: false, // tell jQuery not to set contentType
                    enctype: 'multipart/form-data',
                    url: url,
                    success: function (content) {

                        if (!content.Error) {

                            Swal.fire({
                                title: 'Listo!',
                                text: 'Se guardó la información correctamente.',
                                type: 'success',
                                confirmButtonText: 'OK',
                                onClose: () => {

                                    location.href = siteLocation + "Categoria";
                                }
                            });

                        } else {

                            toastr['error'](content.ErrorDescription, '');
                        }

                        $.unblockUI();
                    },
                    error: function () {
                        toastr['error']("Hubo un error al guardar la información.", '');
                        $.unblockUI();
                    }
                });

            };

            return {

                init: function () {
                    initButtons();
                }
            }
        }();


        $(document).ready(function () {
            main.init();
        })

PartialView

@using TimeCappWeb.Model
@model TimeCappWeb.Models.ViewModels.CriteriosPuntuacionViewModel
<hr/>
<h3>Nuevo Criterio</h3>
<br />
<form class="m-form" enctype="multipart/form-data" id="form_registro" name="form_registro" method="post">
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    <div class="m-portlet__body">
        <div class="m-form__section m-form__section--first">
            <div class="form-group m-form__group">
                @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @for = "Nombre" })
                @Html.TextBoxFor(model => model.Nombre, new { @class = "form-control m-input" })
                @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "field-validation-valid m-form__help text-danger" })
            </div>
            <div class="form-group m-form__group">
                @Html.LabelFor(model => model.Descripcion, htmlAttributes: new { @for = "Descripcion" })
                @Html.TextAreaFor(model => model.Descripcion, new { @class = "form-control m-input" })
                <span class="m-form__help">Ingresa la descripción completa del criterio.</span>
            </div>
        </div>
    </div>
</form>

Модальное изображение

...