2

ポップアップの部分ビューを使用してすべての CRUD トランザクションを処理する MVC Web サイトを作成しています。私のアプリケーションは既にこれらの CRUD 操作を完全に処理できることに注意してください (LINQ-To-Entity)。ただし、ポップアップ フォームに問題があります。

以下は私のコードです_Add.cshtml

@model MyStore.Models.MyModels.ProductsModel

@{
    Layout = null;
}

@using (Ajax.BeginForm("_Add", "Products", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    OnSuccess = "addSuccess"
}, new { @id = "addForm" }))
{
    @Html.ValidationSummary(true)      
    <div id="add-message" class="error invisible"></div>

    <fieldset>
        <legend>Products</legend>

        @Html.HiddenFor(m => Model.ProductCode)

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>
    </fieldset>
} 

以下は私のコードですController

[HttpGet]
public ActionResult _Add(string productCode)
{
    ProductsModel model = newProductsModel();
    model.ProductCode = ProductCode ;
    return PartialView(model);
}

[HttpPost]
public JsonResult _Add(ProductsModel model)
{
    if (ModelState.IsValid)
    {
        ProductsManager prod = new ProductsManager();
        Products pa = new Products();

        pa.ProductCode = model.ProductCode;
        pa.ProductName = model.ProductName;
        pa.Price = model.Price;

        prod.AddProduct(pa);

        return Json(HelperClass.SuccessResponse(pa), JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(HelperClass.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet);
    }
}

_Add.cshtmlこれは、インターネットで見つけた Popup.js を介してレンダリングされている部分的なビューであることに注意してください。次のコードでレンダリングされます。

@Html.ActionLink("[Add Product]", "_Add", new { ProductCode = @ViewData["ProductCode"] }, new { @class = "editLink" })

これは問題なく動作します。つまり、データベースに製品を追加します。しかし、私の問題はProceedボタンをクリックしたときです。ページからこのポップアップダウンロードダイアログが表示されます。

スクリーンショット A

誰かがこれで私を助けてくれますか? 私がHttpMethod使用している(POST、PUT、GET、DELETE)ためだと思いますが、どちらを使用するのが正しいのか、そもそもそれが本当に問題なのかはよくわかりません。

どんな助けでも大歓迎です!PS。長い投稿で申し訳ありません。


編集:

これは、このプロジェクトで従ったチュートリアルです: http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/


編集:

以下は、私が使用しているjscriptコードです。基本的には、私が従ったチュートリアルと同じです。最後のメソッドの数行をコメントアウトする必要がありました。

また、私は MVC 4 を使用しています。ありがとう!

var linkObj;
$(function () {
    $(".addLink").button();

    $('#addDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        buttons: {
            "Update": function () {
                $("#add-message").html(''); //make sure there is nothing on the message before we continue                         
                $("#addForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    $(".addLink").click(function () {
        //change the title of the dialog
        linkObj = $(this);
        var dialogDiv = $('#addDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            //validation
            var $form = $("#addForm");
            // Unbind existing validation
            $form.unbind();
            $form.data("validator", null);
            // Check document for changes
            //$.validator.unobtrusive.parse(document);
            // Re add validation with changes
            //$form.validate($form.data("unobtrusiveValidation").options);
            //open dialog
            dialogDiv.dialog('open');
        });
        return false;
    });

});


function addSuccess(data) {
    if (data.Success == true) {
        //we update the table's info
        //var parent = linkObj.closest("tr");
        //parent.find(".carName").html(data.Object.Name);
        //parent.find(".carDescription").html(data.Object.Description);
        //now we can close the dialog
        $('#addDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Add Complete");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#add-message").html(data.ErrorMessage);
        $("#add-message").show();
    }
}

次の 2 行をコメントアウトしました。

$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);

それらにコメントしないと、実行時に以下のエラーが発生するためです。 ここに画像の説明を入力

これは、この問題が目立たない検証によるものであるという意見につながります。以下の Xnake によって投稿されたリンクのように、私は同じ種類の問題を抱えています。唯一の違いは、Thread Opener が Web.config ファイルで目立たない検証を無効にして問題を解決しなければならなかったことですが、私のコードは目立たない検証を使用しているため、同じことはできません。

ここで何か助けていただければ幸いです。どうもありがとうございました!

4

4 に答える 4

2

簡単に再利用可能なポップアップを実行するための規則を見つけようとしたときに、同様の問題が発生しました。 CRUD とそうでないものがあります。すべてのページに検証スクリプトを含めるのではなく、呼び出したレイアウトにセクションを追加し、scripts各ページに必要なスクリプトを追加さ​​せました (この場合、ページにフォーム要素がある場合は入力検証スクリプト)。Unobtrusive Ajax スクリプトは検証とは関係なく、既定のレイアウトに残すことを保証するのに十分な数のページで使用されているため、既定のレイアウトに残したことに注意してください。

<html>
<head></head>
</body>
    @RenderBody()
    @RenderSection("Scripts", required: false)
</body>
</html>

パーシャルの場合、同じセクションが定義されているが他の周囲の HTML がないパーシャルのみに使用する新しいレイアウトを作成しました。

@RenderBody()
@RenderSection("Scripts", required: false)

これは非常に原始的な例ですが (特にフォーム要素が表示されていないため)、アイデアは理解できます。

@model Product
@{
    Layout = "~/Views/Shared/_ModalLayout.cshtml";
}
@section Scripts
{
    <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>
}
<section>
    <header><h3>Remove Product?</h3></header>
    Are you sure you wish to remove @Model.Name?
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(x => x.ProductId)
        <input type="submit" value="Remove" />
    }
</section>
于 2012-07-19T18:35:35.790 に答える
1

私はすでに問題を解決しました!どうやら、MasterPage に次の js ファイルを含める必要がありました。お役に立てれば!

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<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>
于 2012-07-16T02:10:19.017 に答える
0

これはおそらく、JavaScript イベントが適切にバインドされていないか、結果が JS で処理されていないために発生します。

于 2012-07-13T14:42:59.020 に答える
0

これは、_Add (post) で JSON データを返すためです。ブラウザは、レンダリングする代わりにダウンロードしようとします。_Add (投稿) ではなく、ActionResult と同じ PartialView を返すようにしてください。それが役に立てば幸い。

于 2012-07-13T06:50:31.377 に答える