0

フォームを表示するajax JavaScript関数を介して呼び出されたコントローラーにactionResultメソッドがあります。この部分的なビューは、class="webPage_content_block" の div の他の部分と共に Web ページに表示されます。フィールドのいずれかが正しくない場合、部分的なビューがモデルとともに渡される場合に備えて、フォームフィールドのサーバー検証を行う必要がありますが、私の問題は ajax 関数にあります。すべてがフォームで問題ない場合、コントローラーはjsonメッセージを返し、Json（new { Response = "Success" }）を渡し、成功した場合はajax doneメソッドで、別のページにリダイレクトします。つまり、elseアラートメッセージを表示します

[HttpGet]
public ActionResult CreateNewFunctionNavigation()
  {
        return PartialView("CreateNewNavigation_Partial");
  }

[HttpPost]
public ActionResult CreateNewFunctionNavigation(CreateFunctionNavigation_SP_Map obj )
    {
        if(ModelState.IsValid)
        {
            try
            {
                 _FN_Services_a2.CreateFunctionNavigation(obj);

                 return Json(new { Response = "Success" });   
            }
            catch (DataException ex)
            {
                ModelState.AddModelError("", "Unable To Create New Function Navigation" + ex);
            }
        }
        return PartialView("CreateNewNavigation_Partial", obj);

    } //end

アヤックス

$('#NewFunctionNavigationForm').submit(function (e) {
   e.preventDefault();

  $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
    }).done(function (result) {
        $('.webPage_content_block').html(result);
    });
 });

かみそりの形

 @using (Html.BeginForm("CreateNewFunctionNavigation", "SystemCore", FormMethod.Post, new { id = "NewFunctionNavigationForm" }))
    {
            @Html.AntiForgeryToken()

            @Html.ValidationSummary(true)
     //form fields here....
<div class="form-group">
     <div class="col-md-offset-2 col-md-10">
          <input type="submit" value="Create" class="btn btn-default _formButton" />
           <input type="button" value="Cancel" class="btn btn-default _formButton" onclick="CancelPage();" />
       </div>
</div>
}
4

1 に答える 1

0

データを保存するために非同期リクエストを行っているため、成功と失敗の場合に JSON レスポンスを返すことをお勧めします。フォームが正しく入力されていない (ModelValidation が失敗した) 場合は、検証エラーを含む json データ構造を返し、UI にエラーを表示する必要があります。

[HttpPost]
public ActionResult CreateNewFunctionNavigation(CreateFunctionNavigation_SP model)
{
    if (ModelState.IsValid)
    {
       //Validation passed, Save data or do soemthing
        return Json(new { IsSuccess = true });
    }
    else
    {
        //Validation failed. Let's get the error messages

        var errors =  ModelState.Select(x => x.Value.Errors)
                    .Where(y => y.Count > 0).ToList();
        var errorList=new List<string>();
        foreach (var err in errors)
        {
            errorList.AddRange(err.Select(errItem => errItem.ErrorMessage));
        }
        return Json(new { IsSuccess=false,Errors=errorList});
    }
}

また、エラーを表示する要素を UI に追加します。

 <ul id="clientErrors"></ul>
 @using (Html.BeginForm())
 {
    //your form elements to capture user input

    <input id="btnGo" type="submit" value="Go" />
 }

フォームの投稿を処理するスクリプトは

$(function () {

    $("#btnGo").click(function (e) {
        e.preventDefault();

        var _form = $(this).closest("form");
        var _formData = _form.serialize();


        $.post(_form.attr("action"), _formData, function (res) {

            if (!res.IsSuccess) {
                var errors = "";
                $.each(res.Errors, function(i,item) {
                    errors = errors +"<li>"+ item+"</li>";
                });
                $("#clientErrors").html(errors);
            }
            else
            {
               //No errors. May be redirect ?
            }
        });      

    });

});
于 2015-04-15T14:00:09.327 に答える