1

MVC 4 と Entity Framework を使用して Web アプリを開発しています。私は人を含むテーブルを持っています。モーダル ウィンドウを呼び出す [編集] ボタンもあり、そのおかげで、ユーザーは人物を編集できます。そのために部分ビューを使用しています。

私の質問は: 私のアクションではビューを返しますが、[保存] ボタンをクリックするとモーダル ウィンドウが消え、テーブルが更新されるようにしたいだけです。何か案が？

アクション ：

[HttpGet]
public ActionResult EditPerson(long id)
{
    var person = db.Persons.Single(p => p.Id_Person == id);

    ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);

    return PartialView("_EditPerson", person);
}

[HttpPost]
public ActionResult EditPerson(Person person)
{

    ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);

    if (ModelState.IsValid)
    {
        ModelStateDictionary errorDictionary = Validator.isValid(person);

        if (errorDictionary.Count > 0)
        {
            ModelState.Merge(errorDictionary);
            return View(person);
        }

        db.Persons.Attach(person);
        db.ObjectStateManager.ChangeObjectState(person, EntityState.Modified);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(person);
}

部分的なビュー (実際には、モーダル ウィンドウ) :

@model BuSIMaterial.Models.Person

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Edit</h3>
</div>
<div>

@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
                    new AjaxOptions
                    {
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "POST",
                        UpdateTargetId = "table"
                    }))
{

    @Html.ValidationSummary()
    @Html.AntiForgeryToken()

    @Html.HiddenFor(model => model.Id_Person)

    <div class="modal-body">
       <div class="editor-label">
            First name :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 })
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>
        <div class="editor-label">
            Last name :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.LastName, new { maxlength = 50 })
            @Html.ValidationMessageFor(model => model.LastName)
        </div>
        <div class="editor-label">
            National number :
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NumNat, new { maxlength = 11 })
            @Html.ValidationMessageFor(model => model.NumNat)
        </div>
        <div class="editor-label">
            Start date :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker", @Value = Model.StartDate.ToString("yyyy/MM/dd") })
            @Html.ValidationMessageFor(model => model.StartDate)
        </div>
        <div class="editor-label">
            End date :
        </div>
        <div class="editor-field">
            @if (Model.EndDate.HasValue)
            {
                @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker", @Value = Model.EndDate.Value.ToString("yyyy/MM/dd") })
                @Html.ValidationMessageFor(model => model.EndDate)
            }
            else
            {
                @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
                @Html.ValidationMessageFor(model => model.EndDate)
            }
        </div>
        <div class="editor-label">
            Distance House - Work (km) :
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.HouseToWorkKilometers)
            @Html.ValidationMessageFor(model => model.HouseToWorkKilometers)
        </div>
        <div class="editor-label">
            Category :
        </div>
        <div class="editor-field">
            @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
            @Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) <a href="../ProductPackageCategory/Create">
                Add a new category?</a>
        </div>
        <div class="editor-label">
            Upgrade? :
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Upgrade)
            @Html.ValidationMessageFor(model => model.Upgrade)
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-inverse" type="submit">Save</button>
    </div>
}

</div>

そして、モーダルを呼び出す私のスクリプト:

$(document).ready(function () {

    $('.edit-person').click(function () {
           var id = $(this).data("id");
           var url = '/Person/EditPerson/'+id;
           $.get(url, function(data) {

               $('#edit-person-container').html(data);
               $('#edit-person').modal('show');

           });
    });

});
4

3 に答える 3

2

私のアクションでは、ビューを返しますが、[保存] ボタンをクリックするとモーダル ウィンドウが消え、テーブルが更新されるようにしたいだけです。何か案が？

このコントローラ アクションからビューを返す代わりに、テーブルを含む部分ビューを返すことができます。そして、AJAX 呼び出しの成功コールバックで、対応するコンテナーを更新するだけです。

于 2013-04-15T12:15:50.330 に答える
2

POST アクションでは、次を返すことができます。

return Json(new { error = false, message = "Person edited." });

Ajax.BeginForm の AjaxOptions で、これを追加します。

OnSuccess = "Modal.onAjaxSuccess"

次に、script.js で次のように記述します。

function onAjaxSuccess(data, status, xhr) {
    if (data.error) {
        $.notify({
            type: "error",
            text: data.message
        });
    }
    else {
        $('.modal').modal('hide');
    }
}

これでウィンドウが閉じますが、Bootstrap モーダルに関連する暗い画面を消すことができません。また、AJAX を使用して DIV を更新することもできません。

これを行う方法についてまだ疑問がある場合は、次のようにします。

人のリストを返す GET アクションがあります。

[HttpGet]
public ActionResult People()
{
    return PartialView("_ListOfPeoplePartial");
}

次に、新しい人を作成できるようにするモーダルで保存 (つまり btn-save-new-person) をクリックしたときに起動する JS 関数を用意します。

$(function () {
    $(document.body).on('click', '#btn-save-new-person', function (e) {
        $('#create-new-person-modal').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        var url = "/Home/People";
        $.get(url, function (data){
            $('#list-of-people').html(data);
        });
    });
});
于 2013-04-15T12:27:00.103 に答える
2

いくつかの変更を加える必要がありますが、この場合に行うことは次のとおりです

1) EditPerson post メソッドを actionresult から JsonResult に変更する

[HttpPost]
public JsonResult EditPerson(Person person) 
{

    // code here to save person

    bool success = true; // somehow determine if the save was successful
    string msg = ""; // error message is needed?
    return JsonResult(new {success,msg, person});
}

2) モーダルを閉じるための JavaScript 関数を追加します。

function closeModal(response){

    // the response is the Json Result sent back from the action

    if (response.success === true){
        // actually got a true response back
    }
    $('#edit-person').modal('show'); // or similar code
}

3）次に、Ajax呼び出しを更新して、成功したときにコードを実行します

@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
                new AjaxOptions
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "POST",
                    UpdateTargetId = "table",
                    OnSuccess = "closeModal(response);" // or javascript code to close the modal, you can also 
                }))
{ ...

いくつかのヒント

私は MVC ajax ヘルパーが好きではありません。それらは肥大化していると思いますし、他のフレームワークの方が優れていると感じています。それが私の意見です。しかし、それぞれに。jQuery ajax ライブラリを自分で使用したいと思います。使いやすいと思いますが、それはあなた次第です。

OnSuccess は、成功を保存しない「サーバーの成功」を意味します。ので注意してください。

免責事項: 疲れた状態でこれを書いたので、100% 問題があるとは限りません。

幸運を

于 2013-04-15T12:29:08.723 に答える