mvc3 - отправка формы ajax и проверка на стороне сервера - PullRequest
Новая
       10

mvc3 - отправка формы ajax и проверка на стороне сервера

4 голосов
/ 12 января 2012

Я уверен, что об этом уже спрашивали, но я пробовал все приведенные решения, но ни одно из данных решений не решает мою проблему. Возможно, я неправильно это реализую.

Я использую MVC3, бритву, jQuery.

У меня есть новая форма регистрации пользователя. После успешной регистрации я хочу отобразить сообщение об успешном завершении (отличается по типу регистрации) в диалоговом окне.

Если есть ошибка с ModelState, значит ModelState.IsValid == false, я хочу отобразить ошибки в ValidationSummary.

Посмотреть 

function OnBegin () { alert('begin'); return $('form').validate().form(); }
function OnSuccess () { alert('success'); DisplaySucess()}
function OnFailure () { alert('failure'); }
function DisplaySuccess() {
    var typeOfRegistration = $('input:radio[name=RegistrationType]:checked').val();
    var msg;
    if (typeOfRegistration == 0) {
        msg = "You are successfully enrolled for Algebra classes.";
    }
    if (typeOfRegistration == 1) {
        msg = "You are registered with your email address. Someone would contact you with an email.";
    }
    if (typeOfRegistration == 2) {
        msg = "Thank you for filling up this form. One welcome packet would be delivered with in next 15 days";
    }

    msg = msg.replace(/\n/g, '<br />');
    $('#dialog').html(msg);
    $('#dialog').dialog('open');
}


@model Models.RegistrationModel
@using (Ajax.BeginForm("NewRegistration", "Account", new AjaxOptions() { OnBegin="OnBegin", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))
{ 
  @Html.ValidationSummary()
    <div>
    Register<br />
    @Html.RadioButton("RegistrationType ", "0", true) New Algebra class<br />
    @Html.RadioButton("RegistrationType ", "1") New user registration by email<br />
    @Html.RadioButton("RegistrationType ", "2") New user registration by mailing address<br/>
   ..some more types
</div>
<div>
    …here I display/hide controls based on Registration type selected.
        <div>
    @Html.LabelFor("UserName")
    @Html.TextBox("UserName")</div>
}

Контроллер 

public ActionResult NewRegistration(RegistrationModel model)
{

         if (Request.IsAjaxRequest())
         {
             if (!ModelState.IsValid) { 
        //Ques: How do I display this in ValidationSummary. 
        return Json(new object[] { false, "Contains Email Address", ModelState.GetAllErrors() }); 
        }
             else { 
        if (UserNameIsTaken){ 
            //Ques: This does not show in ValidationSummary
            ModelState.AddModelError("_FORM", "This username is already taken. Please pick a different username.");
        }
       }
    }
         else if (!ModelState.IsValid) { return View(model); }

}

Модель 

public class RegistrationModel: IValidatableObject
{
[Required] //this gets displayed in ValidationSummary as Client-side validation
    public string UserName { get; set; }
    .. and all fields here
}
public IEnumerable<ValidationResult> Validate(ValidationContext context)
{
        if (!string.IsNullOrEmpty(UserName) && UserName.Contains(EmailAddress)) {
            yield return new ValidationResult("Username cannot contain email address", new[] { "UserName" });
        }
    }

Web.config имеет

UnobtrusiveJavaScriptEnabled = "true" и ClientValidationEnabled = "true"

.js файлы включены

script src = "@ Url.Content (" ~ / Scripts / jquery-1.7.1.min.js ")" type = "text / javascript">

script src = "@ Url.Content (" ~ / Scripts / jquery.validate.min.js ")" type = "text / javascript">

script src = "@ Url.Content (" ~ / Scripts / jquery.validate.unobtrusive.min.js ")" type = "text / javascript">

script src = "@ Url.Content (" ~ / Scripts / jquery.unobtrusive-ajax.min.js ")" type = "text / javascript">

Что мне здесь не хватает? Любая альтернатива? Заранее спасибо.

Ответы [ 2 ]

4 голосов
/ 17 января 2012

Я думаю, что при публикации формы через ajax вы получаете только ошибки на стороне клиента.

Ошибки на стороне сервера должны быть возвращены через Json, а затем «вставлены» в разметку через jQuery или простой javascript.

Здесь вы можете увидеть и скачать полностью рабочий пример.

0 голосов
/ 02 ноября 2012

Запишите следующие ссылки в основной файл (layout.cshtml): 

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

В файле web.config установите «false» в значение «true»: 

<appSettings>
<!--<add key="ClientValidationEnabled" value="true"/> (enable this when client-side validation is needed) -->
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Inмодель: 

public class ValidUserNameAttribue : ValidationAttribute
{
  public override bool IsValid(object value)
  {
    return (value != null && value.ToString() == "Bob");
  }
}

public class Customer
{
  [ValidUserNameAttribue(ErrorMessage = "please type user name as Bob")] /* for server side validation*/
  public string UserName { get; set; }
}

В контроллере: 

public class HomeController : Controller
{
  [HttpGet]
  public ActionResult Index()
  {
    return View(new ValidationModel());
  }

  [HttpPost]
  public ActionResult Form(ValidationModel validationModel)
  {
    return PartialView(!ModelState.IsValid ? "Partial/_Form" : "Partial/_Success", validationModel);
  }
}

Индекс просмотра: 

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

@{
    ViewBag.Title = "ajax form submit and server side validation";
}


<div id="FormContainer">
    @Html.Partial("Partial/_Form")
</div>

Форма просмотра: 

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

@using (Ajax.BeginForm("Form", new AjaxOptions() { UpdateTargetId = "FormContainer" , OnSuccess = "$.validator.unobtrusive.parse('form');" }))
{

    <p>
        @Html.ValidationMessageFor(m => m.UserName) // (Error Message)
    </p>

    <p>
        @Html.LabelFor(m => m.UserName):
        @Html.EditorFor(m => m.UserName)
    </p>

    <input type="submit" value="Submit" />
}

УспехПредставление: 

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

User name '@Model.UserName' is valid :)

Проверьте эту ссылку для проверки на стороне сервера в форме AJAX: http://www.codeproject.com/Articles/460893/Unobtrusive-AJAX-Form-Validation-in-ASP-NET-MVC

...