jquery - español - asp.net mvc versions

Validación del lado de la vista parcial del diálogo de Jquery en el botón Guardar clic

Question

Tengo una tabla que muestra datos. Cada fila de la tabla tiene el botón Editar. Cuando se hace clic en el botón Editar, aparece un diálogo de jquery con Formulario para editar la información del usuario y el botón Guardar y cancelar. La forma no es más que una vista parcial. Los botones son parte de la vista parcial.

<button name="button" class="button" id="editCurrentRow" onclick="EditCurrentRow(@item.ID); return false;">

$("#editResult").dialog({
    title: ''Edit Admin'',
    autoOpen: false,
    resizable: false,
    height: 500,
    width: 600,
    show: { effect: ''drop'', direction: "up" },
    modal: true,
    draggable: true,
    open: function (event, ui) {
        $(this).load(''@Url.Action("EditAdmin", "AdminSearchResult")'', { id: 1 , isEdit : true }); // pass par from function EditCurrentRow(par) in pacle of 1

    },
    close: function (event, ui) {
        $(this).dialog(''close'');
    }
});

Al hacer clic en el botón Editar, obtengo un diálogo con los valores adecuados. Cuando no hay un error de validación (validación del lado del servidor), el botón de guardar funciona bien, pero una vez que hay un error de validación, la página parcial se abre en una página nueva. el Cancelar funciona bien. Mi vista parcial

@using (Ajax.BeginForm("EditAdmin", "AdminSearchResult", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "editPanel" }))
{
    <div class="editPanel">

        // this is where my html control is 
        <button name="button" value="save" class="button" id="SubmitButton">Save</button>
        &nbsp;
        <button name="button" value="cancel" class="button">Cancel</button>

    </div>
}

mi controlador actionResult es

[HttpPost]
    public ActionResult EditAdmin(int id, Administration admin, string button, bool isEdit = false)
    {            
        if (button == "save")
        {
            var errors = admin.Validate(new ValidationContext(admin, null, null));

            if (errors.Count() == 0)
            {                    
                return RedirectToAction("AdminSearchResult", "AdminSearchResult");
            }
            else
            {
                foreach (var error in errors)
                    foreach (var memberName in error.MemberNames)
                        ModelState.AddModelError(memberName, error.ErrorMessage);

                return PartialView("EditAdmin", admin);
            }
        }

        if (button == "cancel")
        {
            return RedirectToAction("AdminSearchResult", "AdminSearchResult");
        }

        return View();
    }

Pensé que cualquier método de clic de botón en el diálogo debería ser ajax-ified y json-ized. Así que intenté hacer lo siguiente

<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">  </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {

    $("#SubmitButton").click(function () {

        var id = $(''#txtID'').val();
        var lName = $(''#txtLastName'').val();
        var mName = $(''#txtMiddleName'').val();
        var fName = $(''#txtFirstName'').val();
        var uName = $(''#txtUserName'').val();
        var email = $(''#txtEmail'').val();
        var uRole = $(''#ddlUserRoleName'').val();
        var active = $(''#chkActive'').val();

        var admin = {
            ID: id,
            LastName: lName,
            MiddleName: mName,
            FirstName: fName,
            userName: uName,
            emailAddress: email,
            IsActive: active,
            UserRole: uRole
        }

        $.ajax({
            url: ''@Url.Action("EditAdmin", "AdminSearchResult")'',
            type: ''POST'',
            dataType: ''html'',
            contentType: "application/json; charset=utf-8",
            data: ''JSON.stringify(admin)'',
            success: function (result) {
                alert(result);
                if (result.success) {
                    alert("Success");
                } else {
                    alert("Fail");
                    $(''#editPanel'').html(result);
                }
            }
        });
        return false;
    });
});   

</script

El problema es que después de agregar la llamada $ .ajax en $ ("# SubmitButton") haga clic en (función () el botón simplemente hace cualquier cosa al hacer clic. Quiero que se guarde cuando no se produzca ningún error de validación del lado del servidor y del servidor hay mensajes de error que se deben mostrar en el cuadro de diálogo.

También en mi configuración web tengo la configuración adecuada para la validación

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

Gracias

Answer 1

Hola sin escribir ningún JScript, podemos incluir características no intrusivas. como a continuación.

Modelo

    Public class Model{[Required(ErrorMessage = "Required.")]
   [Range(0, int.MaxValue, ErrorMessage = "Please enter a Number")]
   public int NumberOfPosters { get; set; }}

Vista parcial

    @Html.TextBoxFor(model => model.NumberOfPosters, new { style="width:150px;"})
     @Html.ValidationMessageFor(model => model.NumberOfPosters)

Answer 2

Debería probar el no intrusivo Ejemplo de validación del lado del cliente

JQuery

$(''#BTN'').click(function () {
    var $formContainer = $(''#formContainer'');
    var url = $formContainer.attr(''data-url'');
    $formContainer.load(url, function () {
        var $form = $(''#myForm'');
        $.validator.unobtrusive.parse($form);
        $form.submit(function () {
            var $form = $(this);
            if ($form.valid()) {
                $.ajax({
                    url: url,
                    async: true,
                    type: ''POST'',
                    data: JSON.stringify("Your Object or parameter"),
                    beforeSend: function (xhr, opts) {
                    },
                    contentType: ''application/json; charset=utf-8'',
                    complete: function () { },
                    success: function (data) {
                        $form.html(data);
                        $form.removeData(''validator'');
                        $form.removeData(''unobtrusiveValidation'');
                        $.validator.unobtrusive.parse($form);
                    }
                });
            }
            return false;
        });
    });
    return false;
});

Ver

<div id="formContainer" data-url="@Url.Action("ActionName", "ControllerName", 
                                             new { area = "Area Name" })"></div>
<input id="BTN" type="button" value="Button" />

Modelo

public class SampleModule
{
    [Required]
    public String MyName { get; set; }
}

Vista parcial

@using (Html.BeginForm("Action Name", "Controller Name", FormMethod.Post, 
                       new { id = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <p id="getDateTimeString"></p>
   <input type="button" value="Button" />        
}

Referencias

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript">
</script>