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 回答