6

私の言語で申し訳ありません-英語で私は読むことができるだけです:)

私は次のようなものをasp.netmvcでやりたいです：
1。ユーザーにページを表示します
2.モーダルダイアログ（jquery-ui）を開き、部分ビューを表示します
3.ユーザーを検証しますクライアント側で入力データ
4.問題がない場合は、サーバー
5aで入力データを検証します。
問題がなければ、ページ5bをリロードします。エラーが発生した場合は、ユーザー
6に表示します。ユーザーはボタンを押したままいつでもダイアログを閉じることができます。 Firefoxでサーバーの検証を行い、データを検証するために呼び出されたページにリダイレクトされたときに閉じるボタン（dialog（'close'））をクリックすると、

幅5aおよび6に問題があります。

ダイアログボックスのヘッダーで[x]をクリックすると、[OK]が閉じます。オペラでも同じ状況です。

Firefoxで追加して、適切なデータを挿入し、サーバーパスダイアログボックスで検証が閉じない場合（Operaで機能します）。
私はMVCの経験があまりなく、正しく実行できるかどうかわかりません。私のコードを見て、それが間違っているかどうか教えてください。そうすべきではありません。

コントローラーコード：

public ActionResult Create()<br/>
{
    return PartialView(new UserDTO());
}

[HttpPost]
public ActionResult Create(UserDTO model)
{
    if(model.Email != "fromasz@gmail.com")
    {
     ModelState.AddModelError("Email", "wrong email");
     return PartialView(model);
    }
 return new EmptyResult();
}

//インデックスページのJavaScript

<script type="text/javascript">
var dialog;

    $(document).ready(function () {
        dialog = $("#divInsert").dialog({
            title: "Insert",
            resizable: false,
            modal: true,
            autoOpen: false
        });

        $("#aShowInsert").click(function () {
            $("#divInsert").empty();
            $("#divInsert").load("Home/Create", function () {
                $("#inputCloseModal").click(function () {
                    dialog.dialog('close');
                    return false;
                });
            });

            dialog.dialog("open");
            return false;
        });
    });
</script>



<div id="divInsert" /> - its a dive where i loads form.
<a id="aShowInsert">add element</a> - link thats open dialog.

jsファイルをjquery-1.6.1.js、jquery-ui-1.8.13.js、jquery.validate.js、jquery.validate.unobtrusive.js

の順にインポートします。フォームビューは次のようになります。

// import js..
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Surname)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Surname)
    @Html.ValidationMessageFor(model => model.Surname)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>
<p>
    <input type="submit" value="Create" id="inputSubmit" />
    <input type="submit" value="Close" id="inputCloseModal" />
</p>
}

<script type="text/javascript">
$("#inputSubmit").click(function (e) {
    e.preventDefault();
    var form = $("#divInsert form");
    form.validate();

    if (form.valid()) {
        $.ajax({
            url: "/Home/Create",
            data: form.serialize(),
            type: "POST",
            success: function (data) {
                if (data === "") {
                    location.reload();
                }
                else {
                    $("#divInsert").html(data);

                    $.validator.unobtrusive.parse($("#divInsert"));
                }
            }
        });
    }

    return false;
});

4

1 に答える 1

6

ふふ。
これが私がプログラミングが好きな理由です。
解決策は非常に単純で、他の人がそのバグを検索するのに1日を費やすのを避けるために、ここに投稿します。
私のソリューションでは、ダイアログボックスのコンテンツをリロードするときにボタンを閉じる機能をアタッチするのを忘れています。これが、サーバー検証がこのアクション（ホーム/作成）にリダイレクトした後に閉じるボタンをクリックする理由です。

$("#divInsert").html(data);
$.validator.unobtrusive.parse($("#divInsert"));

このコードの後に​​、このコードとその動作を追加します。

$("#inputCloseModal").click(function () {
    dialog.dialog('close');
    return false;
});
于 2011-06-13T08:13:18.627 に答える