从嵌套的局部视图更新隐藏字段答案

【问题标题】：update hidden filed from posted partial view从嵌套的局部视图更新隐藏字段
【发布时间】：2017-08-09 04:09:04
【问题描述】：

RuoloModelView

public class RuoloModelView: role
{
    public enum MODEVIEW
    {
        NEW,
        EDIT, 
    }
    public MODEVIEW ModeView { get; set; }
}

家庭控制器

    #region Gestione Ruolo
    public ActionResult Ruolo()
    {
        return View(new RuoloModelView());
    }
    [HttpPost]
    public ActionResult RuoloEdit(string JsonResponse)
    {
        RuoloModelView rmv = Newtonsoft.Json.JsonConvert.DeserializeObject<RuoloModelView>(JsonResponse);
        rmv.ModeView = RuoloModelView.MODEVIEW.EDIT;

        return PartialView("~/Views/Shared/Edit/RuoloEdit.cshtml", rmv);
    }
    #endregion

查看

@using ErpLibrary.dao;
@using ErpMvc.Models;
@using System.Text;

@model ErpMvc.Models.RuoloModelView

@Html.Partial("~/Views/Shared/_BasePage.cshtml")

@{
    ViewBag.Title = "Ruolo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section css{
    <link href="~/Template/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Template/global/plugins/datatables/plugins/editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
}

<!-- BEGIN CONTENT BODY -->

<div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <div class="portlet box blue" style="border-right: 1px !important;border-bottom: 0px !important;">
                <div class="portlet-title tabbable-line ">
                    <div class="caption caption-md">
                        <i class="icon-globe theme-font hide"></i>
                        <span class="caption-subject" style="font-size: 24px !important;font-weight: 100 !important;">
                            Ruolo&nbsp;
                            <i class="fa fa-spinner fa-spin fa-fw" id="loadRuolo"></i>
                            <a href="#" title="CTRL+F" id="aSearch"><i class="fa fa-search" aria-hidden="true" style="color: black;"></i></a>
                        </span>
                    </div>
                    <div class="line-bottom" style="border-top: 1px solid #e7ecf1 !important;margin-top: 60px;"></div>
                    <div class="alert alert-danger display-hide ruolo">
                        <button class="close" data-close="alert"></button>
                        <span> Errore: alcuni campi obbligatori non sono stati valorizzati</span>
                    </div>
                    <!--START RICERCA-->
                    <div class="portlet-body form" style="border:solid 1px #e7ecf1;border-top:none;padding: 15px 15px 15px 15px;display:none" id="divSearch">
                        <form role="form" action="#" id="frmSearch" name="frmSearch" class="search">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-2"><div class="form-group"><input type="text" placeholder="Id" class="form-control focus" id="pId" name="pId" /></div></div>
                                    <div class="col-md-10"><div class="form-group"><input type="text" placeholder="Ruolo" class="form-control focus" id="pText" name="pText" /></div></div>
                                </div>
                                <div class="form-actions right ">
                                    <button type="button" class="btn default" id="btnAnnullaSearch">Annulla</button> @*Chiude la form di ricerca*@
                                    <button type="button" id="btnSearch" class="btn blue"> Cerca </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--END RICERCA-->
                    <!--START RESULT-->
                    <div class="portlet-body form" id="divResult" style="border:solid 1px #e7ecf1;border-top:none;padding:15px;display:none">
                        <form role="form" action="#" id="frmResult" name="fmrResult">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="display" cellspacing="0" width="100%" id="tableRuolo">
                                        <tbody>
                                            <tr><td class="dataTables_empty" colspan="5">Nessun risultato</td></tr>
                                        </tbody>
                                    </table>
                                    @{
                                        _DataTable pw = new _DataTable();
                                        pw.idTable = "tableRuolo";
                                        pw.idSpinner = "loadRuolo";
                                        pw.idLoader = "loader-wrapper";
                                        pw.idSrc = "id";
                                        //add option
                                        pw.options.Add("filter", "true");
                                        pw.options.Add("info", "false");
                                        pw.options.Add("ordering", "true");
                                        pw.options.Add("processing", "true");
                                        pw.options.Add("retrieve", "true");
                                        //add columns DataTables
                                        pw.lsColumn.Add(new Column { Name = "Id", Title = "Identificativo", Orderable = "true", ClassName = "dt-center", Visible = true });
                                        pw.lsColumn.Add(new Column { Name = "Text", Title = "Ruolo", Orderable = "true", ClassName = "dt-left", Visible = true });
                                        //add Fields Editor
                                        //CallBack definition
                                        pw.callBackEditForm = "EditRuolo";
                                    }
                                    @Html.Partial("~/Views/Shared/Controller/_DataTable.cshtml", pw)
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--END RESULT-->
                </div>
                <div class="portlet-body form">
                    <form role="form" action="~/Home/RuoloEdit" id="frmRuolo" name="frmRuolo">
                        @Html.Partial("~/Views/Shared/Edit/RuoloEdit.cshtml", new RuoloModelView())


                    </form>
                </div>
            </div>
        </div>
    </div>
