Question

我有一个显示数据的表格。每行表都有“编辑”按钮。单击编辑按钮时，将显示一个jquery对话框，其中包含用于编辑用户信息的表单以及保存和取消按钮。表单只是部分视图按钮是部分视图的一部分。

<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');
    }
});

点击编辑按钮我得到了正确值的对话框。当没有验证错误（服务器端验证）时，保存按钮工作正常，但一旦出现验证错误，部分页面将在新页面中打开。取消工作正常。我的部分观点

@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>
}

我的控制器actionResult是

[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();
    }

我认为对话框中的任何按钮点击方法都应该是ajax-ified和json-ized。所以我尝试了以下

<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

问题是在$（＆＃34;＃SubmitButton＆＃34;）上添加$ .ajax调用之后。单击（function（）按钮只是在点击时执行任何操作。我希望它在没有服务器时保存并发生客户端验证错误，如果有错误消息应显示在对话框中。

同样在我的网络配置中，我有适当的验证设置

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

由于

Answer 1

您应该尝试不引人注意的客户端验证示例

<强> 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;
});

查看

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

<强>模型

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

部分视图

@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" /> }

<强>参考

<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>

Answer 2

嗨，如果没有写任何Jscript我们可以内置不引人注目的功能。如下。

<强>模型

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

部分视图

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

单击“保存”按钮时，Jquery对话框部分视图服务器端验证

2 个答案: