0

下記のようにMVC3にエリアがあります。

ここに画像の説明を入力してください

モデル

public class AdminModule
{
    [Display(Name = "MyName")]
    [Required(ErrorMessage = "MyName is missing")]
    public String MyName { get; set; }
}

次のコードの部分ビューがあります。

@model _1.Areas.Admin.Models.AdminModule
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <p id="getDateTimeString">
    </p>
    <input type="submit" value="Click here" id="btn" />
}

意見

@model _1.Areas.Admin.Models.AdminModule
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutPage1.cshtml";
}
<h2>
    Index</h2>
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="/scripts/jquery.unobtrusive-ajax.js">
</script>
<div id="myForm">
    @Html.Partial("_PartialPage1", Model)
</div>

レイアウト

<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

コントローラのアクション

[HttpPost]
public ActionResult Index(AdminModule model)
{
    return PartialView(model);
}
[HttpGet]
public ActionResult Index()
{
    AdminModule model = new AdminModule();
    model.MyName = "My Name";
    return View(model);
}

錯乱

初めて提出するとき。

以下のような出力が得られます

ここに画像の説明を入力してください

とフォームはこのように表示されます。質問は-なぜインデックスワードが2回来るのですか？

ここに画像の説明を入力してください

2回目にクリックすると、フォームの外観は同じままで、出力は次のようになります。

質問-Jqueryが何度も登場するのはなぜですか？

ここに画像の説明を入力してください

4

2 に答える 2

1

Ajax.BeginForm通常のフォームの代わりに使用できます。ただし、最初に、AJAX呼び出しの後に更新するページのセクションを決定する必要があります。

次のシナリオを考えてみましょう。AJAX呼び出しが成功した場合、DOMの一部を更新して結果を出し、AJAXが失敗した場合は、フォームを更新して、代わりにエラーメッセージを表示します。

これを実装するには、フォームをパーシャル（_MyForm.cshtml）内に配置することから始めます。

@model _1.Models.HomeModels
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <input type="submit" value="Click here" id="btn" />
}

@if (Model.SomeResultProperty != null)
{
    <div>@Model.SomeResultProperty</div>
}

次に、メインビューでこの部分を参照することができます。

@model _1.Models.HomeModels
<div id="myForm">
    @Html.Partial("_MyForm", Model)
</div>

次のステップは、AJAX呼び出しを処理するコントローラーアクションを更新することです。

[HttpPost]
public ActionResult Index(HomeModels model)
{
    if (ModelState.IsValid)
    {
        // validation succeeded => we could set the result property
        // on the model to be displayed:
        model.SomeResultProperty = "this is the result";
    }
    return PartialView("_MyForm", model);
}

最後に、ヘルパーが機能jquery.unobtrusive-ajax.jsするために、ページにスクリプトを含める必要があります。Ajax.BeginForm

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>
于 2013-02-04T20:27:07.480 に答える
0

代わりにAjax.BeginFormを使用してください。

ページで検証スクリプトを参照しましたか？

于 2013-02-04T18:22:22.947 に答える