</div><!-- END CONTENT -->
    @Html.HiddenFor(m => m.ModeView, new { @id = "hMODEVIEW", @name = "hMODEVIEW" })
<input type="hidden" id="hModeView" name="hModeView" value="@Model.ModeView" />
<input type="hidden" name="@Html.NameFor(x => Model.ModeView)"value="@Model.ModeView" />

当我第一次加载页面时，我已经正确地使用新值 hModeView，当我发布部分视图，并且我从控制器更改 del MODEVIEW 时，我的隐藏字段保留第一个值。

谢谢

【问题讨论】：

您能否发布一个示例，说明 JsonResponse 中的内容？

标签： c# asp.net asp.net-mvc-4 partial-views hidden-field

【解决方案1】：

会不会是你的部分调用每次都设置一个new RuoloModelView()？

@Html.Partial("~/Views/Shared/Edit/RuoloEdit.cshtml", new RuoloModelView())

【讨论】：

是的，但这只是第一次。当我 drwa 我的数据表时，双击 TR 标签我通过 ajax 帖子调用 RuoloEdit 并设置 RuoloModelView。 partialview 工作在 2 模式，所以第一次被 new modelview 调用

【解决方案2】：

我的部分观点是

@using ErpMvc.Models;

@model ErpMvc.Models.RuoloModelView

@{
    string ajaxUser = string.Empty;
    string messageToast = string.Empty;
    switch (Model.ModeView)
    {
        case RuoloModelView.MODEVIEW.NEW:
            ajaxUser = "CreateRuolo";
            messageToast = "Creazione ruolo avvenuta con successo.";
            break;
        case RuoloModelView.MODEVIEW.EDIT:
            ajaxUser = "EditRuolo";
            messageToast = "Aggiornamento ruolo avvenuta con successo.";
            break;
        //case RuoloModelView.MODEVIEW.REMOVE:
        //    ajaxUser = "RemoveRuolo";
        //    messageToast = "Cancellazione ruolo avvenuta con successo.";
        //    break;
        default:
            break;
    }
}
@{
    <link href="~/Template/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
}

