2

左側にアセットのメニューリストがあるページがあります。アセットをクリックすると、右側にそのアセットを編集するためのフォームが表示されます。アセットの編集後にアセットのリストを更新して、名前の変更がメニューリストにも表示されるようにする必要があります。

これが私のページです

 </head>
    <body>
        <div id="leftHandMenu">
        <h2>assets</h2>
        @Ajax.ActionLink("Create Asset", "CreateAsset", new AjaxOptions() { UpdateTargetId = "FormContainer", InsertionMode = InsertionMode.Replace })
        @Html.Action("Assets")
        </div>
        <div id="FormContainer">
        </div>
    </body>
</html>

@ html.Action（ "Assets"）呼び出しを使用して作成されたアセットのリスト。これがアセットのリストのビューです

 @model IList<CasWeb.Models.DataContext.Asset>
 @if (Model != null && Model.Any())
 {
     <ul>
         @foreach (var asset in Model)
         {

             <li> @Ajax.ActionLink(asset.Name, "EditAsset", new { id = asset.Id }, new AjaxOptions() { UpdateTargetId = "FormContainer", InsertionMode = InsertionMode.Replace }) </li>
         }
     </ul> 
    }else
         {
             <h1> no assets</h1>
         }

これが私のアセットビューの編集です

 @using System.Collections
@model CasWeb.Models.DataContext.Asset


<script type="text/javascript">

    $(function () {

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


@using (Html.BeginForm())
    {
        @Html.ValidationSummary()

        <fieldset>

            <legend>Asset</legend>
            <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.ModelId)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(m => m.ModelId, new SelectList((IEnumerable)ViewData["AssetModels"], "Id", "Model"))
                @Html.ValidationMessageFor(model => model.ModelId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.SizeId)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(m => m.SizeId, new SelectList((IEnumerable)ViewData["AssetSizes"], "Id", "Size"))
                @Html.ValidationMessageFor(model => model.SizeId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.TypeId)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(m => m.TypeId, new SelectList((IEnumerable)ViewData["AssetTypes"], "Id", "Type"))
                @Html.ValidationMessageFor(model => model.TypeId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.DeptId)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(m => m.DeptId, new SelectList((IEnumerable)ViewData["Depts"], "Id", "Name"))
                @Html.ValidationMessageFor(model => model.DeptId)
            </div>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    }

これが私のコントローラーです

[ChildActionOnly]
public PartialViewResult Assets()
{
    var assets = _assetRepo.GetAll();
    return PartialView(assets);
}

public PartialViewResult EditAsset(Guid id)
{
    SetUpViewDataForComboBoxes();

    var asset = _assetRepo.Get(id);
    return asset == null
               ? PartialView("NotFound")
               : PartialView("EditAsset", asset);
}

[HttpPost]
public PartialViewResult EditAsset(Asset asset)
{

    if (ModelState.IsValid)
    {
        _assetRepo.Update(asset);
        return PartialView("EditAssetSuccess");
    }

    SetUpViewDataForComboBoxes();

    return PartialView("EditAsset", asset);
}

保存後にコントローラーのEditAssetpostメソッドでアセットビューを更新できるようにしたいと思います。これはよりテストしやすいためですが、私が言えることから、編集フォームjavaの正常なコールバックでこれを行う必要があるかもしれません。スクリプト送信。

4

1 に答える 1

2

Edit Assestの場合は、Ajaxフォームを使用して、次のメソッドOnSuccessイベントを呼び出します。また、ページの読み込み時に次のメソッドを呼び出す必要があります。

$.get("/ControllerName/Assets", { random: '@DateTime.Now.Ticks' }, function (response) {
                $("#ListOfAssestDiv").html(response);                
            });

アセットリストを表示するには、（@ Html.Action（ "Assets"））を別のdivに配置します。したがって、コードは次のようになります

 </head>
    <body>
        <div id="leftHandMenu">
        <h2>assets</h2>
        @Ajax.ActionLink("Create Asset", "CreateAsset", new AjaxOptions() { UpdateTargetId = "FormContainer", InsertionMode = InsertionMode.Replace })
<div id="ListOfAssestDiv">
        @Html.Action("Assets")
</div>
        </div>
        <div id="FormContainer">
        </div>
    </body>
</html>

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-07-05T05:08:07.120 に答える