web-dev-qa-db-ja.com

ASP.NET MVC 3 RazorでAjax.BeginFormを使用する

控えめな検証とAjaxが存在するAsp.net MVC 3内でAjax.BeginFormを使用するチュートリアルまたはコード例はありますか？

これはMVC 3のためのとらえどころのないトピックです、そして私は私のフォームを適切に動作させることができないようです。これはAjax送信を行いますが、検証エラーを無視します。

asp.net-mvcasp.net-mvc-3
261
JBeckton

例：

モデル：

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }
}

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("Thanks", "text/html");
    }
}

見る：

@model AppName.Models.MyViewModel

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

<div id="result"></div>

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}

これが（私の観点から見て）より良い例です。

見る：

@model AppName.Models.MyViewModel

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

<div id="result"></div>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}

index.js：

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

これは jQueryフォームプラグイン でさらに拡張できます。

427
Darin Dimitrov

私はすべての答えが重要なポイントを逃したと思います。

Ajaxフォームを使用して自分自身を更新する必要がある場合（そしてフォームの外部の別のdivではない場合）、それを含むdivOUTSIDEの形式。例えば：

 <div id="target">
 @using (Ajax.BeginForm("MyAction", "MyController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "target"
            }))
 {
      <!-- whatever -->
 }
 </div>

それ以外の場合は、結果が新しいページに表示される@Davidのようになります。

53
Dror

私は最終的にDarinの解決策を働かせましたが、最初にいくつかの間違いをしました。結果は新しいページに投稿されているという（Darinの解決策の下のコメントで）Davidに似た問題をもたらしました。

メソッドが返された後にフォームで何かをしなければならなかったので、後で使用するためにそれを保存しました。

var form = $(this);

ただし、この変数には、ajax呼び出しで使用される "action"または "method"プロパティがありませんでした。

$(document).on("submit", "form", function (event) {
    var form = $(this);

    if (form.valid()) {
        $.ajax({
            url: form.action, // Not available to 'form' variable
            type: form.method,  // Not available to 'form' variable
            data: form.serialize(),
            success: function (html) {
                // Do something with the returned html.
            }
        });
    }

    event.preventDefault();
});

代わりに、 "this"変数を使う必要があります。

$.ajax({
    url: this.action, 
    type: this.method,
    data: $(this).serialize(),
    success: function (html) {
        // Do something with the returned html.
    }
});
15
Jason

Darin Dimitrovの解決策は、1つの例外を除いて私のために働きました。部分的なビューを（意図的な）検証エラーとともに送信すると、ダイアログに重複フォームが返されてしまいました。

enter image description here

これを修正するために、Html.BeginFormをdivでラップする必要がありました。

<div id="myForm">
    @using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        //form contents
    }
</div>

フォームが送信されたとき、私はsuccess関数のdivをクリアして検証されたフォームを出力しました：

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#myForm').html('');
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});
5
steveareeno

データ検証が実行されていない場合、またはコンテンツが常に新しいウィンドウに返される場合は、次の3行がビューの上部にあることを確認してください。

<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 src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
4
cheny

例

//モデル内

public class MyModel
{  
   [Required]
    public string Name{ get; set; }
}

// PartailView内//PartailView.cshtml内

@model MyModel

<div>
    <div>
      @Html.LabelFor(model=>model.Name)
    </div>
    <div>
        @Html.EditorFor(model=>model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

Index.cshtmlビュー内

@model MyModel
<div id="targetId">
    @{Html.RenderPartial("PartialView",Model)}
</div>

@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
     <div>
        <input type="submit" value="Add Unit" />
    </div>
}

コントローラー内

public ActionResult Index()
{
  return View(new MyModel());
}


public string AddName(MyModel model)
{
   string HtmlString = RenderPartialViewToString("PartailView",model);
   return HtmlString;
}


protected string RenderPartialViewToString(string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

viewNameとModelをRenderPartialViewToStringメソッドに渡す必要があります。モデルに適用した検証付きのビューに戻り、Index.cshtmlの "targetId" divにコンテンツを追加します。このように部分ビューのRenderHtmlをキャッチすることで検証を適用できます。

3
Shivkumar

AjaxフォームはJavascriptを使って非同期に動作します。そのため、スクリプトファイルを実行用にロードする必要があります。パフォーマンスの低下はわずかですが、実行はポストバックなしで行われます。

HTMLフォームとAjaxフォームの両方の動作の違いを理解する必要があります。

Ajax：

  1. RedirectAction（）を実行しても、フォームをリダイレクトしません。

  2. 保存、更新、および修正操作を非同期的に実行します。

HTML：

  1. フォームをリダイレクトします。

  2. 同期と非同期の両方で操作を実行します。

下のリンクでPOCとの違いを説明しました。 リンク

3
user1080810

Ajax.BeginFormを追加する前。下記のスクリプトを記載の順序でプロジェクトに追加してください。

  1. jquery-1.7.1.min.js
  2. jquery.unobtrusive-ajax.min.js

Ajax操作を実行するには、これら2つだけで十分です。

1
Balaji Dinakaran