<div class="form-body">
    <div class="tab-content">
        <!-- PERSONAL INFO TAB -->
        <div class="tab-pane active">
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group ">
                        @{
                            if (Model.ModeView == RuoloModelView.MODEVIEW.NEW)
                            {
                                @Html.TextBox("Id", null, new { @placeholder = "Identificativo", @class = "form-control", @readonly = "readonly" })
                            }
                            else
                            {
                                @Html.TextBoxFor(m => m.Id, new { @placeholder = "Identificativo", @class = "form-control", @id = "Id", @readonly = "readonly" })
                            }
                        }
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="form-group">
                        <div class="input-icon right">
                            <i class="fa"></i>
                            <label class="control-label sr-only">User</label>
                            @Html.TextBoxFor(m => m.Text, new { @placeholder = "Ruolo", @class = "form-control focus", @id = "Text", @name = "Text", @maxlength = "25", @required = "required" })
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- END PERSONAL INFO TAB -->
    </div>
    <div class="form-actions right">
        <button type="button" class="btn default" id="btnAnnulla">Annulla</button>
        @{ if (Model.ModeView == RuoloModelView.MODEVIEW.EDIT)
            {
                <button type="button" id="btnRemove" class="btn red"><i class="fa fa-remove"></i> Elimina</button>
            }
        }
        <button type="button" id="btnSave" class="btn blue"><i class="fa fa-check"></i> Salva</button>
    </div>
</div>

【讨论】：

【解决方案3】：

这是来自 ajax 调用的 json 响应

data = "
↵
↵    <link href="/Template/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
↵
↵
↵<div class="form-body">
↵    <div class="tab-content">
↵        <!-- PERSONAL INFO TAB -->
↵        <div class="tab-pane active">
↵            <div class="row">
↵                <div class="col-md-2">
↵                    <div class="form-group ">
↵<input class="form-control" data-val="true" data-val-number="Il campo Id deve essere un numero." id="Id" name="Id" placeholder="Identificativo" readonly="readonly" type="text" value="7" />
↵                    </div>
↵                </div>
↵                <div class="col-md-10">
↵                    <div class="form-group">
↵                        <div class="input-icon right">
↵                            <i class="fa"></i>
↵                            <label class="control-label sr-only">User</label>
↵                            <input class="form-control focus" id="Text" maxlength="25" name="Text" placeholder="Ruolo" required="required" type="text" value="provallll" />
↵                        </div>
↵                    </div>
↵                </div>
↵
↵            </div>
↵        </div>
↵        <!-- END PERSONAL INFO TAB -->
↵    </div>
↵    <div class="form-actions right">
↵        <button type="button" class="btn default" id="btnAnnulla">Annulla</button>
↵                <button type="button" id="btnRemove" class="btn red"><i class="fa fa-remove"></i> Elimina</button>
↵
↵        <button type="button" id="btnSave" class="btn blue"><i class="fa fa-check"></i> Salva</button>
↵    </div>
↵</div>
↵<script type="text/javascript">
↵    function saveRuolo() {
↵        $('.alert-danger.ruolo').hide();
↵        if ($('#frmRuolo').validate().form()) {
↵            var $Param = { "RuoloJson": JSON.stringify($("#frmRuolo").serializeObject()) };
↵            $.ajax({
↵                type: "POST",
↵                data: $Param,
↵                url: App.getGlobalWcfPath() + 'EditRuolo',
↵                contentType: "application/json; charset=utf-8",
↵                dataType: "jsonp",
↵                processdata: false, //True or False
↵                success: function (result) {
↵                    if (result.Error == null || result.Error == "") {
↵                        //toaster
↵                        $.toast('success', 'Aggiornamento ruolo avvenuta con successo.');
↵                        $.resetForm('frmRuolo');
↵                        $('#loader-wrapper').hide();
↵                    } else {
↵                        $.toast('error', "Creazione ruolo ha generato un errore.</br> Se l'errore persiste contattare l\'amministratore");
↵                        $('.alert-danger').show();
↵                        $('#loader-wrapper').hide();
↵                    }
↵                },
↵                error: function () {
↵                    $.toast('error', "Creazione Ruolo ha generato un errore.</br> Se l'errore persiste contattare l\'amministratore");
↵                    $('.alert-danger').show()
↵                    $('#loader-wrapper').hide();
↵                }
↵            })
↵        }
↵    }
↵
↵    function setButton() {
↵        var pathname = $(location).attr('pathname');
↵        var grant = $('a[href="' + pathname + '"]').attr('data-grant');
↵
↵        $("#btnSave").prop('disabled', !($.inArray('U', grant) > 0));//abilita il tasto salva in fase di aggiornamento
↵        $("#btnRemove").prop('disabled', !($.inArray('D', grant) > 0));//abilita il tasto salva in fase di aggironamento
↵        
↵    }
↵
↵    function checkLoadedMenu() {
↵        if ($('.page-sidebar-menu').children().length > 0) { //if the container is visible on the page
↵            setButton();
↵        } else {
↵            setTimeout(checkLoadedMenu, 50); //wait 50 ms, then try again
↵        }
↵    }
↵
↵    $(document).ready(function () {
↵        checkLoadedMenu();
↵
↵        $("#btnSave").on('click', function () {
↵            $('#loader-wrapper').show();
↵            saveRuolo();
↵        });
↵
↵        $("#btnAnnulla").on('click', function () {
↵            $('.alert-danger.ruolo').hide();
↵            $('#btnRemove').hide();
↵            $.resetForm('frmRuolo');
↵
↵        });
↵
↵        $('#frmRuolo').validate({
↵            ignore: "",
↵            errorClass: 'help-block help-block-error', // default input error message class
↵            focusInvalid: false, // do not focus the last invalid input
↵            //rules: {
↵            //    PswNewConfirm: {
↵            //        equalTo: "#PswNew"
↵            //    },
↵            //},
↵            //messages:{
↵            //    PswNewConfirm: {
↵            //        required:"Le password non corrispondono"
↵            //    },
↵            //},
↵            invalidHandler: function (event, validator) { //display error alert on form submit
↵                $('.alert-danger.ruolo').show();
↵                $('#loader-wrapper').hide();
↵            },
↵            errorPlacement: function (error, element) { // render error placement for each input type
↵                var icon = $(element).parent('.input-icon').children('i');
↵                icon.removeClass('fa-check').addClass("fa-warning");
↵                icon.attr("data-original-title", error.text()).tooltip({ 'container': 'body' });
↵                var tpane = $(element).closest('.tab-pane').attr('id');
↵                $("a[href=#" + tpane + "]").pulsate({color:"#FAACAC"});
↵            },
↵            highlight: function (element) { // hightlight error inputs
↵                $(element)
↵                    .closest('.form-group').addClass('has-error'); // set error class to the control group
↵            },
↵            success: function (label, element) {
↵                $(element).closest('.form-group').removeClass('has-error');
↵                var icon = $(element).parent('.input-icon').children('i');
↵                icon.removeClass("fa-warning");//.addClass("fa-check");
↵                var tpane = $(element).closest('.tab-pane').attr('id');
↵                $("a[href=#" + tpane + "]").pulsate("destroy");
↵            },
↵            submitHandler: function (form) {
↵                $('.alert-danger.ruolo').hide();
↵            }
↵        });
↵
↵    });
↵</script>"
460
                    if (data) $('#frmRuolo').html(data);
