0

製品を追加するための ASP.NET MVC ページを作成しています。このページには、[追加] ボタンのあるフォームと製品のリストが表示されます。ユーザーが [追加] をクリックすると、新しい製品がリストに追加され、フォームがリセットされます。jQuery フォーム プラグインを使用して、Ajax.BeginForm などを使用せずにこれを実行しようとしています。製品のリストを部分ビューに入れました。

製品クラスは次のとおりです。

public class Product
{
    public int Id { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
}

ビューモデルを使用しています：

public class ProductViewModel
{
    public ProductViewModel()
    {
    }

    public ProductViewModel(AjaxDataEntryContext db)
    {
        Products = db.Products.ToList();
        NewProduct = new Product();
    }
    public List<Product> Products { get; set;}
    public Product NewProduct { get; set;}
}

コントローラーはこれを行います：

public class ProductController : Controller
{
    private AjaxDataEntryContext db = new AjaxDataEntryContext();

    [HttpGet]
    public ViewResult AjaxForm()
    {
        return View(new ProductViewModel(db));
    }

    [HttpPost]
    public ActionResult AjaxForm(ProductViewModel viewModel)
    {
        db.Products.Add(viewModel.NewProduct);
        db.SaveChanges();
        return PartialView("_ProductList", db.Products.ToList());
    }
}

私のcshtmlは次のとおりです。

@model AjaxDataEntry.ViewModels.ProductViewModel
@{
    ViewBag.Title = "Index";
}
@Html.Partial("_ProductList", Model.Products)
@using (Html.BeginForm("AjaxForm", "Product", null, FormMethod.Post, new { id = "myForm1" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Product</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.NewProduct.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewProduct.Description)
            @Html.ValidationMessageFor(model => model.NewProduct.Description)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NewProduct.Price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewProduct.Price)
            @Html.ValidationMessageFor(model => model.NewProduct.Price)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<script type="text/javascript">
    $(document).ready(function () {
        var options = {
            target: '#producttable',   // target element(s) to be updated with server response 
            beforeSubmit: showRequest,  // pre-submit callback 
            success:       showResponse,  // post-submit callback 
            replaceTarget: true,
            dataType:  html,        // 'xml', 'script', or 'json' (expected server response type) 
            clearForm: true        // clear all form fields after successful submit 
        };

        // bind form using 'ajaxForm' 
        $('#myForm1').ajaxForm(options);
    });

    // pre-submit callback 
    function showRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        alert('About to submit: \n\n' + queryString);
        return true;
    }

    // post-submit callback 
    function showResponse(responseText, statusText, xhr, $form) {
        alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');
    }
</script>

最後に、上記のページで参照されている _ProductList パーシャル (およびコントローラー):

@model IEnumerable<AjaxDataEntry.Models.Product>
<div id="producttable">
    <table>
        <tr>
            <th>
                Description
            </th>
            <th>
                Price
            </th>
            <th>
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </table>
</div>

私の問題は、[追加] をクリックすると製品が正しく追加され、showRequest メッセージが表示されますが、画面が更新されたときに表示されるのはリスト、つまり完全なビューではなく部分的なものだけです。showResponse メッセージも表示されません。

私が間違っていることを知っている人はいますか？

4

1 に答える 1

0

ページ全体を送信するため、ShowResponseは呼び出されません。を使用する代わりに、を使用Html.BeginForm(...する必要がありますAjax.BeginForm(...。

于 2013-03-05T18:19:13.617 に答える