4

JavaScript ハンドラー (jQuery を使用) を介して ASP.NET MVC 3 サーバーにフォームを送信し、別の JavaScript ハンドラーでサーバーからエラー応答を受け取ります。私が疑問に思っているのは、フォームの送信に起因するエラー メッセージをビューに表示する方法です。標準の ASP.NET MVC 3 イディオム/コンストラクトを使用することをお勧めします。

編集

JavaScript エラー ハンドラー関数で受信した、サーバーからのエラー メッセージを表示したいことに注意してください。

4

5 に答える 5

2

純粋な MVC の方法を使用できます: http://www.asp.net/mvc/tutorials/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript

「クライアント側検証の有効化」まで下にスクロールします。

ビューには、次のようなコードがあります。

@Html.TextBoxFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)

アップデート

OP はカスタム メッセージングに関心があるようです。この種のカスタム メッセージング用の MVC コンストラクトはありません。最善の策は、独自のメッセージング エリアを作成し、コールバック関数でそこにメッセージを書き込むことです。複雑すぎてはいけません！

$.ajax(..., function(data) {
    $('#errors').append('<p>' + data + '</p>');
});
于 2011-09-02T14:27:39.843 に答える
2

MVC ソリューション テンプレートに付属する jQuery 検証を使用していると仮定すると、javascript ハンドラーでバリデーターにエラーを追加する必要があります。showErrors validator にはメソッドがあります。

クライアント側:

var formSubmitCallback = function(result){
  var validator = $(this).data('validator');
  if(!result.IsValid && validator)
      validator.showErrors(result.Errors); // uses jquery validator to highlight the fields
  // process the rest of the result here
  // if result.Action == ActionTypes.Redirect
  //     location.href = result.Url
  // etc
}

ここで、サーバーからの結果オブジェクトを標準化して、 でフォーマットされた json オブジェクトを返す必要がありました{ "FieleName": "Error Message" }。それを達成するために、サーバー側にいくつかControllerの拡張機能を作成しました。ViewModel

サーバー側:

public ActionResult SomeAction(Model someModel){
    if(ModelState.IsValid)
        // save
    else
        // other stuff

    // always return this.AjaxSubmit.
    // Extension function will add Errors, and IsValid to the response data
    return this.AjaxSubmit(new ClientAction{
        Action = ClientActionType.Redirect,
        Url = "/Some/Redirect/Route"
    });
}

注：これを振り返ってみると、それを機能させるために少しカスタムコードを書きました。最終的にクライアントとサーバーのコードを github のサンプルと共に追加します。しかし、これは一般的な考え方です。

必要なサーバー クラスと拡張機能は次のとおりです。

// GetAllErrors is a ModelState extension to format Model errors for Json response
public static Dictionary<string, string> GetAllErrors(this ModelStateDictionary modelState)
{
    var query = (from state in modelState
                 where state.Value.Errors.Count > 0
                 group state by state.Key into g
                 select new
                 {
                     FieldName = g.Key,
                     FieldErrors = g.Select(prop => prop.Value.Errors).First().Select(prop => prop.ErrorMessage).ToList()
                 });

    return query.ToDictionary(k => k.FieldName, v => string.Join("<br/>", v.FieldErrors));
}

// Controller result extension to return from actions
public static JsonResult AjaxSubmit(this Controller controller, ClientAction action)
{
    if (controller == null) return new JsonResult { Data = action };

    var result = new AjaxSubmitResult
    {
        Errors = controller.ModelState.GetAllErrors(),
        IsValid = controller.ModelState.IsValid,
        ClientAction = action
    };

    return new JsonResult{ Data = result };
}

// Action to perform on the client after a successful, valid response
public class ClientAction
{
    public ClientActionType Action { get; set; }
    public string Url { get; set; }
    public string Function { get; set; }
    public object Data { get; set; }
    public Dictionary<string, string> Updatables { get; set; }
}

public enum ClientActionType
{
    Redirect,
    Ajax,
    Function,
    Modal,
    Message,
    FunctionAndMessage
}
于 2011-09-02T14:27:53.900 に答える
1

サーバーは、標準化されたメッセージで応答する必要があります。_Layoutそのメッセージには、ページの一部である空の div に表示できる完全なエラー メッセージ (HTML) が含まれる場合があります。

function(response) {
  if(response.Status === "error") {
    $("#errorContainer").html(response.ErrorHtml);
  } else {
    // the success handler
  }
}

利点は、サーバー上でかなり標準化されたエラー メッセージのレンダリングを実行できることです。もちろん、これらを js ポップアップ / モーダル ダイアログなどとして表示することもできます。

エラー メッセージの書式設定は、非常に汎用的に適用できる CSS を介して行われ#errorContainer、その内容に適用されます。

サーバーからプレーンテキストで応答し、JS を介してクライアントに html を追加する方がクリーンであると主張したいかもしれません。それも可能であり、おそらく「実際の」REST API の方がうまく機能します。ただし、フォーマットされたエラー メッセージ (リンク付きなど) を使用することはできません。

于 2011-09-02T14:37:50.673 に答える
1

エラーメッセージを追加するために、これについて過去に同様のことを答えました。

JS および動的 DOM 要素を使用した MVC 検証の概要操作

サーバーからエラーが返されるようにしたいので、既に知られているjavascriptメソッドであると想定しているため、追加するだけです


var ul = $("#validationSummary ul"); ul.append("<li>Custom Error Message</li>")
于 2011-09-02T16:31:58.190 に答える
0

私がそれを行う方法は次のとおりです。

基本コントローラー クラスを作成し、OnException ハンドラーをオーバーライドする

public abstract class MyBaseController : Controller
{
    protected override void OnException(ExceptionContext filterContext)
    {
        if (filterContext.RequestContext.HttpContext.Request.IsAjaxRequest())
        {
            // add my own status code
            Response.StatusCode = 550;
            // write the error message to the response
            Response.Write(filterContext.Exception.Message);
            // mark the exception as handled
            filterContext.ExceptionHandled = true;
        }

        base.OnException(filterContext);
    }
}

ドキュメントの準備ができたクライアント側で、ajaxエラーのグローバルハンドラーを登録します

$(document).ready(function(){
$.ajaxSetup({
    error:function(x,e){
        if(x.status==0){
           alert('You are offline!!\n Please Check Your Network.');
        }else if(x.status==404){
           alert('Requested URL not found.');
        }else if(x.status==550){ // <----- THIS IS MY CUSTOM ERROR CODE --------
           alert(x.responseText);
        }else if(x.status==500){
           alert('Internel Server Error.');
        }else if(e=='parsererror'){
           alert('Error.\nParsing JSON Request failed.');
        }else if(e=='timeout'){
           alert('Request Time out.');
        }else {
           alert('Unknow Error.\n'+x.responseText);
        }
    }
});
});

もちろん、ニーズに合わせてこのメソッドを微調整することもできます。お役に立てれば。

于 2011-09-03T17:43:32.337 に答える