461
                    $("#divResult").hide();
462
                    showRicerca();
463
                })
464
                .fail(function () {
465
                    $('.alert-danger.ruolo').show();
466
                    $('#loader-wrapper').hide();
467
                });
468
        }
469
        function showRicerca() {
470
            if ($('#divSearch').is(":visible")) {
471
                $('#divSearch').hide('slow');
472
                if (!$("#divResult").is(":visible")) {
473
                    $('#frmRuolo .tab-content').show();
474
                    $('#frmRuolo .form-actions').show();
475
                    $('ul.nav-tabs').show();
476
                }
477
            }
478
            else {
479
                $('#divSearch').show('slow', function () {
480
                    $("#frmSearch").find('input[type=text],textarea,select .focus').filter(':visible:first').focus();
481
                });
482
                $('#frmRuolo .tab-content').hide();
483
                $('#frmRuolo .form-actions').hide();
484
                $('ul.nav-tabs').hide();
485
            }

Aa

.*

edit
8 matches
Cancel

Line 460, Column 21
Sources
Content scripts

top
localhost:56437
Home
Ruolo
Template
fonts.googleapis.com
fonts.gstatic.com
localhost
localhost:49741

Pause On Caught Exceptions
Paused on breakpoint
Watch
Call Stack
(anonymous)
Ruolo:460
j
jquery.min.js:2
fireWith
jquery.min.js:2
x
jquery.min.js:5
b
jquery.min.js:5
Scope
Local
data
:
"
↵
↵    <link href="/Template/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
↵
↵
↵<div class="form-body">
↵    <div class="tab-content">
↵        <!-- PERSONAL INFO TAB -->
↵        <div class="tab-pane active">
↵            <div class="row">
↵                <div class="col-md-2">
↵                    <div class="form-group ">
↵<input class="form-control" data-val="true" data-val-number="Il campo Id deve essere un numero." id="Id" name="Id" placeholder="Identificativo" readonly="readonly" type="text" value="7" />
↵                    </div>
↵                </div>
↵                <div class="col-md-10">
↵                    <div class="form-group">
↵                        <div class="input-icon right">
↵                            <i class="fa"></i>
↵                            <label class="control-label sr-only">User</label>
↵                            <input class="form-control focus" id="Text" maxlength="25" name="Text" placeholder="Ruolo" required="required" type="text" value="provallll" />
↵                        </div>
↵                    </div>
↵                </div>
↵
↵            </div>
↵        </div>
↵        <!-- END PERSONAL INFO TAB -->
↵    </div>
↵    <div class="form-actions right">
↵        <button type="button" class="btn default" id="btnAnnulla">Annulla</button>
↵                <button type="button" id="btnRemove" class="btn red"><i class="fa fa-remove"></i> Elimina</button>
↵
↵        <button type="button" id="btnSave" class="btn blue"><i class="fa fa-check"></i> Salva</button>
↵    </div>
↵</div>
↵<script type="text/javascript">
↵    function saveRuolo() {
↵        $('.alert-danger.ruolo').hide();
↵        if ($('#frmRuolo').validate().form()) {
↵            var $Param = { "RuoloJson": JSON.stringify($("#frmRuolo").serializeObject()) };
↵            $.ajax({
↵                type: "POST",
↵                data: $Param,
↵                url: App.getGlobalWcfPath() + 'EditRuolo',
↵                contentType: "application/json; charset=utf-8",
↵                dataType: "jsonp",
↵                processdata: false, //True or False
↵                success: function (result) {
↵                    if (result.Error == null || result.Error == "") {
↵                        //toaster
↵                        $.toast('success', 'Aggiornamento ruolo avvenuta con successo.');
↵                        $.resetForm('frmRuolo');
↵                        $('#loader-wrapper').hide();
↵                    } else {
↵                        $.toast('error', "Creazione ruolo ha generato un errore.</br> Se l'errore persiste contattare l\'amministratore");
↵                        $('.alert-danger').show();
↵                        $('#loader-wrapper').hide();
↵                    }
↵                },
↵                error: function () {
↵                    $.toast('error', "Creazione Ruolo ha generato un errore.</br> Se l'errore persiste contattare l\'amministratore");
↵                    $('.alert-danger').show()
↵                    $('#loader-wrapper').hide();
↵                }
↵            })
↵        }
↵    }
↵
↵    function setButton() {
↵        var pathname = $(location).attr('pathname');
↵        var grant = $('a[href="' + pathname + '"]').attr('data-grant');
↵
↵        $("#btnSave").prop('disabled', !($.inArray('U', grant) > 0));//abilita il tasto salva in fase di aggiornamento
↵        $("#btnRemove").prop('disabled', !($.inArray('D', grant) > 0));//abilita il tasto salva in fase di aggironamento
↵        
↵    }
↵
↵    function checkLoadedMenu() {
↵        if ($('.page-sidebar-menu').children().length > 0) { //if the container is visible on the page
↵            setButton();
↵        } else {
↵            setTimeout(checkLoadedMenu, 50); //wait 50 ms, then try again
↵        }
↵    }
↵
↵    $(document).ready(function () {
↵        checkLoadedMenu();
↵
↵        $("#btnSave").on('click', function () {
↵            $('#loader-wrapper').show();
↵            saveRuolo();
↵        });
↵
↵        $("#btnAnnulla").on('click', function () {
↵            $('.alert-danger.ruolo').hide();
↵            $('#btnRemove').hide();
↵            $.resetForm('frmRuolo');
↵
↵        });
↵
↵        $('#frmRuolo').validate({
↵            ignore: "",
↵            errorClass: 'help-block help-block-error', // default input error message class
↵            focusInvalid: false, // do not focus the last invalid input
↵            //rules: {
↵            //    PswNewConfirm: {
↵            //        equalTo: "#PswNew"
↵            //    },
↵            //},
↵            //messages:{
↵            //    PswNewConfirm: {
↵            //        required:"Le password non corrispondono"
↵            //    },
↵            //},
↵            invalidHandler: function (event, validator) { //display error alert on form submit
↵                $('.alert-danger.ruolo').show();
↵                $('#loader-wrapper').hide();
↵            },
↵            errorPlacement: function (error, element) { // render error placement for each input type
↵                var icon = $(element).parent('.input-icon').children('i');
↵                icon.removeClass('fa-check').addClass("fa-warning");
↵                icon.attr("data-original-title", error.text()).tooltip({ 'container': 'body' });
↵                var tpane = $(element).closest('.tab-pane').attr('id');
↵                $("a[href=#" + tpane + "]").pulsate({color:"#FAACAC"});
↵            },
↵            highlight: function (element) { // hightlight error inputs
↵                $(element)
↵                    .closest('.form-group').addClass('has-error'); // set error class to the control group
↵            },
↵            success: function (label, element) {
↵                $(element).closest('.form-group').removeClass('has-error');
↵                var icon = $(element).parent('.input-icon').children('i');
↵                icon.removeClass("fa-warning");//.addClass("fa-check");
↵                var tpane = $(element).closest('.tab-pane').attr('id');
↵                $("a[href=#" + tpane + "]").pulsate("destroy");
↵            },
↵            submitHandler: function (form) {
↵                $('.alert-danger.ruolo').hide();
↵            }
↵        });
↵
↵    });
↵</script>"
this
:
Object
Window
Global
Breakpoints

Ruolo:298
if ($('#frmRuolo').validate().form()) {

Ruolo:310
$.toast('success', 'Creazione ruolo avvenuta con successo.');

Ruolo:315
$('.alert-danger').show();

Ruolo:321
$('.alert-danger').show()

Ruolo:460
if (data) $('#frmRuolo').html(data);

Ruolo:465
$('.alert-danger.ruolo').show();

datatables.js:4465
return ye(t, function(t, r, i) {

datatables.js:7282
}, r.prototype.beginUnbreakableBlock = function(t, e) {

datatables.js:7290
var i = n.pages[0];

app.js:1094
toastr.options.onHidden=callBack;
XHR Breakpoints
DOM Breakpoints
Global Listeners
Event Listener Breakpoints







Async
"

    <link href="/Template/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />


<div class="form-body">
    <div class="tab-content">
        <!-- PERSONAL INFO TAB -->
        <div class="tab-pane active">
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group ">
<input class="form-control" data-val="true" data-val-number="Il campo Id deve essere un numero." id="Id" name="Id" placeholder="Identificativo" readonly="readonly" type="text" value="7" />
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="form-group">
                        <div class="input-icon right">
                            <i class="fa"></i>
                            <label class="control-label sr-only">User</label>
                            <input class="form-control focus" id="Text" maxlength="25" name="Text" placeholder="Ruolo" required="required" type="text" value="provallll" />
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- END PERSONAL INFO TAB -->
    </div>
    <div class="form-actions right">
        <button type="button" class="btn default" id="btnAnnulla">Annulla</button>
                <button type="button" id="btnRemove" class="btn red"><i class="fa fa-remove"></i> Elimina</button>

        <button type="button" id="btnSave" class="btn blue"><i class="fa fa-check"></i> Salva</button>
    </div>
</div>
<script type="text/javascript">
    function saveRuolo() {
        $('.alert-danger.ruolo').hide();
        if ($('#frmRuolo').validate().form()) {
            var $Param = { "RuoloJson": JSON.stringify($("#frmRuolo").serializeObject()) };
            $.ajax({
                type: "POST",
                data: $Param,
                url: App.getGlobalWcfPath() + 'EditRuolo',
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                processdata: false, //True or False
                success: function (result) {
                    if (result.Error == null || result.Error == "") {
                        //toaster
                        $.toast('success', 'Aggiornamento ruolo avvenuta con successo.');
                        $.resetForm('frmRuolo');
                        $('#loader-wrapper').hide();
                    } else {
                        $.toast('error', "Creazione ruolo ha generato un errore.</br> Se l'errore persiste contattare l\'amministratore");
                        $('.alert-danger').show();
                        $('#loader-wrapper').hide();
                    }
                },
                error: function () {
                    $.toast('error', "Creazione Ruolo ha generato un errore.</br> Se l'errore persiste contattare l\'amministratore");
                    $('.alert-danger').show()
                    $('#loader-wrapper').hide();
                }
            })
        }
    }

    function setButton() {
        var pathname = $(location).attr('pathname');
        var grant = $('a[href="' + pathname + '"]').attr('data-grant');

        $("#btnSave").prop('disabled', !($.inArray('U', grant) > 0));//abilita il tasto salva in fase di aggiornamento
        $("#btnRemove").prop('disabled', !($.inArray('D', grant) > 0));//abilita il tasto salva in fase di aggironamento

    }

    function checkLoadedMenu() {
        if ($('.page-sidebar-menu').children().length > 0) { //if the container is visible on the page
            setButton();
        } else {
            setTimeout(checkLoadedMenu, 50); //wait 50 ms, then try again
        }
    }

    $(document).ready(function () {
        checkLoadedMenu();

        $("#btnSave").on('click', function () {
            $('#loader-wrapper').show();
            saveRuolo();
        });

        $("#btnAnnulla").on('click', function () {
            $('.alert-danger.ruolo').hide();
            $('#btnRemove').hide();
            $.resetForm('frmRuolo');

        });

        $('#frmRuolo').validate({
            ignore: "",
            errorClass: 'help-block help-block-error', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            //rules: {
            //    PswNewConfirm: {
            //        equalTo: "#PswNew"
            //    },
            //},
            //messages:{
            //    PswNewConfirm: {
            //        required:"Le password non corrispondono"
            //    },
            //},
            invalidHandler: function (event, validator) { //display error alert on form submit
                $('.alert-danger.ruolo').show();
                $('#loader-wrapper').hide();
            },
            errorPlacement: function (error, element) { // render error placement for each input type
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass('fa-check').addClass("fa-warning");
                icon.attr("data-original-title", error.text()).tooltip({ 'container': 'body' });
                var tpane = $(element).closest('.tab-pane').attr('id');
                $("a[href=#" + tpane + "]").pulsate({color:"#FAACAC"});
            },
            highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },
            success: function (label, element) {
                $(element).closest('.form-group').removeClass('has-error');
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass("fa-warning");//.addClass("fa-check");
                var tpane = $(element).closest('.tab-pane').attr('id');
                $("a[href=#" + tpane + "]").pulsate("destroy");
            },
            submitHandler: function (form) {
                $('.alert-danger.ruolo').hide();
            }
        });

    });
</script>"

【讨论】：