MVC3客户端验证 [英] MVC3 Client Side Validation

问题描述

我有一个视图EmployeeEdit

此视图使用局部视图_Roles

部分视图使用以下代码创建：

I have a view "EmployeeEdit"
This view uses a partial view "_Roles"
The partial view is created with the following code:

@{Html.RenderAction("Roles", ViewData.Model);}

一切正常，不是我遇到的问题。



我在_Layout中有一点java给星号放了一个星号带有数据注释的字段的权限[必需]。请参阅RolesViewModel。

再次，这样可以正常工作。



我遇到的问题是当执行HandleDepartmentChange java代码时。 />
RolesViewModel中的字段仍然在客户端验证，但是我丢失了字段旁边的星号，我也丢失了验证消息，例如

This all works fine and is not the issue I'm having.

I have a bit of java in _Layout that places an asterisk to the right of fields with the data annotation [Required]. See the RolesViewModel.
Again, this works fine.

The issue I have is that when the HandleDepartmentChange java code is executed.
The fields from the RolesViewModel are still validated on the client side, but I lose the asterisk next to the fields and I also lose the Validation Message, e.g.

@Html.ValidationMessageFor(o => o.SelectedRoleId).

任何人都有关于我如何的建议可以在执行HandleDepartmentChange java代码后显示验证消息吗？



以下是代码的相关部分：

_Layout.cshtml < br $> b $ b

Anyone have suggestions as to how I can get Validation Messages to appear after the HandleDepartmentChange java code is executed?

Here is the relevent bits of code:
_Layout.cshtml

<script type="text/javascript">
    // Client side validation for the [Required] data annotation.
        $(function () {
            $('[data-val-required]').after('<span class="required-indicator"> *</span>');
        });
</script>

_Roles.cshtml

_Roles.cshtml

@model HR_Portal.ViewModels.RolesViewModel 

<fieldset>
    <span class="SpanTextboxEdit">
        @Html.Label("roleName", "Role Name")
        <br />
        @Html.DropDownListFor(m => m.SelectedRoleId, new SelectList(Model.Roles,"RoleId","RoleName", @Model.SelectedRoleId)
                     , "--- Select a Role ---", new { @Class = "EditField", title = "Select the Role", id = "roleDropDown", @onchange = "HandleRoleChange(this);" })
        @Html.ValidationMessageFor(o => o.SelectedRoleId)
    </span>

    <span class="SpanTextboxEdit">
        @Html.LabelFor(o => o.EmployeeTitle)
        <br />
        @Html.EditorFor(o => @Model.EmployeeTitle, new { @Class = "EditField", style = "width: 300px", title = "Enter the Employee's Title" }) 
        @Html.ValidationMessageFor(o => o.EmployeeTitle)
    </span>
</fieldset>

EmployeeEdit.cshtml

EmployeeEdit.cshtml

@model HR_Portal.ViewModels.EmployeeViewModel

@using (Html.BeginForm("SaveEmployeeAction", "Employee", FormMethod.Post, new { id = "employeeEditForm", Model }))
{
	...
	<fieldset>
		<span class="SpanTextboxEdit">
            @Html.Label("department", "Department")
            <br />
            @Html.DropDownListFor(m => m.DepartmentFolderId, new SelectList(Model.Departments, "EFolderId", "DepartmentName", @Model.DepartmentFolderId)
                , "--- Select a Department ---", new { @Class = "EditField", title = "Select the Department Name", @onchange="HandleDepartmentChange();"})
            @Html.ValidationMessageFor(o => o.DepartmentFolderId)
         </span>

         <span class="SpanTextboxEdit" id = "spanRoles">
            @{Html.RenderAction("Roles", ViewData.Model);}
         </span>
    </fieldset>
}

<script type="text/javascript">
    function HandleDepartmentChange() {
        var departmentFolderidId = $('#DepartmentFolderId').val();
        var title = $('#EmployeeTitle').val();
        $.get('@Url.Action("RefreshRoles")', { id: departmentFolderidId, title: title }, function (data) {
            $('#spanRoles').html(data);
            $('#spanRoles').fadeIn('slow');
        });
    }
</script>

EmployeeController

EmployeeController

    public PartialViewResult RefreshRoles(String id, String title)
    {
        var model = new RolesViewModel();
        model.Roles = GetRoles(id);
        return PartialView("_Roles", model);

    }

    public PartialViewResult Roles(EmployeeViewModel viewModel)
    {
        var model = new RolesViewModel();
        String roleId = viewModel.RoleId.ToString();
        model.Roles = GetRoles(id);
        model.SelectedRoleId = viewModel.RoleId.HasValue ? viewModel.RoleId.Value : Guid.Empty;

        return PartialView("_Roles", model);
    }


public class RolesViewModel
{
    [Required]
    public Guid SelectedRoleId { get; set; }
    public IList<Roles> Roles { get; set; }

    [Display(Name = "Role")]
    public String RoleName { get; set; }


    [Required]
    [Display(Name = "Title")]
    public String EmployeeTitle { get; set; }
}

推荐答案

（function（）{

(function () {

（'[data-val-required]'）after（'< span class = required-indicator > * < / span > '）;
}）;
< / script >

('[data-val-required]').after('<span class="required-indicator"> *</span>'); }); </script>

_Roles.cshtml

_Roles.cshtml

@model HR_Portal.ViewModels.RolesViewModel 

<fieldset>
    <span class="SpanTextboxEdit">
        @Html.Label("roleName", "Role Name")
        <br />
        @Html.DropDownListFor(m => m.SelectedRoleId, new SelectList(Model.Roles,"RoleId","RoleName", @Model.SelectedRoleId)
                     , "--- Select a Role ---", new { @Class = "EditField", title = "Select the Role", id = "roleDropDown", @onchange = "HandleRoleChange(this);" })
        @Html.ValidationMessageFor(o => o.SelectedRoleId)
    </span>

    <span class="SpanTextboxEdit">
        @Html.LabelFor(o => o.EmployeeTitle)
        <br />
        @Html.EditorFor(o => @Model.EmployeeTitle, new { @Class = "EditField", style = "width: 300px", title = "Enter the Employee's Title" }) 
        @Html.ValidationMessageFor(o => o.EmployeeTitle)
    </span>
</fieldset>

EmployeeEdit.cshtml

EmployeeEdit.cshtml

@model HR_Portal.ViewModels.EmployeeViewModel

@using (Html.BeginForm("SaveEmployeeAction", "Employee", FormMethod.Post, new { id = "employeeEditForm", Model }))
{
	...
	<fieldset>
		<span class="SpanTextboxEdit">
            @Html.Label("department", "Department")
            <br />
            @Html.DropDownListFor(m => m.DepartmentFolderId, new SelectList(Model.Departments, "EFolderId", "DepartmentName", @Model.DepartmentFolderId)
                , "--- Select a Department ---", new { @Class = "EditField", title = "Select the Department Name", @onchange="HandleDepartmentChange();"})
            @Html.ValidationMessageFor(o => o.DepartmentFolderId)
         </span>

         <span class="SpanTextboxEdit" id = "spanRoles">
            @{Html.RenderAction("Roles", ViewData.Model);}
         </span>
    </fieldset>
}

<script type="text/javascript">
    function HandleDepartmentChange() {
        var departmentFolderidId =

（'＃DepartmentFolderId'）。val（）;
var title =

('#DepartmentFolderId').val(); var title =

这篇关于MVC3客户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！